Skip to content

Improve buttons

How can our current buttons (outline, filled, disabled) be improved to be consistent in style no matter the state and different from other UI elements?

Proposal

  • Keep the outline buttons white filled
  • Darken the border color of the default button to help differentiate it from other elements
  • Introduce more expressive hover and active states

Also, we can do a better job with our disabled buttons. Let's reduce the opacity of the text to the very limit of passing WCAG AA for large text, and remove the fill altogether.

image

See brand.ai for final designs: https://brand.ai/git-lab/primary-brand

Original Proposals

Check the previous discussion in #24145 (closed)

Edited by Taurie Davis