On this page
Examples
Basic Button
Variants
Sizes
Outline Buttons
Square Buttons
Circle Buttons
Text Buttons
Link Buttons
Setting a Custom Width
Prefix and Suffix Icons
Caret
Loading
Disabled
Styling Buttons
Importing
Slots
Properties
Events
Methods
Parts
Dependencies

Since Shoelace 2.0

Code stable

Pattern stable

Figma ready

Button

<sl-button> | SlButton

Buttons represent actions that are available to the user.

Examples

Basic Button

Button

<sl-button>Button</sl-button>

sl-button Button

import SlButton from '@teamshares/shoelace/dist/react/button';

const App = () => <SlButton>Button</SlButton>;

Variants

Use the variant attribute to set the button’s variant.

Default

Primary

Warning

Danger

<sl-button variant="default">Default</sl-button>
<sl-button variant="primary">Primary</sl-button>
<sl-button variant="warning">Warning</sl-button>
<sl-button variant="danger">Danger</sl-button>

sl-button variant="default" Default
sl-button variant="primary" Primary
sl-button variant="warning" Warning
sl-button variant="danger" Danger

import SlButton from '@teamshares/shoelace/dist/react/button';

const App = () => (
  <>
    <SlButton variant="default">Default</SlButton>
    <SlButton variant="primary">Primary</SlButton>
    <SlButton variant="warning">Warning</SlButton>
    <SlButton variant="danger">Danger</SlButton>
  </>
);

Sizes

Use the size attribute to change a button’s size.

Small

Medium

Large

Extra Large

<sl-button size="small">Small</sl-button>
<sl-button size="medium">Medium</sl-button>
<sl-button size="large">Large</sl-button>
<sl-button size="x-large">Extra Large</sl-button>

sl-button size="small" Small
sl-button size="medium" Medium
sl-button size="large" Large
sl-button size="x-large" Extra Large

import SlButton from '@teamshares/shoelace/dist/react/button';

const App = () => (
  <>
    <SlButton size="small">Small</SlButton>
    <SlButton size="medium">Medium</SlButton>
    <SlButton size="large">Large</SlButton>
    <SlButton size="x-large">Extra Large</SlButton>
  </>
);

Outline Buttons

Use the outline attribute to draw outlined buttons with transparent backgrounds.

Default

Primary

Warning

Danger

<sl-button variant="default" outline>Default</sl-button>
<sl-button variant="primary" outline>Primary</sl-button>
<sl-button variant="warning" outline>Warning</sl-button>
<sl-button variant="danger" outline>Danger</sl-button>

sl-button variant="default" outline="true" Default
sl-button variant="primary" outline="true" Primary
sl-button variant="warning" outline="true" Warning
sl-button variant="danger" outline="true" Danger

import SlButton from '@teamshares/shoelace/dist/react/button';

const App = () => (
  <>
    <SlButton variant="default" outline>
      Default
    </SlButton>
    <SlButton variant="primary" outline>
      Primary
    </SlButton>
    <SlButton variant="warning" outline>
      Warning
    </SlButton>
    <SlButton variant="danger" outline>
      Danger
    </SlButton>
  </>
);

Square Buttons

Use the square attribute to give buttons a rounded-rectangle shape.

Note: Square buttons are not the standard button pattern in our Design System, and there is no Figma component for this option. Please check with the design team before using this option.

Small

Medium

Large

Extra Large

<sl-button size="small" square>Small</sl-button>
<sl-button size="medium" square>Medium</sl-button>
<sl-button size="large" square>Large</sl-button>
<sl-button size="x-large" square>Extra Large</sl-button>

sl-button size="small" square="true" Small
sl-button size="medium" square="true" Medium
sl-button size="large" square="true" Large
sl-button size="x-large" square="true" Extra Large

import SlButton from '@teamshares/shoelace/dist/react/button';

const App = () => (
  <>
    <SlButton size="small" square>
      Small
    </SlButton>
    <SlButton size="medium" square>
      Medium
    </SlButton>
    <SlButton size="large" square>
      Large
    </SlButton>
    <SlButton size="x-large" square>
      Extra Large
    </SlButton>
  </>
);

Circle Buttons

Use the circle attribute to create circular icon buttons. When this attribute is set, the button expects a single <sl-icon> in the default slot.

<sl-button variant="default" size="small" circle>
  <sl-icon library="fa" name="fas-ellipsis-vertical" label="More options"></sl-icon>
