Skip to content

Components / Button

Button

Buttons have the most options of any other components to allow for different colors, shapes, and sizes.

Structure

Elements

  1. Container
  2. Text label

Variations

Emphasis

Default
Primary
Link
  • Default
  • Primary
  • Link

Size

Normal
Small
Wide
Large
Size Description
Normal The normal button size should be the standard button size used for most card and dialog interactions.
Small Use a small button within page content when the button doesn’t need to stand out from the text as much or when it looks too large.
Wide Wide buttons are useful when you want the primary button to take up a bit more space in case it contains a short word or phrase.
Large Use large buttons in takeovers where there is one primary action and an option to dismiss the takeover.
Don't
Don't use different sized buttons together. When in doubt, stick with the default sized button.
Block

Block buttons are designed to take up an entire line. When two block buttons are created together, be sure to include space to separate the two.

Do
Block buttons are best used in narrower UIs, like takeovers.

Type

Text
Icon
  • Text
  • Icon

Behavior

States

Buttons have four available states that change the appearance of the button slightly:

  • Enabled
  • Focused
  • Active
  • Disabled
  • Loading

The loading state for buttons displays a progress indicator to provide feedback to the user that their button press is doing something.

Enabled
Focused
Active
Disabled
Loading
Default button states
Enabled
Focused
Active
Disabled
Loading
Primary button states
Enabled
Focused
Active
Disabled
Link button states

Style

Style specifications are available to inspect via Abstract. The following link will take you to their web-based interface.

Inspect component

Theming

The following table lists the theme properties used to style this component and any variations as well as a sample value.

A full list of properties used within the design system—as well as general usage guidelines—is available on the Theme properties page.

Examples of each theme property may be referenced by clicking a property name in the “property” column.

Sample Property Sample value
buttonCornerRadius

8px
defaultButtonBorderColor

#EEF1F5FF
defaultButtonBorderDisabledColor

#EEF1F54D
defaultButtonBorderFocusedColor

#EEF1F580
defaultButtonBorderPressedColor

#EEF1F533
defaultButtonColor

Simple hyperlink-like buttons with text that that is intended to display on primary or secondary content backgrounds

#EEF1F5FF
defaultButtonDisabledColor

#EEF1F54D
defaultButtonFocusedColor

#EEF1F51A
defaultButtonPressedColor

#EEF1F533
defaultButtonTextDisabledColor

#2A73A880
defaultButtonTextFocusedColor

#2A73A8FF
linkButtonFocusedColor

Background focused states

#2A73A81A
linkButtonPressedColor

Background pressed states

#2A73A833
linkButtonTextColor

Simple hyperlink like buttons with text that that is intended to display on primary or secondary content backgrounds

#2A73A8FF
linkButtonTextDisabledColor

#2A73A84D
linkButtonTextDisabledColor

#2A73A84D
linkButtonTextFocusedColor

#2A73A8FF
linkButtonTextPressedColor

#2A73A8FF
primaryButtonColor

The primary theme pairing; was more commonly used, but now has a limited use for first tally chips and login icons

#2A73A8FF
primaryButtonDisabledColor

#2A73A84D
primaryButtonFocusedColor

#388ECDFF
primaryButtonPressedColor

#61A5D7FF
primaryButtonTextColor

Text guaranteed to contrast on theme background

#FFFFFFFF
primaryButtonTextDisabledColor

#FFFFFF80
primaryButtonTextFocusedColor

#FFFFFFFF
primaryButtonTextPressedColor

#FFFFFFFF
© 2021 Jack Henry & Associates, Inc. Trademark notice
Version 0.7.0. Last updated March 23, 2021.