# Button

Triggers actions or events, such as submitting forms, opening dialogs, or navigating to other pages. Use Button to let users perform specific tasks or initiate interactions throughout the interface. Buttons can also function as links, guiding users to internal or external destinations.

```html
<s-button variant="secondary">Cancel</s-button>
<s-button variant="primary">Save</s-button>

```

## Properties

### ButtonElementProps

### accessibilityLabel

value: `string`

A label that describes the purpose or contents of the Button. It will be read to users using assistive technologies such as screen readers.

Use this when using only an icon or the button text is not enough context for users using assistive technologies.

### command

value: `'--auto' | '--show' | '--hide' | '--toggle' | '--copy'`

Sets the action the `commandFor` should take when this clickable is activated.

See the documentation of particular components for the actions they support.

- `--auto`: a default action for the target component.
- `--show`: shows the target component.
- `--hide`: hides the target component.
- `--toggle`: toggles the target component.
- `--copy`: copies the target ClipboardItem.

### commandFor

value: `string`

ID of a component that should respond to activations (e.g. clicks) on this component.

See `command` for how to control the behavior of the target.

### disabled

value: `boolean`

Disables the button, meaning it cannot be clicked or receive focus.

### href

value: `string`

The URL to link to.

- If set, it will navigate to the location specified by `href` after executing the `click` event.
- If a `commandFor` is set, the `command` will be executed instead of the navigation.

### id

value: `string`

A unique identifier for the element.

### inlineSize

value: `'auto' | 'fill' | 'fit-content'`

The displayed inline width of the button.

- `auto`: the size of the button depends on the surface and context.
- `fill`: the button will takes up 100% of the available inline size.
- `fit-content`: the button will take up the minimum inline-size required to fit its content.

### loading

value: `boolean`

Replaces content with a loading indicator while a background action is being performed.

This also disables the button.

### target

value: `'auto' | '_blank'`

Specifies where to display the linked URL.

### tone

value: `'auto' | 'neutral' | 'critical'`

Sets the tone of the Button, based on the intention of the information being conveyed.

### type

value: `'submit' | 'button'`

The behavior of the button.

- `submit`: Used to indicate the component acts as a submit button, meaning it submits the closest form.
- `button`: Used to indicate the component acts as a button, meaning it has no default action.
- `reset`: Used to indicate the component acts as a reset button, meaning it resets the closest form (returning fields to their default values).

This property is ignored if the component supports `href` or `commandFor`/`command` and one of them is set.

### variant

value: `'auto' | 'primary' | 'secondary'`

Changes the visual appearance of the Button.

## Events

### ButtonElementEvents

### click

value: `((event: CallbackEventListener<typeof tagName>) => void) | null`

  - CallbackEventListener: (EventListener & {
    (event: CallbackEvent<TTagName, TEvent>): void;
}) | null
  - CallbackEvent: TEvent & {
    currentTarget: HTMLElementTagNameMap[TTagName];
}
Callback when the button is activated. This will be called before the action indicated by `type`.