Skip to main content
Contact us

Button

Buttons enable a user to initiate a specific action.

Figma

Storybook

Anatomy

The button component is made up of four elements.

  1. Container
  2. Icon
  3. Label
  4. Progress

Variants

Label

The label conveys the button's action. Keep button labels concise and action-driven.

Icon

An icon can be included alongside a label to provide additional visual context or by itself in compact layouts. Always ensure the icon's meaning is clear and compliments the text label.

Icon-based buttons should be selectively used to avoid unnecessary visual clutter. Additionally, they should include a tooltip to help clarify the meaning as well as provide relevant text to a screen reader or other assistive device.

Icon position

Icons can be placed on either side of the label with the left position being the default. Use left icons to emphasis a button’s meaning and right icons to imply a progression or directionality.

Appearance

Primary

Primary buttons call attentions to the strongest call to action within a particular context or view. These should generally appear only once per container.

Secondary

Secondary buttons are the default button appearance and often used alongside a primary button to indicate a secondary action such as “Cancel.” They can also be used for most non-critical actions.

Tertiary

Use tertiary buttons for less prominent or independent actions. Tertiary buttons can also be paired with a primary button when there are multiple calls to action.

Danger

Danger buttons convey destructive actions such as “Delete” or “Remove.” To avoid confusion, do not use danger buttons for any type of action other than a destructive one.

Size

Buttons are available in small, medium, and large sizes.

Small

Use small buttons where vertical space is limited or when paired with other content that is similar in height.

Medium

The medium size is the default and used for most button instances.

Large

Use large buttons in limited cases where a button needs to pair with a larger element or have particular prominence. Typically, a large button should be limited to one per view.

Block

By default, a button’s width is dependent on the label and/or icon contained within it. However, a block button expands to fit the width of its surrounding container. Buttons can be set as a block variant at any size. Use when vertically stacking multiple calls to action in a container such as a card or dialog.

Behavior

States

Each button appearance has six available states: enabled, focus, hover, active, disabled, and pending. The pending state replaces the label and icon with a progress indicator to show that a process such as saving is taking place.

Primary
The primary button appearance includes enabled, focus, hover, active, disabled, and pending states.
Secondary
The secondary button appearance includes enabled, focus, hover, active, disabled, and pending states.
Tertiary
The tertiary button appearance includes enabled, focus, hover, active, disabled, and pending states.
Danger
The danger button appearance includes enabled, focus, hover, active, disabled, and pending states.

Component tokens

The following component tokens are available for customizing the button component.

Sample references including the swatch and computed values currently represent the applied light theme.

The token lists can be copied into tabular format for pasting into spreadsheets or other applications. Use these to help you document product-specific customizations or perform fine-grained filters.

