# 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 a secondary action that should stay visually distinct from the primary fill, use the `secondary` helper: ```html ``` For a lower-emphasis action that should read as lighter-weight while keeping button affordances, use the `tertiary` helper: ```html ``` For a destructive action that should stand out from brand-colored actions, use the `error` helper: ```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 `