Button

Trigger an action, such as submitting a form or running JavaScript

Theme
<sa-button variant="ButtonVariant.Outline">
    <sa-icon name="undo-2"/>
    Cancel Changes
</sa-button>
<sa-button>Save Changes</sa-button>

Usage

Wrap the label in an <sa-button>. It renders a native <button>, so type, form and the other button attributes work as usual.

<sa-button>Proceed</sa-button>

Examples

Sizes and variants

Specify the size and variant using the size and variant attribute.

Theme
<div class="flex flex-wrap items-center gap-2">
    <sa-button size="ButtonSize.ExtraSmall">Default</sa-button>
    <sa-button size="ButtonSize.ExtraSmall" variant="ButtonVariant.Secondary">
        Secondary
    </sa-button>
    <sa-button size="ButtonSize.ExtraSmall" variant="ButtonVariant.Outline">
        Outline
    </sa-button>
    <sa-button size="ButtonSize.ExtraSmall" variant="ButtonVariant.Ghost">
        Ghost
    </sa-button>
    <sa-button size="ButtonSize.ExtraSmall" variant="ButtonVariant.Destructive">
        Destructive
    </sa-button>
    <sa-button size="ButtonSize.ExtraSmall" variant="ButtonVariant.Link">
        Link
    </sa-button>
</div>
<div class="flex flex-wrap items-center gap-2">
    <sa-button size="ButtonSize.Small">Default</sa-button>
    <sa-button size="ButtonSize.Small" variant="ButtonVariant.Secondary">
        Secondary
    </sa-button>
    <sa-button size="ButtonSize.Small" variant="ButtonVariant.Outline">
        Outline
    </sa-button>
    <sa-button size="ButtonSize.Small" variant="ButtonVariant.Ghost">
        Ghost
    </sa-button>
    <sa-button size="ButtonSize.Small" variant="ButtonVariant.Destructive">
        Destructive
    </sa-button>
    <sa-button size="ButtonSize.Small" variant="ButtonVariant.Link">
        Link
    </sa-button>
</div>
<div class="flex flex-wrap items-center gap-2">
    <sa-button>Default</sa-button>
    <sa-button variant="ButtonVariant.Secondary">Secondary</sa-button>
    <sa-button variant="ButtonVariant.Outline">Outline</sa-button>
    <sa-button variant="ButtonVariant.Ghost">Ghost</sa-button>
    <sa-button variant="ButtonVariant.Destructive">Destructive</sa-button>
    <sa-button variant="ButtonVariant.Link">Link</sa-button>
</div>
<div class="flex flex-wrap items-center gap-2">
    <sa-button size="ButtonSize.Large">Default</sa-button>
    <sa-button size="ButtonSize.Large" variant="ButtonVariant.Secondary">
        Secondary
    </sa-button>
    <sa-button size="ButtonSize.Large" variant="ButtonVariant.Outline">
        Outline
    </sa-button>
    <sa-button size="ButtonSize.Large" variant="ButtonVariant.Ghost">
        Ghost
    </sa-button>
    <sa-button size="ButtonSize.Large" variant="ButtonVariant.Destructive">
        Destructive
    </sa-button>
    <sa-button size="ButtonSize.Large" variant="ButtonVariant.Link">
        Link
    </sa-button>
</div>

Icon right

Place an <sa-icon> after the label to show it on the right.

Theme
<div class="flex flex-wrap items-center gap-2">
  <sa-button size="ButtonSize.ExtraSmall">
    Default
    <sa-icon name="arrow-right"/>
  </sa-button>
  <sa-button size="ButtonSize.ExtraSmall" variant="ButtonVariant.Secondary">
    Secondary
    <sa-icon name="arrow-right"/>
  </sa-button>
  <sa-button size="ButtonSize.ExtraSmall" variant="ButtonVariant.Outline">
    Outline
    <sa-icon name="arrow-right"/>
  </sa-button>
  <sa-button size="ButtonSize.ExtraSmall" variant="ButtonVariant.Ghost">
    Ghost
    <sa-icon name="arrow-right"/>
  </sa-button>
  <sa-button size="ButtonSize.ExtraSmall" variant="ButtonVariant.Destructive">
    Destructive
    <sa-icon name="arrow-right"/>
  </sa-button>
  <sa-button size="ButtonSize.ExtraSmall" variant="ButtonVariant.Link">
    Link
    <sa-icon name="arrow-right"/>
  </sa-button>
