Button

A sl-button component is an interactive element that performs a programmable action when activated.

This component reflects and extends the behavior of the standard button element.

Button

<sl-button>Button</sl-button>
<sl-button>
  <sl-icon name="paper-airplane"/>
</sl-button>

Modifiers

Adding those boolean attributes allows to modify the button styling.

Size defaults to medium.

DefaultPrimaryOutlineDangerBorderlessLink

Variants

SmallMediumLarge

Sizes

Block

Block

<!-- Variants -->
<sl-button>Default</sl-button>
<sl-button primary>Primary</sl-button>
<sl-button outline>Outline</sl-button>
<sl-button danger>Danger</sl-button>
<sl-button borderless>Borderless</sl-button>
<!-- Size -->
<sl-button small>Small</sl-button>
<sl-button medium>Medium</sl-button>
<sl-button large>Large</sl-button>
<!-- Block -->
<sl-button block>Block</sl-button>

Attributes

Type

Modifies the button behavior, defaults to button.

When the button is inside a <form> element, use type="submit" in order to submit the form.

ButtonSubmit

<sl-button type="button">Button</sl-button>
<sl-form>
  <sl-button type="submit">Submit</sl-button>
</sl-form>

Tooltip

Adds extra information about the element, displayed as a tooltip when being hovered.

Hover me!

<sl-button tooltip="Great Tooltip">Hover me!</sl-button>

Disabled

Makes the button non-interactable.

Disabled

<sl-button disabled>Disabled</sl-button>

Events

Click

Triggered when the user clicks on the element.

Click me!

<sl-button type="button">Click me!</sl-button>