## `` 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`