Buttons

Usage

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.

General Guidelines

• Write labels in sentence case.

• Use verbs and an active voice.

• Use clear, succinct, and informative language.

• Limit the copy length to 22 characters.

Animation & Interaction Guidelines

• 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.

Types of Buttons

Primary Buttons

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

Outline Buttons

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 Buttons

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

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

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

Variations

Buttons with icons

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