Skip to content

Draft: feat(GlButton): Update design

What does this MR do and why?

Modernizes the default button style for a cleaner, more up-to-date appearance.

This update brings subtle yet meaningful improvements to enhance visual clarity and align with evolving UI standards. While increasing the border radius is currently out of scope, this change sets the foundation for future enhancements, including the introduction of semantic design tokens for border radius treatments.

Key adjustments

  • Applies a filled background using neutral.10, giving the button a more solid and intentional presence (and visually further distinguish it from form fields)
  • Reduces the font size to 13px for better typographic balance across components
  • Bumps font weight to 500 to improve text legibility and emphasis while decreasing font size

Screenshots or screen recordings

Before After
current updated
current_dark updated_dark
Disabled
before after

How to set up and validate locally

  1. http://localhost:9001/?path=/story/base-button--all-variants-and-categories
  2. http://localhost:9001/?path=/story/base-button-group--all-split-dropdowns-variants

MR acceptance checklist

Evaluate this MR against the MR acceptance checklist. It helps you analyze changes to reduce risks in quality, performance, reliability, security, and maintainability.

Related to gitlab-org/gitlab#513105 (closed), #2945

Edited by Sascha Eggenberger

Merge request reports

Loading