Buttons and Links

Global Format

Text
Primary Font, 11px
Line Height
13px
Border
solid, 1px, 11px radius
Padding
top/bottom – 3px
left/right – 8px
Width
based on text length
Height
~23px

Primary Button (.button-primary)

Primary buttons are used for the ultimate intended action of the form, e.g. “Publish” or “Update”.

Example

Image:ui-button-primary-states.png?

Text Color
#FFFFFF bold
Text Shadow
1px up(-1px), no blur, black (30% transparency)
Background
#21759B button-grad.png
Border Color
#298cba
Hover
Text color: #eaf2fa
Border color: #13455b
Active
Text color: #eaf2fa
Border color: #13455b
Background: #21759B button-grad-active.png
Disabled
Text color: #9FD0D5
Background: 298CBA

Button and Secondary Buttons (.button, input.submit, .button-secondary)

Use secondary buttons for lesser actions. For example “Apply” – for bulk Actions, “Search” – for search forms, or “Cancel.”

They should still be form actions, and are frequently used for alternatives to the corresponding Primary Button’s action.

Example

Image:ui-button-states.png

Text Color
#464646
Text Shadow
1px down, no blur, white
Background
#F2F2F2 white-grad.png
Border Color
#BBBBBB
Hover
Text color: #000000
Border color: #666666
Active
Text color: #000000
Border color: #666666
Background: #f2f2f2 white-grad.png
Disabled
Text color: #AAAAAA
Border color: #DDDDDD

Delete Actions (.submitdelete, .deletion, .row-actions .delete a.delete-tag)

In order to separate destructive actions from lesser actions, these actions should be displayed as red links. Edit Post -> Publish: Move to Trash, Table:Row Actions -> Delete.

Links – Not Buttons (.button-link, a.button)

In the past, some links also appeared as buttons. Now, actions that are not a form action should use links. (Ex. Network Admin -> “Create a New Site | Create a New User”, Dashboard -> Recent Comments: Configure, Table:Row Actions -> “Edit”.)

You should also use these to expand areas with inline forms. (Table:Row Actions -> Quick Edit)

Style: Text Filters