⚙️ Buttons #4963
Replies: 3 comments
-
@MaddyDaigle @RM-1978 Content wise I think this is pretty solid now, but I would very much like any insight you can provide - specifically on interaction states. I've already done a AA contrast check as well, but feel free to run another. Feel free to edit the main issue's content with stuff! |
Beta Was this translation helpful? Give feedback.
-
@substrae I was looking at the "icon alt text" accessibility item; and I was wondering if it would be best to create a separate component discussion about icons? Maybe we could just include alt text for all of the icons we tend to use & detail when they should be used? Since alt text would only be required if the icon provides information that isn't fully provided by the text right next to it (e.g. icon next to alerts provide info on the type of alert, so alt text is needed). Some icons may have alt="" because they're purely decorative. |
Beta Was this translation helpful? Give feedback.
-
@substrae is this also safe to close for the same reason?
|
Beta Was this translation helpful? Give feedback.
-
⚙️ Summary
Visit the Figma file
A component that acts as a standard element for taking action. This button component represents the visual button style of an element, not the functional HTML
<button>
element. This means that the button component should handle the styling for both<button>
and<a>
when they are designed and implemented as visual buttons.For all layout and spacing guidance, including how this component should respond on smaller devices, please see the Figma file.
✅ Design checklist
base
query) layout and space diagramp-tablet
query or larger) layout and space diagram✅ Accessibility checklist
alt
text has been identified and labelled🛠️ Properties
Button styles (style variations)
Solid: Solid-style buttons are the main action driver. They should be used to draw attention to the primary action on a page and paired with inline-style buttons to denote task hierarchy.
Inline: Inline-style buttons should be used when an action is supplementary to the primary action on the page. These buttons are designed to visibly mimic standard links to avoid cluttering the UI while still retaining all of the behaviour and interaction states of a solid-style button.
Call-to-action: Calls-to-action are designed to act as conversion-centric buttons that draw attention to campaigns or special tasks we want to encourage. Calls-to-action are to be used sparingly, and never within standard app UI.
Button tasks (color variations)
Primary: Buttons styled using the palette's
primary
color, this color should be used in conjunction with a clear task label to denote a key task. When multiple primary actions exist on a page, the most important should leverage this button style, while subsequent buttons should use secondary and tertiary styles.Secondary: Buttons styled using the palette's
secondary
color, this color should be used for actions that are supplementary but still require attention.Tertiary : Buttons styled using the palette's
tertiary
color, this color allows for a final, third layer of hierarchy, but is unlikely to be used frequently.Confirmation: Buttons styled using the palette's
success
color, this color should be used to indicate confirmation or progression to help encourage an action and indicate that it will create an item or move the user forward.Caution: Buttons styled using the palette's
warning
color, this color should be used to indicate that an action will cause a change that requires attention. Caution style buttons shouldn't be used if the action being taken is entirely destructive.Destructive: Buttons styled using the palette's
error
color, this color is reserved for actions that will delete data or destroy objects in the UI.Block vs. inline placement
Buttons should have the option to be either block-level or inline-level when it comes to positioning. Buttons should be inline by default, but when they are block level, should stretch to fill available space within their container.
Solid/inline buttons with icons
Solid-style and inline-style buttons can have an optional icon selected from the options found within Heroicons "mini" set. These icons should be right of the label, and center with text in block-level placement.
💡 Interaction states
Buttons have a relatively complex series of interaction states, so as we discover new situations, they will be added below.
Hover
Hover state should only occur on devices where hover is available. All button types trigger a similar style when it comes to hovering - a solid
3px
border, a background change to the relevant.lightest
color modifier, andblack
text.Focus
Focus state should only occur on
:focus-visible
. To help retain a sense of consistency across all components, the button focus state useswarning.lighter
andblack
to create a strong sense of contrast and focus.Active
The active state occurs when a button is in the midst of being pressed. The hover state, if applied, should transition to a
white
background.Pending
Throughout the app, we have various UI that requires the user to wait for a task to complete, whether it be a submission, data processing, or other action. The pending state allows a button to actively communicate that a task is ongoing so that the user receives immediate feedback. Buttons with icons present should swap the icon out temporarily to Heroicons' mini
arrow-path
and lightly animate it to indicate an action is in progress. At the same time, the button's label should change temporarily to indicate the action is in progress.Disabled
Traditionally, buttons are disabled using the
disabled
HTML attribute. This attribute, however, is inaccessible.In its stead, the button component leverages a custom disabled state that provides added context to the user in the form of an additional label below the button. The button itself, when "disabled" should still remain focusable by the user, but the visual style should change to indicate its state. JavaScript should be used to prevent submission or action, while providing proper assistive technology feedback.
The additional label should be used to highlight why the user can't proceed. If there is a relevant error summary on the page, it can link the user there. Otherwise, it will ideally communicate the specifics (concisely) about what is causing the button to be disabled (e.g. a missing field, lack of an attachment, no data to save, etc.)
🥰 Accessibility
Icon alt text
TBD
Pending state management
TBD
Disabled state management
TBD
Beta Was this translation helpful? Give feedback.
All reactions