</div>
<div class="flex flex-wrap items-center gap-2">
  <sa-button size="ButtonSize.Small">
    Default
    <sa-icon name="arrow-right"/>
  </sa-button>
  <sa-button size="ButtonSize.Small" variant="ButtonVariant.Secondary">
    Secondary
    <sa-icon name="arrow-right"/>
  </sa-button>
  <sa-button size="ButtonSize.Small" variant="ButtonVariant.Outline">
    Outline
    <sa-icon name="arrow-right"/>
  </sa-button>
  <sa-button size="ButtonSize.Small" variant="ButtonVariant.Ghost">
    Ghost
    <sa-icon name="arrow-right"/>
  </sa-button>
  <sa-button size="ButtonSize.Small" variant="ButtonVariant.Destructive">
    Destructive
    <sa-icon name="arrow-right"/>
  </sa-button>
  <sa-button size="ButtonSize.Small" variant="ButtonVariant.Link">
    Link
    <sa-icon name="arrow-right"/>
  </sa-button>
</div>
<div class="flex flex-wrap items-center gap-2">
  <sa-button>
    Default
    <sa-icon name="arrow-right"/>
  </sa-button>
  <sa-button variant="ButtonVariant.Secondary">
    Secondary
    <sa-icon name="arrow-right"/>
  </sa-button>
  <sa-button variant="ButtonVariant.Outline">
    Outline
    <sa-icon name="arrow-right"/>
  </sa-button>
  <sa-button variant="ButtonVariant.Ghost">
    Ghost
    <sa-icon name="arrow-right"/>
  </sa-button>
  <sa-button variant="ButtonVariant.Destructive">
    Destructive
    <sa-icon name="arrow-right"/>
  </sa-button>
  <sa-button variant="ButtonVariant.Link">
    Link
    <sa-icon name="arrow-right"/>
  </sa-button>
</div>
<div class="flex flex-wrap items-center gap-2">
  <sa-button size="ButtonSize.Large">
    Default
    <sa-icon name="arrow-right"/>
  </sa-button>
  <sa-button size="ButtonSize.Large" variant="ButtonVariant.Secondary">
    Secondary
    <sa-icon name="arrow-right"/>
  </sa-button>
  <sa-button size="ButtonSize.Large" variant="ButtonVariant.Outline">
    Outline
    <sa-icon name="arrow-right"/>
  </sa-button>
  <sa-button size="ButtonSize.Large" variant="ButtonVariant.Ghost">
    Ghost
    <sa-icon name="arrow-right"/>
  </sa-button>
  <sa-button size="ButtonSize.Large" variant="ButtonVariant.Destructive">
    Destructive
    <sa-icon name="arrow-right"/>
  </sa-button>
  <sa-button size="ButtonSize.Large" variant="ButtonVariant.Link">
    Link
    <sa-icon name="arrow-right"/>
  </sa-button>
</div>

Icon left

Place the <sa-icon> before the label to show it on the left.

Theme
<div class="flex flex-wrap items-center gap-2">
  <sa-button size="ButtonSize.ExtraSmall">
    <sa-icon name="circle-arrow-left"/>
    Default
  </sa-button>
  <sa-button size="ButtonSize.ExtraSmall" variant="ButtonVariant.Secondary">
    <sa-icon name="circle-arrow-left"/>
    Secondary
  </sa-button>
  <sa-button size="ButtonSize.ExtraSmall" variant="ButtonVariant.Outline">
    <sa-icon name="circle-arrow-left"/>
    Outline
  </sa-button>
  <sa-button size="ButtonSize.ExtraSmall" variant="ButtonVariant.Ghost">
    <sa-icon name="circle-arrow-left"/>
    Ghost
  </sa-button>
  <sa-button size="ButtonSize.ExtraSmall" variant="ButtonVariant.Destructive">
    <sa-icon name="circle-arrow-left"/>
    Destructive
  </sa-button>
  <sa-button size="ButtonSize.ExtraSmall" variant="ButtonVariant.Link">
    <sa-icon name="circle-arrow-left"/>
    Link
  </sa-button>