</sl-button>

<sl-button variant="default" size="medium" circle>
  <sl-icon library="fa" name="fas-ellipsis-vertical" label="More options"></sl-icon>
</sl-button>

<sl-button variant="default" size="large" circle>
  <sl-icon library="fa" name="fas-ellipsis-vertical" label="More options"></sl-icon>
</sl-button>

<sl-button variant="default" size="x-large" circle>
  <sl-icon library="fa" name="fas-ellipsis-vertical" label="More options"></sl-icon>
</sl-button>

sl-button variant="default" size="small" circle="true"
  sl-icon library="fa" name="fas-ellipsis-vertical" label="More options"
sl-button variant="default" size="medium" circle="true"
  sl-icon library="fa" name="fas-ellipsis-vertical" label="More options"
sl-button variant="default" size="large" circle="true"
  sl-icon library="fa" name="fas-ellipsis-vertical" label="More options"
sl-button variant="default" size="x-large" circle="true"
  sl-icon library="fa" name="fas-ellipsis-vertical" label="More options"

import SlButton from '@teamshares/shoelace/dist/react/button';
import SlIcon from '@teamshares/shoelace/dist/react/icon';

const App = () => (
  <>
    <SlButton variant="default" size="small" circle>
      <SlIcon library="fa" name="fas-ellipsis-vertical" />
    </SlButton>
    <SlButton variant="default" size="medium" circle>
      <SlIcon library="fa" name="fas-ellipsis-vertical" />
    </SlButton>
    <SlButton variant="default" size="large" circle>
      <SlIcon library="fa" name="fas-ellipsis-vertical" />
    </SlButton>
    <SlButton variant="default" size="x-large" circle>
      <SlIcon library="fa" name="fas-ellipsis-vertical" />
    </SlButton>
  </>
);

Text Buttons

Use the text variant to create text buttons that share the same size as regular buttons but don’t have backgrounds or borders.

Text

<sl-button variant="text" size="small">Text</sl-button>
<sl-button variant="text" size="medium">Text</sl-button>
<sl-button variant="text" size="large">Text</sl-button>
<sl-button variant="text" size="x-large">Text</sl-button>

sl-button variant="text" size="small" Text
sl-button variant="text" size="medium" Text
sl-button variant="text" size="large" Text

import SlButton from '@teamshares/shoelace/dist/react/button';

const App = () => (
  <>
    <SlButton variant="text" size="small">
      Text
    </SlButton>
    <SlButton variant="text" size="medium">
      Text
    </SlButton>
    <SlButton variant="text" size="large">
      Text
    </SlButton>
  </>
);

Link Buttons

It’s often helpful to have a button that works like a link. This is possible by setting the href attribute, which will make the component render an <a> under the hood. This gives you all the default link behavior the browser provides (e.g. CMD/CTRL/SHIFT + CLICK) and exposes the target and download attributes.

Link

New Window

Download

Disabled

<sl-button href="https://example.com/">Link</sl-button>
<sl-button href="https://example.com/" target="_blank">New Window</sl-button>
<sl-button href="/assets/images/wordmark.svg" download="shoelace.svg">Download</sl-button>
<sl-button href="https://example.com/" disabled>Disabled</sl-button>

sl-button href="https://example.com/" Link
sl-button href="https://example.com/" target="_blank" New Window
sl-button href="/assets/images/wordmark.svg" download="shoelace.svg" Download
sl-button href="https://example.com/" disabled="true" Disabled

import SlButton from '@teamshares/shoelace/dist/react/button';

const App = () => (
  <>
    <SlButton href="https://example.com/">Link</SlButton>
    <SlButton href="https://example.com/" target="_blank">
      New Window
    </SlButton>
    <SlButton href="/assets/images/wordmark.svg" download="shoelace.svg">
      Download
    </SlButton>
    <SlButton href="https://example.com/" disabled>
      Disabled
    </SlButton>
  </>
);

When a target is set, the link will receive rel="noreferrer noopener" for security reasons.

Setting a Custom Width

As expected, buttons can be given a custom width by setting the width attribute. This is useful for making buttons span the full width of their container on smaller screens.

Small

Medium

Large

Extra Large

