Buttons are a ubiquitous element in most apps, a solid design can help elevate the polish of the overall UI/UX.

Here's a matrix of the current variants / states of the Button component.

Issues

• Hover styles are inconsistent, some variants don't have them at all.
  • Sometimes the focus ring matches the hover accent, other times it does not.
• Active states for admin-colored variants (secondary, tertiary) use gray text. This looks particularly awkward on an admin-colored surface (see Tertiary:active).
• Busy states look a bit dated, and do not work well on the link variant.
• It’s not clear when to use the ‘default’ variant, or how that fits in with the others.
  • isPressed doesn’t seem to have much use outside the default variant. It indicates whether a button is toggled on or not, e.g. “Bold” in the block toolbar.
  • Should this be a separate component, or could it be consolidated with the tertiary variant?
• Disabled states of the primary variant are very prominent, and draw a lot of attention given their un-interactivity.
• Font weight matches regular text. This isn't a problem when the button has a solid background as the user can easily identify the element as a button. But when it doesn’t (secondary and tertiary variants) it’s not obvious that the element is a button when it appears in close proximity to body text.
• Inconsistent focus styles – on primary buttons there's a small gap between the button and the focus ring, this is absent in other variants.
• Some focus rings are semi-opaque (Button: Improve the aria-disabled focus style #62480)
• Focus styles are applied to :focus meaning they appear on click. We might consider moving those styles to :focus-visible so they appear on keyboard interaction instead.
  • Hover + focus styles are incompatible for some variants. e.g. Hovering a focussed secondary button removes the focus ring.

Let's refine the list of issues before exploring potential solutions. Do you agree with this list? Are any items missing?

Task list

Based on the discussion in this issue, here's a list of items to be implemented. Refer to this codepen for demonstrations.

• Update busy state design to utilise a spinner
• Consolidate default with tertiary
• Add hover states to variants that are missing them
• Align focus ring styling across all variants & fix existing issues
• Apply focus styles to focus-visible
• Consistent disabled state styling
• Do not colorise focus rings for destructive buttons
• Update secondary button appearance #64744