</div>
<div class="flex flex-wrap items-center gap-2">
  <sa-button size="ButtonSize.Small">
    <sa-icon name="circle-arrow-left"/>
    Default
  </sa-button>
  <sa-button size="ButtonSize.Small" variant="ButtonVariant.Secondary">
    <sa-icon name="circle-arrow-left"/>
    Secondary
  </sa-button>
  <sa-button size="ButtonSize.Small" variant="ButtonVariant.Outline">
    <sa-icon name="circle-arrow-left"/>
    Outline
  </sa-button>
  <sa-button size="ButtonSize.Small" variant="ButtonVariant.Ghost">
    <sa-icon name="circle-arrow-left"/>
    Ghost
  </sa-button>
  <sa-button size="ButtonSize.Small" variant="ButtonVariant.Destructive">
    <sa-icon name="circle-arrow-left"/>
    Destructive
  </sa-button>
  <sa-button size="ButtonSize.Small" variant="ButtonVariant.Link">
    <sa-icon name="circle-arrow-left"/>
    Link
  </sa-button>
</div>
<div class="flex flex-wrap items-center gap-2">
  <sa-button>
    <sa-icon name="circle-arrow-left"/>
    Default
  </sa-button>
  <sa-button variant="ButtonVariant.Secondary">
    <sa-icon name="circle-arrow-left"/>
    Secondary
  </sa-button>
  <sa-button variant="ButtonVariant.Outline">
    <sa-icon name="circle-arrow-left"/>
    Outline
  </sa-button>
  <sa-button variant="ButtonVariant.Ghost">
    <sa-icon name="circle-arrow-left"/>
    Ghost
  </sa-button>
  <sa-button variant="ButtonVariant.Destructive">
    <sa-icon name="circle-arrow-left"/>
    Destructive
  </sa-button>
  <sa-button variant="ButtonVariant.Link">
    <sa-icon name="circle-arrow-left"/>
    Link
  </sa-button>
</div>
<div class="flex flex-wrap items-center gap-2">
  <sa-button size="ButtonSize.Large">
    <sa-icon name="circle-arrow-left"/>
    Default
  </sa-button>
  <sa-button size="ButtonSize.Large" variant="ButtonVariant.Secondary">
    <sa-icon name="circle-arrow-left"/>
    Secondary
  </sa-button>
  <sa-button size="ButtonSize.Large" variant="ButtonVariant.Outline">
    <sa-icon name="circle-arrow-left"/>
    Outline
  </sa-button>
  <sa-button size="ButtonSize.Large" variant="ButtonVariant.Ghost">
    <sa-icon name="circle-arrow-left"/>
    Ghost
  </sa-button>
  <sa-button size="ButtonSize.Large" variant="ButtonVariant.Destructive">
    <sa-icon name="circle-arrow-left"/>
    Destructive
  </sa-button>
  <sa-button size="ButtonSize.Large" variant="ButtonVariant.Link">
    <sa-icon name="circle-arrow-left"/>
    Link
  </sa-button>
</div>

Icon only

Use one of the Icon* sizes for a square icon-only button, and give it an accessible name with aria-label or visually hidden text.

Theme
<div class="flex flex-wrap items-center gap-2">
  <sa-button size="ButtonSize.IconExtraSmall" aria-label="Next">
    <sa-icon name="arrow-right"/>
  </sa-button>
  <sa-button size="ButtonSize.IconExtraSmall" variant="ButtonVariant.Secondary" aria-label="Next">
    <sa-icon name="arrow-right"/>
  </sa-button>
  <sa-button size="ButtonSize.IconExtraSmall" variant="ButtonVariant.Outline" aria-label="Next">
    <sa-icon name="arrow-right"/>
  </sa-button>
  <sa-button size="ButtonSize.IconExtraSmall" variant="ButtonVariant.Ghost" aria-label="Next">
    <sa-icon name="arrow-right"/>
  </sa-button>
  <sa-button size="ButtonSize.IconExtraSmall" variant="ButtonVariant.Destructive" aria-label="Next">
    <sa-icon name="arrow-right"/>
  </sa-button>
  <sa-button size="ButtonSize.IconExtraSmall" variant="ButtonVariant.Link" aria-label="Next">
    <sa-icon name="arrow-right"/>
  </sa-button>
