Button

Use GdsButton for actions — save, open a dialog, go to the next step.

• contained — main action
• outlined — secondary action
• text — low-emphasis or toolbar actions

For page-to-page navigation, use a link instead.

Usage

Variants

Three variants in order of visual weight. Use exactly one contained button per logical action group - multiple primaries confuse the user about which one to click.

Contained Button

Use a contained button for the primary action in a section or dialog.

Colors

The examples below cover the colors shown by default. Use error for destructive actions and reserve primary for the dominant action on a screen. Other MUI colors such as success and warning remain available in code.

Sizes

Three sizes for different surface densities. Default to medium; use small inside tight UI like toolbars and tables, and large for hero CTAs.

Disabled state

Set disabled when the action isn’t currently available. Always pair a disabled button with adjacent helper text (or a tooltip - see the Tooltip page for the disabled-element pattern) explaining why it’s disabled, so the user knows what to do to enable it.

Props