<sl-button variant="default" size="small" style="width: 100%; margin-bottom: 1rem;">Small</sl-button>
<sl-button variant="default" size="medium" style="width: 100%; margin-bottom: 1rem;">Medium</sl-button>
<sl-button variant="default" size="large" style="width: 100%; margin-bottom: 1rem;">Large</sl-button>
<sl-button variant="default" size="x-large" style="width: 100%;">Extra Large</sl-button>

sl-button variant="default" size="small" style="width: 100%; margin-bottom: 1rem;" Small
sl-button variant="default" size="medium" style="width: 100%; margin-bottom: 1rem;" Medium
sl-button variant="default" size="large" style="width: 100%; margin-bottom: 1rem;" Large
sl-button variant="default" size="x-large" style="width: 100%;" Extra Large

import SlButton from '@teamshares/shoelace/dist/react/button';

const App = () => (
  <>
    <SlButton variant="default" size="small" style={{ width: '100%', marginBottom: '1rem' }}>
      Small
    </SlButton>
    <SlButton variant="default" size="medium" style={{ width: '100%', marginBottom: '1rem' }}>
      Medium
    </SlButton>
    <SlButton variant="default" size="large" style={{ width: '100%', marginBottom: '1rem' }}>
      Large
    </SlButton>
    <SlButton variant="default" size="x-large" style={{ width: '100%' }}>
      Extra Large
    </SlButton>
  </>
);

Prefix and Suffix Icons

Use the prefix and suffix slots to add icons.

Edit

Settings

Open link

Edit

Settings

Open link

Edit

Settings

Open link

Edit

Settings

Open link

<sl-button variant="default" size="small">
  <sl-icon slot="prefix" library="fa" name="fas-pencil"></sl-icon>
  Edit
</sl-button>

<sl-button variant="default" size="small">
  <sl-icon slot="suffix" library="fa" name="fas-gear"></sl-icon>
  Settings
</sl-button>

<sl-button variant="default" size="small">
  <sl-icon slot="prefix" library="fa" name="fas-link-horizontal"></sl-icon>
  Open link
  <sl-icon slot="suffix" library="fa" name="fas-arrow-up-right-from-square"></sl-icon>
</sl-button>


<br /><br />

<sl-button variant="default">
  <sl-icon slot="prefix" library="fa" name="fas-pencil"></sl-icon>
  Edit
</sl-button>

<sl-button variant="default">
  <sl-icon slot="suffix" library="fa" name="fas-gear"></sl-icon>
  Settings
</sl-button>

<sl-button variant="default">
  <sl-icon slot="prefix" library="fa" name="fas-link-horizontal"></sl-icon>
  Open link
  <sl-icon slot="suffix" library="fa" name="fas-arrow-up-right-from-square"></sl-icon>
</sl-button>


<br /><br />

<sl-button variant="default" size="large">
  <sl-icon slot="prefix" library="fa" name="fas-pencil"></sl-icon>
  Edit
</sl-button>

<sl-button variant="default" size="large">
  <sl-icon slot="suffix" library="fa" name="fas-gear"></sl-icon>
  Settings
</sl-button>

<sl-button variant="default" size="large">
  <sl-icon slot="prefix" library="fa" name="fas-link-horizontal"></sl-icon>
  Open link
  <sl-icon slot="suffix" library="fa" name="fas-arrow-up-right-from-square"></sl-icon>
</sl-button>


<br /><br />

<sl-button variant="default" size="x-large">
  <sl-icon slot="prefix" library="fa" name="fas-pencil"></sl-icon>
 Edit
</sl-button>

<sl-button variant="default" size="x-large">
  <sl-icon slot="suffix" library="fa" name="fas-gear"></sl-icon>
  Settings
</sl-button>

<sl-button variant="default" size="x-large">
  <sl-icon slot="prefix" library="fa" name="fas-link-horizontal"></sl-icon>
  Open link
  <sl-icon slot="suffix" library="fa" name="fas-arrow-up-right-from-square"></sl-icon>
</sl-button>

sl-button variant="default" size="small"
  sl-icon slot="prefix" library="fa" name="fas-pencil"
  | Edit
sl-button variant="default" size="small"
  sl-icon slot="suffix" library="fa" name="fas-gear"
  | Settings
br
br
sl-button variant="default"
  sl-icon slot="prefix" library="fa" name="fas-pencil"
  | Edit
sl-button variant="default"
  sl-icon slot="suffix" library="fa" name="fas-gear"
  | Settings
