## `<w-button>` API

Unless otherwise noted all properties are HTML attributes (as opposed to JavaScript object properties).

### Properties

| Name | Type | Default | Summary |
|-|-|-|-|
| autofocus | `boolean` | `false` | Focuses the button when it is first rendered. |
| button-class | `string \| undefined` | `-` | Deprecated class applied to the internal control. **Deprecated**: This class is applied inside the shadow DOM and is unlikely to have the desired effect. Use attributes or CSS variables to customize the appearance of the button. |
| command | `string \| undefined` | `-` | The [command HTML attribute](https://developer.mozilla.org/en-US/docs/Web/API/Invoker_Commands_API#html_attributes) for Invoker Commands. |
| commandfor | `string \| undefined` | `-` | The [commandfor HTML attribute](https://developer.mozilla.org/en-US/docs/Web/API/Invoker_Commands_API#html_attributes) for Invoker Commands. |
| disabled | `boolean` | `false` | Visually disables the button. |
| full-width | `boolean` | `false` | Makes the button fill its parent width. |
| href | `string \| undefined` | `-` | URL for rendering the button as a link. |
| icon-only | `boolean` | `false` | Marks the button as icon-only. |
| loading | `boolean` | `false` | Shows the loading state. |
| name | `string \| undefined` | `-` | Form control name. |
| quiet | `boolean` | `false` | Deprecated quiet visual treatment flag. **Deprecated**: Use `variant="quiet"` instead |
| rel | `string \| undefined` | `-` | Link relationship. |
| resetFormControl (JS only) | `resetFormControl() => void` | `-` | - |
| shadowRootOptions (JS only) | `object` | `{ ...LitElement.shadowRootOptions, delegatesFocus: true, }` | Shadow root configuration. |
| small | `boolean` | `false` | Renders the compact button size. |
| target | `string \| undefined` | `-` | Link browsing context. |
| type | [`ButtonType \| undefined`](#buttontype-undefined) | `-` | Native button type. |
| value | `string \| undefined` | `-` | Form control value. |
| variant | [`ButtonVariant \| undefined`](#buttonvariant-undefined) | `-` | Visual style of the button. |

### Property Details

#### autofocus

Focuses the button when it is first rendered.
Applies only when the component renders a native button. Link buttons with `href` do not autofocus through this component.

- Type: `boolean`
- Default: `false`

#### button-class

**Deprecated**: This class is applied inside the shadow DOM and is unlikely to have the desired effect. Use attributes or CSS variables to customize the appearance of the button.

Deprecated class applied to the internal control
This class is applied inside the shadow DOM and is unlikely to have the desired effect. Use attributes or CSS variables to customize the button appearance.

- Type: `string | undefined`
- Default: `-`

#### command

The [command HTML attribute](https://developer.mozilla.org/en-US/docs/Web/API/Invoker_Commands_API#html_attributes) for Invoker Commands.

- Type: `string | undefined`
- Default: `-`

#### commandfor

The [commandfor HTML attribute](https://developer.mozilla.org/en-US/docs/Web/API/Invoker_Commands_API#html_attributes) for Invoker Commands.

- Type: `string | undefined`
- Default: `-`

#### disabled

Visually disables the button.
Disabled buttons are discouraged because they can hide the reason an action is unavailable.

- Type: `boolean`
- Default: `false`

#### full-width

Makes the button fill its parent width.
Useful in narrow layouts where the button should span the available inline space.

- Type: `boolean`
- Default: `false`

#### href

URL for rendering the button as a link.
When set, the component renders `w-link` instead of a native `button`.

- Type: `string | undefined`
- Default: `-`

#### icon-only

Marks the button as icon-only.
Use this when the button has no visible text. Include accessible text in the slotted content so the internal button has a name.

- Type: `boolean`
- Default: `false`

#### loading

Shows the loading state.
Use after the user has triggered an action and the action is in progress.

- Type: `boolean`
- Default: `false`

#### name

Form control name.
Used when the button participates in form handling.

- Type: `string | undefined`
- Default: `-`

#### quiet

**Deprecated**: Use `variant="quiet"` instead

Deprecated quiet visual treatment flag
Use `variant="quiet"` instead.

- Type: `boolean`
- Default: `false`

#### rel

Link relationship.
Passed to the rendered link when `href` is set. If `target="_blank"` is set and `rel` is omitted, `noopener` is used.

- Type: `string | undefined`
- Default: `-`

#### resetFormControl (JS only)



- Type: `resetFormControl() => void`
- Default: `-`

#### shadowRootOptions (JS only)

Shadow root configuration.
Delegates focus from the host to the internal control.

- Type: `object`
- Default: `{ ...LitElement.shadowRootOptions, delegatesFocus: true, }`

#### small

Renders the compact button size.
Use this in dense layouts where the default button size is too large.

- Type: `boolean`
- Default: `false`

#### target

Link browsing context.
Passed to the rendered link when `href` is set.

- Type: `string | undefined`
- Default: `-`

#### type

Native button type.
Controls whether the internal button behaves as a regular button, submits a form, or resets a form. Defaults to `button`.

- Type: [`ButtonType | undefined`](#buttontype-undefined)
- Default: `-`

#### value

Form control value.
Used with `name` when the button participates in form handling. Resets to its initial value when the form is reset.

- Type: `string | undefined`
- Default: `-`

#### variant

Visual style of the button.
Defaults to `secondary`. Use the variant that matches the action priority, risk, and placement.

- Type: [`ButtonVariant | undefined`](#buttonvariant-undefined)
- Default: `-`

### Types

#### ButtonType | undefined

`'button' | 'submit' | 'reset' | undefined`

#### ButtonVariant | undefined

`'negative' | 'primary' | 'secondary' | 'negativeQuiet' | 'utility' | 'quiet' | 'utilityQuiet' | 'overlay' | 'overlayInverted' | 'overlayQuiet' | 'overlayInvertedQuiet' | 'pill' | 'link' | undefined`

