Buttons
Last updated
Last updated
Buttons allow users to perform actions. Text labels in buttons should use concise, action-oriented language. Higher contrast in size and color can indicate a hierarchy of importance.
They differ from links, which act as a navigational component to lead users to another page or separate site/application.
Write labels in sentence case.
Use verbs and an active voice.
Use clear, succinct, and informative language.
Limit the copy length to 22 characters.
Cursor on hover: cursor-pointer
Animation: transition + duration-500 + ease-in-out
Disabled buttons should typically be accompanied by a tooltip indicating why the user is prevented from performing an action.
Primary buttons indicate the key action that a user should take in a component. The bright blue color of the button should draw visual attention to that action, and imply that it is the most likely action a user should take.
Primary buttons can be used in a button group, but avoid using multiple primary buttons within a single component.
Default
Hover
Focus
bg-blue-700
hover:bg-blue-800
focus:border-blue-700
text-white
focus:ring-2
focus:ring-blue-700
focus:ring-opacity-30
Active
Disabled
active:bg-blue-900
disabled:opacity-50
Secondary buttons indicate less common actions, often as an alternative to a primary action.
Default
Hover
Focus
bg-white
hover:bg-blue-gray-50
focus:border-blue-100
text-blacK
focus:ring-blue-gray-300
focus:ring-2
focus:ring-blue-gray-300
focus:ring-blue-700
focus:ring-opacity-30
Active
Disabled
bg-white
disabled:opacity-50
text-black
Minimal button text labels should use our Primary Blue color to indicate interactivity.
Default
Hover
Focus
bg-transparent
hover:bg-blue-gray-50
focus:border-blue-700
text-blue-700
focus:ring-2
focus:ring-blue-700
focus:ring-opacity-30
Active
Disabled
active:bg-blue-gray-100
disabled:opacity-50
Destructive buttons indicate an action that may be irreversible. When possible, descriptive text should accompany a destructive button to inform the user about the consequences of the action before they opt to take it.
Default
Hover
Focus
bg-red-600
hover:bg-red-800
bg-red-800
text-white
text-white
text-white
focus: ring-blue-700
focus: ring-blue-100
Active
Disabled
bg-red-800
disabled:opacity-50
text-white
Icon buttons are buttons that use an icon instead of words, but still perform a key action that the user can take. They are typically used when a user can choose between several related actions, such as in a toolbar or menu.
Icon buttons should always be accompanied by a tooltip to provide additional guidance as to what action the button will perform.
Default
Hover
icon-blue-700
hover:bg-blue-gray-50
Focus
Active
focus:border-blue-700
active:bg-blue-gray-100
focus:ring-2
focus:ring-blue-700
focus:ring-opacity-30
Disabled
disabled:opacity-50
With Icon left
With Icon Right
Text padding: py-2 pl-7 pr-3
Text padding: py-2 pl-3 pr-7
Icon padding: pl-2
Icon padding: pr-2
Icon size: 16px
Icon size: 16px
Full Width
Button Group
w-full
default: bg-indigo-150
disabled: bg-blue-gray-200