br
br
sl-button variant="default" size="large"
  sl-icon slot="prefix" library="fa" name="fas-pencil"
  | Edit
sl-button variant="default" size="large"
  sl-icon slot="suffix" library="fa" name="fas-gear"
  | Settings
br
br
sl-button variant="default" size="x-large"
  sl-icon slot="prefix" library="fa" name="fas-pencil"
  | Edit
sl-button variant="default" size="x-large"
  sl-icon slot="suffix" library="fa" name="fas-gear"
  | Settings

import SlButton from '@teamshares/shoelace/dist/react/button';
import SlIcon from '@teamshares/shoelace/dist/react/icon';

const App = () => (
  <>
    <SlButton variant="default" size="small">
      <SlIcon slot="prefix" library="fa" name="fas-pencil"></SlIcon>
      Edit
    </SlButton>

    <SlButton variant="default" size="small">
      <SlIcon slot="suffix" library="fa" name="fas-gear"></SlIcon>
      Settings
    </SlButton>

    <br />
    <br />

    <SlButton variant="default">
      <SlIcon slot="prefix" library="fa" name="fas-pencil"></SlIcon>
      Edit
    </SlButton>

    <SlButton variant="default">
      <SlIcon slot="suffix" library="fa" name="fas-gear"></SlIcon>
      Settings
    </SlButton>

    <br />
    <br />

    <SlButton variant="default" size="large">
      <SlIcon slot="prefix" library="fa" name="fas-pencil"></SlIcon>
      Edit
    </SlButton>

    <SlButton variant="default" size="large">
      <SlIcon slot="suffix" library="fa" name="fas-gear"></SlIcon>
      Settings
    </SlButton>

    <br />
    <br />

    <SlButton variant="default" size="x-large">
      <SlIcon slot="prefix" library="fa" name="fas-pencil"></SlIcon>
      Edit
    </SlButton>

    <SlButton variant="default" size="x-large">
      <SlIcon slot="suffix" library="fa" name="fas-gear"></SlIcon>
      Settings
    </SlButton>

  </>
);

Caret

Use the caret attribute to add a dropdown indicator when a button will trigger a dropdown, menu, or popover.

Small

Medium

Large

Extra Large

<sl-button size="small" caret>Small</sl-button>
<sl-button size="medium" caret>Medium</sl-button>
<sl-button size="large" caret>Large</sl-button>
<sl-button size="x-large" caret>Extra Large</sl-button>

sl-button size="small" caret="true" Small
sl-button size="medium" caret="true" Medium
sl-button size="large" caret="true" Large
sl-button size="x-large" caret="true" Extra Large

import SlButton from '@teamshares/shoelace/dist/react/button';

const App = () => (
  <>
    <SlButton size="small" caret>
      Small
    </SlButton>
    <SlButton size="medium" caret>
      Medium
    </SlButton>
    <SlButton size="large" caret>
      Large
    </SlButton>
    <SlButton size="x-large" caret>
      Large
    </SlButton>
  </>
);

Loading

Use the loading attribute to make a button busy. The width will remain the same as before, preventing adjacent elements from moving around. Clicks will be suppressed until the loading state is removed.

Default

Primary

Warning

Danger

<sl-button variant="default" size="small" loading>Default</sl-button>
<sl-button variant="primary" size="medium" loading>Primary</sl-button>
<sl-button variant="warning" size="large" loading>Warning</sl-button>
<sl-button variant="danger" size="x-large" loading>Danger</sl-button>

sl-button variant="default" loading="true" Default
sl-button variant="primary" loading="true" Primary
sl-button variant="warning" loading="true" Warning
sl-button variant="danger" loading="true" Danger

import SlButton from '@teamshares/shoelace/dist/react/button';

const App = () => (
  <>
    <SlButton variant="default" loading>
      Default
    </SlButton>
    <SlButton variant="primary" loading>
      Primary
    </SlButton>
    <SlButton variant="warning" loading>
      Warning
    </SlButton>
    <SlButton variant="danger" loading>
      Danger
    </SlButton>
  </>
);

Disabled

Use the disabled attribute to disable a button.

Default

Primary

Warning

Danger

<sl-button variant="default" disabled>Default</sl-button>
<sl-button variant="primary" disabled>Primary</sl-button>
<sl-button variant="warning" disabled>Warning</sl-button>
<sl-button variant="danger" disabled>Danger</sl-button>