</div>
<div class="flex flex-wrap items-center gap-2">
  <sa-button size="ButtonSize.IconSmall" aria-label="Next">
    <sa-icon name="arrow-right"/>
  </sa-button>
  <sa-button size="ButtonSize.IconSmall" variant="ButtonVariant.Secondary" aria-label="Next">
    <sa-icon name="arrow-right"/>
  </sa-button>
  <sa-button size="ButtonSize.IconSmall" variant="ButtonVariant.Outline" aria-label="Next">
    <sa-icon name="arrow-right"/>
  </sa-button>
  <sa-button size="ButtonSize.IconSmall" variant="ButtonVariant.Ghost" aria-label="Next">
    <sa-icon name="arrow-right"/>
  </sa-button>
  <sa-button size="ButtonSize.IconSmall" variant="ButtonVariant.Destructive" aria-label="Next">
    <sa-icon name="arrow-right"/>
  </sa-button>
  <sa-button size="ButtonSize.IconSmall" variant="ButtonVariant.Link" aria-label="Next">
    <sa-icon name="arrow-right"/>
  </sa-button>
</div>
<div class="flex flex-wrap items-center gap-2">
  <sa-button size="ButtonSize.Icon" aria-label="Next">
    <sa-icon name="arrow-right"/>
  </sa-button>
  <sa-button size="ButtonSize.Icon" variant="ButtonVariant.Secondary" aria-label="Next">
    <sa-icon name="arrow-right"/>
  </sa-button>
  <sa-button size="ButtonSize.Icon" variant="ButtonVariant.Outline" aria-label="Next">
    <sa-icon name="arrow-right"/>
  </sa-button>
  <sa-button size="ButtonSize.Icon" variant="ButtonVariant.Ghost" aria-label="Next">
    <sa-icon name="arrow-right"/>
  </sa-button>
  <sa-button size="ButtonSize.Icon" variant="ButtonVariant.Destructive" aria-label="Next">
    <sa-icon name="arrow-right"/>
  </sa-button>
  <sa-button size="ButtonSize.Icon" variant="ButtonVariant.Link" aria-label="Next">
    <sa-icon name="arrow-right"/>
  </sa-button>
</div>
<div class="flex flex-wrap items-center gap-2">
  <sa-button size="ButtonSize.IconLarge" aria-label="Next">
    <sa-icon name="arrow-right"/>
  </sa-button>
  <sa-button size="ButtonSize.IconLarge" variant="ButtonVariant.Secondary" aria-label="Next">
    <sa-icon name="arrow-right"/>
  </sa-button>
  <sa-button size="ButtonSize.IconLarge" variant="ButtonVariant.Outline" aria-label="Next">
    <sa-icon name="arrow-right"/>
  </sa-button>
  <sa-button size="ButtonSize.IconLarge" variant="ButtonVariant.Ghost" aria-label="Next">
    <sa-icon name="arrow-right"/>
  </sa-button>
  <sa-button size="ButtonSize.IconLarge" variant="ButtonVariant.Destructive" aria-label="Next">
    <sa-icon name="arrow-right"/>
  </sa-button>
  <sa-button size="ButtonSize.IconLarge" variant="ButtonVariant.Link" aria-label="Next">
    <sa-icon name="arrow-right"/>
  </sa-button>
</div>

Spinner

Indicate that the system is busy with a spinner.

