# Button ## Overview The button component is a clickable control for actions such as submitting a form, confirming a choice, or triggering a UI change. The component styles a native ` ``` For a standalone navigational call to action outside prose, apply `.button` to an anchor with a valid `href`: ```html View application details ``` The class changes only the visual treatment. The anchor remains a link: browsers and assistive technology identify it as a link, Enter activates it, and link features such as opening in a new tab remain available. Do not add `role="button"`, a Space-key handler, or JavaScript that imitates button behavior. Use destination-oriented link text that communicates the purpose when read out of context. Keep inline prose links unstyled, and let links owned by navigation, breadcrumbs, headings, headers, and footers use those components' link treatments rather than `.button`. ```html ``` For an action that should stay visually distinct from the primary fill, use the `outline` variant. It uses a transparent surface and a visible border. Combine it with any color variant—`error`, `info`, `success`, or `warning`—using `data-variant` when the action needs that variant color treatment: ```html ``` For a lower-emphasis action that should read as lighter-weight while keeping button affordances, use the `flat` variant. It removes the border and background. Combine it with any color variant—`error`, `info`, `success`, or `warning`—using `data-variant` when the action needs that variant color treatment: ```html ``` The deprecated `secondary` and `tertiary` classes remain exact aliases for `outline` and `flat` respectively. Use the public variant names for new markup. Color variants communicate an action's semantic purpose. Use `data-variant="error"`, `data-variant="info"`, `data-variant="success"`, or `data-variant="warning"`. Each color variant applies its color scale to the button's resting, hover, and pressed states while preserving the selected button style variant. The `.error` color class remains supported for compatibility but is deprecated. Use `data-variant="error"` for new markup. If both are present, `data-variant` takes precedence. Deprecated features will be removed in v1. Use the `error` color variant for destructive actions such as deleting a record or removing access: ```html ``` Use the `info` color variant for actions associated with informational content or status: ```html ``` Use the `success` color variant for actions that approve or complete something successfully: ```html ``` Use the `warning` color variant for actions that need caution or review before proceeding: ```html ``` For related actions that should read as one compact control, place the buttons directly inside a named element with `role="group"`. Direct-child buttons and button-styled links in any `[role="group"]` keep their dimensions when hovered instead of expanding horizontally. Use a `fieldset` when the group needs a native legend: ```html
``` Buttons marked with `aria-active="true"` use the primary filled treatment: ```html ``` When a button includes an icon, use the Material Symbols icon font through the shared `.icon` element pattern: ```html ``` For icon-only buttons, apply the `.icon` class directly to the button and provide an accessible name: ```html ``` For icon-only navigation, combine `.button` and `.icon` on a native link and provide an accessible name: ```html arrow_forward ``` For buttons with a loading indicator, use `aria-busy="true"` and keep an action-specific visible label. Add `disabled` when the action must not be triggered again while it is processing: ```html ``` Button loaders render at `75%` of `--button-icon-size`. Typical SVG icons include internal padding within their view box, while the CSS loading ring fills its entire box; the reduction gives both a comparable optical size. Keeping the loader derived from the icon token also preserves consistent button dimensions between busy buttons and the icon button variant when the shared icon size changes. When space is constrained, an empty busy button centers the loading indicator. Provide its action-specific accessible name with `aria-label`: ```html ``` Use this component when the user needs to trigger an immediate action. Use a link when the interaction navigates to another page or location. Add `.button` to standalone links outside prose; keep inline and component-owned navigation links in their normal link treatment. Use a navigation pattern instead when the interface needs a row of destination choices such as section links or a primary page bar, even if the visual treatment looks similar to grouped controls. Button text should describe the action clearly and work without relying on surrounding context. The button should use a native `