sl-button variant="default" disabled="true" Default
sl-button variant="primary" disabled="true" Primary
sl-button variant="warning" disabled="true" Warning
sl-button variant="danger" disabled="true" Danger

import SlButton from '@teamshares/shoelace/dist/react/button';

const App = () => (
  <>
    <SlButton variant="default" disabled>
      Default
    </SlButton>
    <SlButton variant="primary" disabled>
      Primary
    </SlButton>
    <SlButton variant="warning" disabled>
      Warning
    </SlButton>
    <SlButton variant="danger" disabled>
      Danger
    </SlButton>
  </>
);

Styling Buttons

This example demonstrates how to style buttons using a custom class. This is the recommended approach if you need to add additional variations. To customize an existing variation, modify the selector to target the button’s variant attribute instead of a class (e.g. sl-button[variant="primary"]).

Note: In general, you shouldn’t need to do this. If you are working on a design that requires custom styling, please ensure that there’s not a standard button in the design system that would work instead.

Pink Button

<sl-button class="pink">Pink Button</sl-button>

<style>
  sl-button.pink::part(base) {
    /* Set design tokens for height and border width */
    --sl-input-height-medium: 48px;
    --sl-input-border-width: 4px;

    border-radius: 0;
    background-color: #ff1493;
    border-top-color: #ff7ac1;
    border-left-color: #ff7ac1;
    border-bottom-color: #ad005c;
    border-right-color: #ad005c;
    color: white;
    font-size: 1.125rem;
    box-shadow: 0 2px 10px #0002;
    transition: var(--sl-transition-medium) transform ease, var(--sl-transition-medium) border ease;
  }

  sl-button.pink::part(base):hover {
    transform: scale(1.05) rotate(-1deg);
  }

  sl-button.pink::part(base):active {
    border-top-color: #ad005c;
    border-right-color: #ff7ac1;
    border-bottom-color: #ff7ac1;
    border-left-color: #ad005c;
    transform: scale(1.05) rotate(-1deg) translateY(2px);
  }

  sl-button.pink::part(base):focus-visible {
    outline: dashed 2px deeppink;
    outline-offset: 4px;
  }
</style>

sl-button.pink Pink Button

css:
  sl-button.pink::part(base) {
    /* Set design tokens for height and border width */
    --sl-input-height-medium: 48px;
    --sl-input-border-width: 4px;

    border-radius: 0;
    background-color: #ff1493;
    border-top-color: #ff7ac1;
    border-left-color: #ff7ac1;
    border-bottom-color: #ad005c;
    border-right-color: #ad005c;
    color: white;
    font-size: 1.125rem;
    box-shadow: 0 2px 10px #0002;
    transition: var(--sl-transition-medium) transform ease, var(--sl-transition-medium) border ease;
  }

  sl-button.pink::part(base):hover {
    transform: scale(1.05) rotate(-1deg);
  }

  sl-button.pink::part(base):active {
    border-top-color: #ad005c;
    border-right-color: #ff7ac1;
    border-bottom-color: #ff7ac1;
    border-left-color: #ad005c;
    transform: scale(1.05) rotate(-1deg) translateY(2px);
  }

  sl-button.pink::part(base):focus-visible {
    outline: dashed 2px deeppink;
    outline-offset: 4px;
  }

Importing

If you’re using the autoloader or the traditional loader, you can ignore this section. Otherwise, feel free to use any of the following snippets to cherry pick this component.

Script

Import

Bundler

React

To import this component from the CDN using a script tag:

<script type="module" src="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.1.0/cdn/components/button/button.js"></script>

To import this component from the CDN using a JavaScript import:

import 'https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.1.0/cdn/components/button/button.js';

To import this component using a bundler:

import '@shoelace-style/shoelace/dist/components/button/button.js';

To import this component as a React component:

import SlButton from '@shoelace-style/shoelace/dist/react/button';

Slots

Name	Description
(default)	The button’s label.
`prefix`	A presentational prefix icon or similar element.
`suffix`	A presentational suffix icon or similar element.

Learn more about using slots.

Properties

Note: The following appear as options in the Properties table but are currently not part of the Teamshares Design System. Please check with the design team before using these options:

Variants neutral, success
Boolean square

Scroll right to see the entire table