Color

  • jh-button-color-background-primary-enabled
    The button container background-color when enabled and `appearance=primary`.
    Default value
    jh-color-content-brand-enabled
    Computed value
    rgb(8, 92, 229)
  • jh-button-color-background-primary-focus
    The button container background-color when in focus and `appearance=primary`.
    Default value
    jh-color-content-brand-hover
    Computed value
    rgb(38, 79, 213)
  • jh-button-color-background-primary-hover
    The button container background-color when hovered and `appearance=primary`.
    Default value
    jh-color-content-brand-hover
    Computed value
    rgb(38, 79, 213)
  • jh-button-color-background-primary-active
    The button container background-color when active and `appearance=primary`.
    Default value
    jh-color-content-brand-active
    Computed value
    rgb(51, 67, 196)
  • jh-button-color-background-primary-disabled
    The button container background-color when disabled and `appearance=primary`.
    Default value
    jh-color-content-brand-enabled
    Computed value
    rgb(8, 92, 229)
  • jh-button-color-background-primary-pending
    The button container background-color when pending and `appearance=primary`.
    Default value
    jh-color-content-brand-enabled
    Computed value
    rgb(8, 92, 229)
  • jh-button-color-background-secondary-enabled
    The button container background-color when enabled and `appearance=secondary`.
    Default value
    transparent
    Computed value
    transparent
  • jh-button-color-background-secondary-focus
    The button container background-color when in focus and `appearance=secondary`.
    Default value
    jh-color-content-brand-hover
    Computed value
    rgb(38, 79, 213)
  • jh-button-color-background-secondary-hover
    The button container background-color when hovered and `appearance=secondary`.
    Default value
    jh-color-content-brand-hover
    Computed value
    rgb(38, 79, 213)
  • jh-button-color-background-secondary-active
    The button container background-color when active and `appearance=secondary`.
    Default value
    jh-color-content-brand-active
    Computed value
    rgb(51, 67, 196)
  • jh-button-color-background-secondary-disabled
    The button container background-color when disabled and `appearance=secondary`.
    Default value
    transparent
    Computed value
    transparent
  • jh-button-color-background-secondary-pending
    The button container background-color when pending and `appearance=secondary`.
    Default value
    transparent
    Computed value
    transparent
  • jh-button-color-background-tertiary-enabled
    The button container background-color when enabled and `appearance=tertiary`.
    Default value
    transparent
    Computed value
    transparent
  • jh-button-color-background-tertiary-focus
    The button container background-color when in focus and `appearance=tertiary`.
    Default value
    jh-color-content-brand-hover
    Computed value
    rgb(38, 79, 213)
  • jh-button-color-background-tertiary-hover
    The button container background-color when hovered and `appearance=tertiary`.
    Default value
    jh-color-content-brand-hover
    Computed value
    rgb(38, 79, 213)
  • jh-button-color-background-tertiary-active
    The button container background-color when active and `appearance=tertiary`.
    Default value
    jh-color-content-brand-active
    Computed value
    rgb(51, 67, 196)
  • jh-button-color-background-tertiary-disabled
    The button container background-color when disabled and `appearance=tertiary`.
    Default value
    transparent
    Computed value
    transparent
  • jh-button-color-background-tertiary-pending
    The button container background-color when pending and `appearance=tertiary`.
    Default value
    transparent
    Computed value
    transparent
  • jh-button-color-background-danger-enabled
    The button container background-color when enabled and `appearance=danger`.
    Default value
    jh-color-content-negative-enabled
    Computed value
    rgb(189, 33, 19)
  • jh-button-color-background-danger-focus
    The button container background-color when in focus and `appearance=danger`.
    Default value
    jh-color-content-negative-hover
    Computed value
    rgb(174, 24, 13)
  • jh-button-color-background-danger-hover
    The button container background-color when hovered and `appearance=danger`.
    Default value
    jh-color-content-negative-hover
    Computed value
    rgb(174, 24, 13)
  • jh-button-color-background-danger-active
    The button container background-color when active and `appearance=danger`.
    Default value
    jh-color-content-negative-active
    Computed value
    rgb(158, 21, 11)
  • jh-button-color-background-danger-disabled
    The button container background-color when disabled and `appearance=danger`.
    Default value
    jh-color-content-negative-enabled
    Computed value
    rgb(189, 33, 19)
  • jh-button-color-background-danger-pending
    The button container background-color when pending and `appearance=danger`.
    Default value
    jh-color-content-negative-enabled
    Computed value
    rgb(189, 33, 19)
  • jh-button-color-border-primary-enabled
    The button container border-color when enabled and `appearance=primary`.
    Default value
    transparent
    Computed value
    transparent
  • jh-button-color-border-primary-focus
    The button container border-color when in focus and `appearance=primary`.
    Default value
    transparent
    Computed value
    transparent
  • jh-button-color-border-primary-hover
    The button container border-color when hovered and `appearance=primary`.
    Default value
    transparent
    Computed value
    transparent
  • jh-button-color-border-primary-active
    The button container border-color when active and `appearance=primary`.
    Default value
    transparent
    Computed value
    transparent
  • jh-button-color-border-primary-disabled
    The button container border-color when disabled and `appearance=primary`.
    Default value
    transparent
    Computed value
    transparent
  • jh-button-color-border-primary-pending
    The button container border-color when pending and `appearance=primary`.
    Default value
    transparent
    Computed value
    transparent
  • jh-button-color-border-secondary-enabled
    The button container border-color when enabled and `appearance=secondary`.
    Default value
    jh-color-content-brand-enabled
    Computed value
    rgb(8, 92, 229)
  • jh-button-color-border-secondary-focus
    The button container border-color when in focus and `appearance=secondary`.
    Default value
    jh-color-content-brand-hover
    Computed value
    rgb(38, 79, 213)
  • jh-button-color-border-secondary-hover
    The button container border-color when hovered and `appearance=secondary`.
    Default value
    jh-color-content-brand-hover
    Computed value
    rgb(38, 79, 213)
  • jh-button-color-border-secondary-active
    The button container border-color when active and `appearance=secondary`.
    Default value
    jh-color-content-brand-active
    Computed value
    rgb(51, 67, 196)
  • jh-button-color-border-secondary-disabled
    The button container border-color when disabled and `appearance=secondary`.
    Default value
    jh-color-content-brand-enabled
    Computed value
    rgb(8, 92, 229)
  • jh-button-color-border-secondary-pending
    The button container border-color when pending and `appearance=secondary`.
    Default value
    jh-color-content-brand-enabled
    Computed value
    rgb(8, 92, 229)
  • jh-button-color-border-tertiary-enabled
    The button container border-color when enabled and `appearance=tertiary`.
    Default value
    transparent
    Computed value
    transparent
  • jh-button-color-border-tertiary-focus
    The button container border-color when in focus and `appearance=tertiary`.
    Default value
    transparent
    Computed value
    transparent
  • jh-button-color-border-tertiary-hover
    The button container border-color when hovered and `appearance=tertiary`.
    Default value
    transparent
    Computed value
    transparent
  • jh-button-color-border-tertiary-active
    The button container border-color when active and `appearance=tertiary`.
    Default value
    transparent
    Computed value
    transparent
  • jh-button-color-border-tertiary-disabled
    The button container border-color when disabled and `appearance=tertiary`.
    Default value
    transparent
    Computed value
    transparent
  • jh-button-color-border-tertiary-pending
    The button container border-color when pending and `appearance=tertiary`.
    Default value
    transparent
    Computed value
    transparent
  • jh-button-color-border-danger-enabled
    The button container border-color when enabled and `appearance=danger`.
    Default value
    transparent
    Computed value
    transparent
  • jh-button-color-border-danger-focus
    The button container border-color when in focus and `appearance=danger`.
    Default value
    transparent
    Computed value
    transparent
  • jh-button-color-border-danger-hover
    The button container border-color when hovered and `appearance=danger`.
    Default value
    transparent
    Computed value
    transparent
  • jh-button-color-border-danger-active
    The button container border-color when active and `appearance=danger`.
    Default value
    transparent
    Computed value
    transparent
  • jh-button-color-border-danger-disabled
    The button container border-color when disabled and `appearance=danger`.
    Default value
    transparent
    Computed value
    transparent
  • jh-button-color-border-danger-pending
    The button container border-color when pending and `appearance=danger`.
    Default value
    transparent
    Computed value
    transparent
  • jh-button-icon-color-fill-primary-enabled
    The icon color when enabled and `appearance=primary`.
    Default value
    jh-color-content-on-brand-enabled
    Computed value
    rgb(255, 255, 255)
  • jh-button-icon-color-fill-primary-focus
    The icon color when in focus and `appearance=primary`.
    Default value
    jh-color-content-on-brand-hover
    Computed value
    rgb(255, 255, 255)
  • jh-button-icon-color-fill-primary-hover
    The icon color when hovered and `appearance=primary`.
    Default value
    jh-color-content-on-brand-hover
    Computed value
    rgb(255, 255, 255)
  • jh-button-icon-color-fill-primary-active
    The icon color when active and `appearance=primary`.
    Default value
    jh-color-content-on-brand-active
    Computed value
    rgb(255, 255, 255)
  • jh-button-icon-color-fill-primary-disabled
    The icon color when disabled and `appearance=primary`.
    Default value
    jh-color-content-on-brand-enabled
    Computed value
    rgb(255, 255, 255)
  • jh-button-icon-color-fill-secondary-enabled
    The icon color when enabled and `appearance=secondary`.
    Default value
    jh-color-content-brand-enabled
    Computed value
    rgb(8, 92, 229)
  • jh-button-icon-color-fill-secondary-focus
    The icon color when in focus and `appearance=secondary`.
    Default value
    jh-color-content-on-brand-hover
    Computed value
    rgb(255, 255, 255)
  • jh-button-icon-color-fill-secondary-hover
    The icon color when hovered and `appearance=secondary`.
    Default value
    jh-color-content-on-brand-hover
    Computed value
    rgb(255, 255, 255)
  • jh-button-icon-color-fill-secondary-active
    The icon color when active and `appearance=secondary`.
    Default value
    jh-color-content-on-brand-active
    Computed value
    rgb(255, 255, 255)
  • jh-button-icon-color-fill-secondary-disabled
    The icon color when disabled and `appearance=secondary`.
    Default value
    jh-color-content-brand-enabled
    Computed value
    rgb(8, 92, 229)
  • jh-button-icon-color-fill-tertiary-enabled
    The icon color when enabled and `appearance=tertiary`.
    Default value
    jh-color-content-brand-enabled
    Computed value
    rgb(8, 92, 229)
  • jh-button-icon-color-fill-tertiary-focus
    The icon color when in focus and `appearance=tertiary`.
    Default value
    jh-color-content-on-brand-hover
    Computed value
    rgb(255, 255, 255)
  • jh-button-icon-color-fill-tertiary-hover
    The icon color when hovered and `appearance=tertiary`.
    Default value
    jh-color-content-on-brand-hover
    Computed value
    rgb(255, 255, 255)
  • jh-button-icon-color-fill-tertiary-active
    The icon color when active and `appearance=tertiary`.
    Default value
    jh-color-content-on-brand-active
    Computed value
    rgb(255, 255, 255)
  • jh-button-icon-color-fill-tertiary-disabled
    The icon color when disabled and `appearance=tertiary`.
    Default value
    jh-color-content-brand-enabled
    Computed value
    rgb(8, 92, 229)
  • jh-button-icon-color-fill-danger-enabled
    The icon color when enabled and `appearance=danger`.
    Default value
    jh-color-content-on-negative-enabled
    Computed value
    rgb(255, 255, 255)
  • jh-button-icon-color-fill-danger-focus
    The icon color when in focus and `appearance=danger`.
    Default value
    jh-color-content-on-negative-hover
    Computed value
    rgb(255, 255, 255)
  • jh-button-icon-color-fill-danger-hover
    The icon color when hovered and `appearance=danger`.
    Default value
    jh-color-content-on-negative-hover
    Computed value
    rgb(255, 255, 255)
  • jh-button-icon-color-fill-danger-active
    The icon color when active and `appearance=danger`.
    Default value
    jh-color-content-on-negative-active
    Computed value
    rgb(255, 255, 255)
  • jh-button-icon-color-fill-danger-disabled
    The icon color when disabled and `appearance=danger`.
    Default value
    jh-color-content-on-negative-enabled
    Computed value
    rgb(255, 255, 255)
  • jh-button-label-color-text-primary-enabled
    The label text color when enabled and `appearance=primary`.
    Default value
    jh-color-content-on-brand-enabled
    Computed value
    rgb(255, 255, 255)
  • jh-button-label-color-text-primary-focus
    The label text color when in focus and `appearance=primary`.
    Default value
    jh-color-content-on-brand-hover
    Computed value
    rgb(255, 255, 255)
  • jh-button-label-color-text-primary-hover
    The label text color when hovered and `appearance=primary`.
    Default value
    jh-color-content-on-brand-hover
    Computed value
    rgb(255, 255, 255)
  • jh-button-label-color-text-primary-active
    The label text color when active and `appearance=primary`.
    Default value
    jh-color-content-on-brand-active
    Computed value
    rgb(255, 255, 255)
  • jh-button-label-color-text-primary-disabled
    The label text color when disabled and `appearance=primary`.
    Default value
    jh-color-content-on-brand-enabled
    Computed value
    rgb(255, 255, 255)
  • jh-button-label-color-text-secondary-enabled
    The label text color when enabled and `appearance=secondary`.
    Default value
    jh-color-content-brand-enabled
    Computed value
    rgb(8, 92, 229)
  • jh-button-label-color-text-secondary-focus
    The label text color when in focus and `appearance=secondary`.
    Default value
    jh-color-content-on-brand-hover
    Computed value
    rgb(255, 255, 255)
  • jh-button-label-color-text-secondary-hover
    The label text color when hovered and `appearance=secondary`.
    Default value
    jh-color-content-on-brand-hover
    Computed value
    rgb(255, 255, 255)
  • jh-button-label-color-text-secondary-active
    The label text color when active and `appearance=secondary`.
    Default value
    jh-color-content-on-brand-active
    Computed value
    rgb(255, 255, 255)
  • jh-button-label-color-text-secondary-disabled
    The label text color when disabled and `appearance=secondary`.
    Default value
    jh-color-content-brand-enabled
    Computed value
    rgb(8, 92, 229)
  • jh-button-label-color-text-tertiary-enabled
    The label text color when enabled and `appearance=tertiary`.
    Default value
    jh-color-content-brand-enabled
    Computed value
    rgb(8, 92, 229)
  • jh-button-label-color-text-tertiary-focus
    The label text color when in focus and `appearance=tertiary`.
    Default value
    jh-color-content-on-brand-hover
    Computed value
    rgb(255, 255, 255)
  • jh-button-label-color-text-tertiary-hover
    The label text color when hovered and `appearance=tertiary`.
    Default value
    jh-color-content-on-brand-hover
    Computed value
    rgb(255, 255, 255)
  • jh-button-label-color-text-tertiary-active
    The label text color when active and `appearance=tertiary`.
    Default value
    jh-color-content-on-brand-active
    Computed value
    rgb(255, 255, 255)
  • jh-button-label-color-text-tertiary-disabled
    The label text color when disabled and `appearance=tertiary`.
    Default value
    jh-color-content-brand-enabled
    Computed value
    rgb(8, 92, 229)
  • jh-button-label-color-text-danger-enabled
    The label text color when enabled and `appearance=danger`.
    Default value
    jh-color-content-on-negative-enabled
    Computed value
    rgb(255, 255, 255)
  • jh-button-label-color-text-danger-focus
    The label text color when in focus and `appearance=danger`.
    Default value
    jh-color-content-on-negative-hover
    Computed value
    rgb(255, 255, 255)
  • jh-button-label-color-text-danger-hover
    The label text color when hovered and `appearance=danger`.
    Default value
    jh-color-content-on-negative-hover
    Computed value
    rgb(255, 255, 255)
  • jh-button-label-color-text-danger-active
    The label text color when active and `appearance=danger`.
    Default value
    jh-color-content-on-negative-active
    Computed value
    rgb(255, 255, 255)
  • jh-button-label-color-text-danger-disabled
    The label text color when disabled and `appearance=danger`.
    Default value
    jh-color-content-on-negative-enabled
    Computed value
    rgb(255, 255, 255)
  • jh-button-progress-color-border-primary-pending
    The progress indicator border-color when `appearance=primary`.
    Default value
    jh-color-content-on-brand-enabled
    Computed value
    rgb(255, 255, 255)
  • jh-button-progress-color-border-secondary-pending
    The progress indicator border-color when `appearance=secondary`.
    Default value
    jh-color-content-brand-enabled
    Computed value
    rgb(8, 92, 229)
  • jh-button-progress-color-border-tertiary-pending
    The progress indicator border-color when `appearance=tertiary`.
    Default value
    jh-color-content-brand-enabled
    Computed value
    rgb(8, 92, 229)
  • jh-button-progress-color-border-danger-pending
    The progress indicator border-color when `appearance=danger`.
    Default value
    jh-color-content-on-negative-enabled
    Computed value
    rgb(255, 255, 255)

Opacity

  • jh-button-opacity-disabled
    The button container opacity when disabled.
    Default value
    jh-opacity-disabled
    Computed value
    0.3

Border

  • jh-button-border-radius
    The button container border-radius.
    Default value
    jh-border-radius-100
    Computed value
    4px

Shadow

  • jh-button-shadow-focus
    The button container box-shadow when in focus.
    Default value
    jh-shadow-focus
    Computed value
    0 0 0 1px rgb(255, 255, 255), 0 0 0 3px rgb(8, 92, 229)

Size

  • jh-button-size
    The button width when no label is set, and the button height. Button width and height
    Default value
    jh-size-1200
    Computed value
    48px

Dependencies

The button component uses the following components:

Progress

A progress indicator provides feedback to a user regarding loading and waiting states.