## Description An `` represents an action a user can take. sp-buttons can be clicked or tapped to perform an action or to navigate to another page. sp-buttons in Spectrum have several variations for different uses and multiple levels of loudness for various attention-getting needs. ### Usage [![See it on NPM!](https://img.shields.io/npm/v/@spectrum-web-components/button?style=for-the-badge)](https://www.npmjs.com/package/@spectrum-web-components/button) [![How big is this package in your project?](https://img.shields.io/bundlephobia/minzip/@spectrum-web-components/button?style=for-the-badge)](https://bundlephobia.com/result?p=@spectrum-web-components/button) [![Try it on webcomponents.dev](https://img.shields.io/badge/Try%20it%20on-webcomponents.dev-green?style=for-the-badge)](https://webcomponents.dev/edit/collection/fO75441E1Q5ZlI0e9pgq/Zjc3o94DWuBkT4ve3dny/src/index.ts) ``` yarn add @spectrum-web-components/button ``` Import the side effectful registration of `` or `` as follows: ``` import '@spectrum-web-components/button/sp-button.js'; import '@spectrum-web-components/button/sp-clear-button.js'; import '@spectrum-web-components/button/sp-close-button.js'; ``` When looking to leverage the `Button`, `ClearButton`, or `CloseButton` base classes as a type and/or for extension purposes, do so via: ``` import { Button, ClearButton, CloseButton } from '@spectrum-web-components/button'; ``` ## Sizes Small ```html demo Small ``` Medium ```html demo Medium ``` Large ```html demo Large ``` Extra Large ```html demo Extra Large ``` ## Content `` elements can be provided a visible label, a label with an icon, or just an icon (a non-visible label can be prived via the `label` attribute on an `` or on an `` element child to appropriately fulfill the accessibility contract of the button). An icon is provided by placing an icon element to the `icon` slot. ```html Label only Icon + Label SVG Icon + Label ``` ## Variants There are many button variants to choose from in Spectrum. The `variant` attribute defaults to `accent` but also accepts the following value: `accent`, `primary`, `secondary`, `negative`, `white`, and `black`. They display as follows: Accent ```html demo Label only Icon + Label ``` Primary ```html demo Label only Icon + Label ``` Secondary ```html demo Label only Icon + Label ``` Negative ```html demo Label only Icon + Label ``` Black ```html demo Label only Icon + Label ``` White ```html demo Label only Icon + Label ``` ### Treatment The `treatment` attribute accepts `fill` and `outline` as values, and defaults to `fill`. These display as follows: Fill ```html demo Primary, Fill Secondary, Fill Negative, Fill ``` Outline ```html demo Primary, Outline Secondary, Outline Negative, Outline ``` Outline, black ```html demo Label only Icon + Label ``` Outline, white ```html demo Label only Icon + Label ``` ## States In addition to the variant, `` elements support two different visual states, disabled and pending, which can be applied by adding the attribute `disabled` or `pending` respectively. All `` variants support these states. ### Disabled While disabled, `` elements will not respond to click events and will appear faded. ```html Normal Disabled ``` ### Pending While in pending state, `` elements will not respond to click events and will appear faded with an indeterminent ``. `` elements label and icon will be hidden while in pending state. Note: `pending` state of the `` element is applied after 1s delay to avoid flashing the pending state for quick actions. You can override the delay by adding custom css var `--pending-delay` to your css. ```html Normal Pending ``` ## Handling events Events handlers for clicks and other user actions can be registered on a `` as on a standard HTML `