# Button (w-button) ## Description Performs an action or renders a link with button styling. Use button variants to match action priority, risk, and context. [Warp component reference](https://warp-ds.github.io/docs/components/button/frameworks/elements) ## Usage Button is used for actions. Use it when the user can submit, save, confirm, cancel, open, close, or trigger something on the current page. Use a link instead when the user is navigating to another page. If the control should look like a button but navigate like a link, use `w-link`. ### Basic Button ```html Save ``` The default `variant` is `secondary` and the default `type` is `button`. ### Variants Choose the variant based on the action's priority and context: - `primary`: the main action in a view or flow - `secondary`: secondary or tertiary actions; this is the default - `negative`: destructive or high-risk actions - `negativeQuiet`: low-emphasis destructive actions - `utility`: compact utility actions - `utilityQuiet`: low-emphasis utility actions - `quiet`: low-emphasis actions, often near other buttons - `link`: (@deprecated) action styled like an inline link - `pill`: circular icon-style controls - `overlay`, `overlayQuiet`, `overlayInverted`, `overlayInvertedQuiet`: controls placed on top of media or elevated surfaces ```html Publish Cancel Delete Filter ``` ### Sizes And Width Use `small` for compact layouts. Use `full-width` when the button should fill its parent, such as in narrow mobile layouts. ```html Save Continue ``` ### Icon-Only Buttons Use `variant="pill"` for circular icon-only controls. Include accessible text in the slotted content so the internal button has a name. ```html Close ``` ### Loading Use `loading` after the user triggers an action and the action is in progress. ```html Saving ``` Keep the button text descriptive while loading. Do not rely on the loading animation alone to explain what is happening. ### Form Buttons Use `type="submit"` to submit the containing form and `type="reset"` to reset it. Use `name` and `value` when the button value should be included in form handling. ```html
Save Reset
``` ### Link Styled As Button Use an `a` tag if you need a link that looks and behaves like a link, do not use `w-button`. ### Link Styled As Button Use `w-link` if you need a link that looks like a button. ### Disabled Actions Avoid disabled buttons where possible. Disabled controls often make it harder for users to understand what is missing or how to continue. Prefer an enabled button with clear validation or explanatory feedback near the related field. ## Accessibility Buttons must have a clear accessible name and should describe the action they perform. ### Use Descriptive Text Prefer visible text that names the action. ```html Save changes ``` Avoid vague labels when the action is not obvious from context. ```html OK ``` ### Icon-Only Buttons If a button does not have visible text, include text for assistive technologies in the slotted content. ```html Close ``` The accessible text should describe the action, not the icon shape. ### Disabled Buttons Avoid disabled buttons. A disabled control can prevent keyboard users from reaching it and often does not explain what must happen before the action becomes available. Prefer keeping the button available and showing validation or explanatory feedback when the user tries to continue. ### Button Or Link Use a w-button for actions on the current page. Use a w-link for navigation. For backwards compatibility, if `href` is set, `w-button` renders a link with button styling. The accessible behavior is link behavior, even though the component looks like a button. This is deprecated behaviour and you should instead use the w-link component if you need to render a link that looks like a button. ## Examples ### Primary ```html Publish ``` ### Secondary ```html Cancel ``` ### Negative ```html Delete ``` ### Utility ```html Filter ``` ### Quiet ```html Skip ``` ### Icon Only ```html Close ``` ### Small ```html Save ``` ### Full Width ```html Continue ``` ### Loading ```html Saving ``` ### Link Styled As Button ```html New message ``` ### External Link ```html Visit example ``` ### Form Actions ```html
Save Reset
``` ## Styling API This component supports styling through **component tokens** (CSS custom properties with a --w-c- prefix) and **parts**. ### Parts Use `::part(...)` from outside the component. - `base` — the clickable element (`