# 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. ![](https://3095585262-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MeRRIXlvUyVcYyYJauQ%2F-MhVJUMi8ldtlhfrTyCE%2F-MhVAEm5qYdsvQmuW15Y%2FDefault%402x%20\(5\).png?alt=media\&token=dceecdbb-3085-4f90-a762-f5608b9c4534) ### 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](#button-structures), 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](https://urbanfootprint.gitbook.io/uf-style-guide/iconography) 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` |