Name	Description	Type	Default
`variant`	The button’s theme variant.	`'default' \| 'primary' \| 'success' \| 'neutral' \| 'warning' \| 'danger' \| 'text'`	`'default'`
`size`	The button’s size.	`'small' \| 'medium' \| 'large' \| 'x-large'`	`'medium'`
`caret`	Draws the button with a caret. Used to indicate that the button triggers a dropdown menu or similar behavior.	`boolean`	`false`
`disabled`	Disables the button.	`boolean`	`false`
`loading`	Draws the button in a loading state.	`boolean`	`false`
`outline`	Draws an outlined button.	`boolean`	`false`
`square`	Draws a square button instead of the Teamshares default pill.	`boolean`	`false`
`circle`	Draws a circular icon button. When this attribute is present, the button expects a single `<sl-icon>` in the default slot.	`boolean`	`false`
`type`	The type of button. Note that the default value is `button` instead of `submit`, which is opposite of how native `<button>` elements behave. When the type is `submit`, the button will submit the surrounding form.	`'button' \| 'submit' \| 'reset'`	`'button'`
`name`	The name of the button, submitted as a name/value pair with form data, but only when this button is the submitter. This attribute is ignored when `href` is present.	`string`	`''`
`value`	The value of the button, submitted as a pair with the button’s name as part of the form data, but only when this button is the submitter. This attribute is ignored when `href` is present.	`string`	`''`
`href`	When set, the underlying button will be rendered as an `<a>` with this `href` instead of a `<button>`.	`string`	`''`
`target`	Tells the browser where to open the link. Only used when `href` is present.	`'_blank' \| '_parent' \| '_self' \| '_top'`	-
`rel`	When using `href`, this attribute will map to the underlying link’s `rel` attribute. Unlike regular links, the default is `noreferrer noopener` to prevent security exploits. However, if you’re using `target` to point to a specific tab/window, this will prevent that from working correctly. You can remove or change the default value by setting the attribute to an empty string or a value of your choice, respectively.	`string`	`'noreferrer noopener'`
`download`	Tells the browser to download the linked file as this filename. Only used when `href` is present.	`string \| undefined`	-
`form`	The “form owner” to associate the button with. If omitted, the closest containing form will be used instead. The value of this attribute must be an id of a form in the same document or shadow root as the button.	`string`	-
`formAction` `formaction`	Used to override the form owner’s `action` attribute.	`string`	-
`formEnctype` `formenctype`	Used to override the form owner’s `enctype` attribute.	`'application/x-www-form-urlencoded' \| 'multipart/form-data' \| 'text/plain'`	-
`formMethod` `formmethod`	Used to override the form owner’s `method` attribute.	`'post' \| 'get'`	-
`formNoValidate` `formnovalidate`	Used to override the form owner’s `novalidate` attribute.	`boolean`	-
`formTarget` `formtarget`	Used to override the form owner’s `target` attribute.	`'_self' \| '_blank' \| '_parent' \| '_top' \| string`	-
`validity`	Gets the validity state object	-	-
`validationMessage`	Gets the validation message	-	-
`updateComplete`	A read-only promise that resolves when the component has finished updating.

Learn more about attributes and properties.

Events

Name	React Event	Description	Event Detail
`sl-blur`	`onSlBlur`	Emitted when the button loses focus.	-
`sl-focus`	`onSlFocus`	Emitted when the button gains focus.	-
`sl-invalid`	`onSlInvalid`	Emitted when the form control has been checked for validity and its constraints aren’t satisfied.	-

Learn more about events.

Methods

Name	Description	Arguments
`click()`	Simulates a click on the button.	-
`focus()`	Sets focus on the button.	`options: FocusOptions`
`blur()`	Removes focus from the button.	-
`checkValidity()`	Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid.	-
`getForm()`	Gets the associated form, if one exists.	-
`reportValidity()`	Checks for validity and shows the browser’s validation message if the control is invalid.	-
`setCustomValidity()`	Sets a custom validation message. Pass an empty string to restore validity.	`message: string`

Learn more about methods.

Parts

Name	Description
`base`	The component’s base wrapper.
`prefix`	The container that wraps the prefix.
`label`	The button’s label.
`suffix`	The container that wraps the suffix.
`caret`	The button’s caret icon, an `<sl-icon>` element.
`spinner`	The spinner that shows when the button is in the loading state.

Learn more about customizing CSS parts.

Dependencies

This component automatically imports the following dependencies.

<sl-icon>
<sl-spinner>