Theme
<div class="flex flex-wrap items-center gap-2">
  <sa-button size="ButtonSize.ExtraSmall" disabled>
    <sa-spinner/>
    Default
  </sa-button>
  <sa-button size="ButtonSize.ExtraSmall" variant="ButtonVariant.Secondary" disabled>
    <sa-spinner/>
    Secondary
  </sa-button>
  <sa-button size="ButtonSize.ExtraSmall" variant="ButtonVariant.Outline" disabled>
    <sa-spinner/>
    Outline
  </sa-button>
  <sa-button size="ButtonSize.ExtraSmall" variant="ButtonVariant.Ghost" disabled>
    <sa-spinner/>
    Ghost
  </sa-button>
  <sa-button size="ButtonSize.ExtraSmall" variant="ButtonVariant.Destructive" disabled>
    <sa-spinner/>
    Destructive
  </sa-button>
  <sa-button size="ButtonSize.ExtraSmall" variant="ButtonVariant.Link" disabled>
    <sa-spinner/>
    Link
  </sa-button>
</div>
<div class="flex flex-wrap items-center gap-2">
  <sa-button size="ButtonSize.Small" disabled>
    <sa-spinner/>
    Default
  </sa-button>
  <sa-button size="ButtonSize.Small" variant="ButtonVariant.Secondary" disabled>
    <sa-spinner/>
    Secondary
  </sa-button>
  <sa-button size="ButtonSize.Small" variant="ButtonVariant.Outline" disabled>
    <sa-spinner/>
    Outline
  </sa-button>
  <sa-button size="ButtonSize.Small" variant="ButtonVariant.Ghost" disabled>
    <sa-spinner/>
    Ghost
  </sa-button>
  <sa-button size="ButtonSize.Small" variant="ButtonVariant.Destructive" disabled>
    <sa-spinner/>
    Destructive
  </sa-button>
  <sa-button size="ButtonSize.Small" variant="ButtonVariant.Link" disabled>
    <sa-spinner/>
    Link
  </sa-button>
</div>
<div class="flex flex-wrap items-center gap-2">
  <sa-button disabled>
    <sa-spinner/>
    Default
  </sa-button>
  <sa-button variant="ButtonVariant.Secondary" disabled>
    <sa-spinner/>
    Secondary
  </sa-button>
  <sa-button variant="ButtonVariant.Outline" disabled>
    <sa-spinner/>
    Outline
  </sa-button>
  <sa-button variant="ButtonVariant.Ghost" disabled>
    <sa-spinner/>
    Ghost
  </sa-button>
  <sa-button variant="ButtonVariant.Destructive" disabled>
    <sa-spinner/>
    Destructive
  </sa-button>
  <sa-button variant="ButtonVariant.Link" disabled>
    <sa-spinner/>
    Link
  </sa-button>
</div>
<div class="flex flex-wrap items-center gap-2">
  <sa-button size="ButtonSize.Large" disabled>
    <sa-spinner/>
    Default
  </sa-button>
  <sa-button size="ButtonSize.Large" variant="ButtonVariant.Secondary" disabled>
    <sa-spinner/>
    Secondary
  </sa-button>
  <sa-button size="ButtonSize.Large" variant="ButtonVariant.Outline" disabled>
    <sa-spinner/>
    Outline
  </sa-button>
  <sa-button size="ButtonSize.Large" variant="ButtonVariant.Ghost" disabled>
    <sa-spinner/>
    Ghost
  </sa-button>
  <sa-button size="ButtonSize.Large" variant="ButtonVariant.Destructive" disabled>
    <sa-spinner/>
    Destructive
  </sa-button>
  <sa-button size="ButtonSize.Large" variant="ButtonVariant.Link" disabled>
    <sa-spinner/>
    Link
  </sa-button>
</div>

Invalid states

Indicate an invalid state using the aria-invalid attribute.

Theme
<div class="flex flex-wrap items-center gap-2">
    <sa-button size="ButtonSize.ExtraSmall" aria-invalid="true">Default</sa-button>
    <sa-button size="ButtonSize.ExtraSmall" variant="ButtonVariant.Secondary" aria-invalid="true">
        Secondary
    </sa-button>
    <sa-button size="ButtonSize.ExtraSmall" variant="ButtonVariant.Outline" aria-invalid="true">
        Outline
    </sa-button>
    <sa-button size="ButtonSize.ExtraSmall" variant="ButtonVariant.Ghost" aria-invalid="true">
        Ghost
    </sa-button>
    <sa-button size="ButtonSize.ExtraSmall" variant="ButtonVariant.Destructive" aria-invalid="true">
        Destructive
    </sa-button>
    <sa-button size="ButtonSize.ExtraSmall" variant="ButtonVariant.Link" aria-invalid="true">
        Link
    </sa-button>
</div>
<div class="flex flex-wrap items-center gap-2">
    <sa-button size="ButtonSize.Small" aria-invalid="true">Default</sa-button>
    <sa-button size="ButtonSize.Small" variant="ButtonVariant.Secondary" aria-invalid="true">
        Secondary
    </sa-button>
    <sa-button size="ButtonSize.Small" variant="ButtonVariant.Outline" aria-invalid="true">
        Outline
    </sa-button>
    <sa-button size="ButtonSize.Small" variant="ButtonVariant.Ghost" aria-invalid="true">
        Ghost
    </sa-button>
    <sa-button size="ButtonSize.Small" variant="ButtonVariant.Destructive" aria-invalid="true">
        Destructive
    </sa-button>
    <sa-button size="ButtonSize.Small" variant="ButtonVariant.Link" aria-invalid="true">
        Link
    </sa-button>
</div>
<div class="flex flex-wrap items-center gap-2">
    <sa-button aria-invalid="true">Default</sa-button>
    <sa-button variant="ButtonVariant.Secondary" aria-invalid="true">Secondary</sa-button>
    <sa-button variant="ButtonVariant.Outline" aria-invalid="true">Outline</sa-button>
    <sa-button variant="ButtonVariant.Ghost" aria-invalid="true">Ghost</sa-button>
    <sa-button variant="ButtonVariant.Destructive" aria-invalid="true">Destructive</sa-button>
    <sa-button variant="ButtonVariant.Link" aria-invalid="true">Link</sa-button>
</div>
<div class="flex flex-wrap items-center gap-2">
    <sa-button size="ButtonSize.Large" aria-invalid="true">Default</sa-button>
    <sa-button size="ButtonSize.Large" variant="ButtonVariant.Secondary" aria-invalid="true">
        Secondary
    </sa-button>
    <sa-button size="ButtonSize.Large" variant="ButtonVariant.Outline" aria-invalid="true">
        Outline
    </sa-button>
    <sa-button size="ButtonSize.Large" variant="ButtonVariant.Ghost" aria-invalid="true">
        Ghost
    </sa-button>
    <sa-button size="ButtonSize.Large" variant="ButtonVariant.Destructive" aria-invalid="true">
        Destructive
    </sa-button>
    <sa-button size="ButtonSize.Large" variant="ButtonVariant.Link" aria-invalid="true">
        Link
    </sa-button>
</div>

Additional attributes

Since <sa-button> is a wrapper around the HTML Button (<button>) element, you can use any of the Button element attributes.

Theme
<sa-button variant="ButtonVariant.Outline" onclick="alert('Hello')">
    Display Alert
</sa-button>
<sa-button variant="ButtonVariant.Outline"
           class="bg-linear-to-r from-orange-500 to-red-500 hover:from-red-500 hover:to-orange-500 border-red-500 border-2 text-white/90 hover:text-white"
           onclick="confirm('Are you sure?')"
>
    <sa-icon name="trash"/>
    Delete
</sa-button>

Accessibility

<sa-button> renders a native <button> element, so focus and keyboard activation with Enter and Space are the browser's own. Add disabled to disable it.

An icon-only button has no accessible name. Give it one with aria-label, or add the text in a <span class="sr-only">. The Tag Helper does not set a type, so a button inside a form submits the form unless you set type="button".

API Reference

<sa-button>

Renders a <button> element.

Prop

Type

Toggle Group

A set of two-state buttons that can be toggled on or off

Button Group

Group related buttons together into a single section

On this page

UsageExamplesSizes and variantsIcon rightIcon leftIcon onlySpinnerInvalid statesAdditional attributesAccessibilityAPI Reference<sa-button>