Button

Displays a button component that can be used to trigger actions like submitting forms or triggering JavaScript functions.

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

Usage

<sa-button>Proceed</button>

Examples

Size

Specify the size using the size attribute.

<sa-button size="Small" variant="Outline">Small</sa-button>
<sa-button variant="Outline">Default</sa-button>
<sa-button size="Large" variant="Outline">Large</sa-button>
<sa-button size="IconSmall" variant="Outline">
    <sa-icon name="archive"/>
</sa-button>
<sa-button size="Icon" variant="Outline">
    <sa-icon name="archive"/>
</sa-button>
<sa-button size="IconLarge" variant="Outline">
    <sa-icon name="archive"/>
</sa-button>

Variant

Specify the variant using the variant attribute.

<sa-button>Default</sa-button>
<sa-button variant="Outline">Outline</sa-button>
<sa-button variant="Destructive">Destructive</sa-button>
<sa-button variant="Ghost">Ghost</sa-button>
<sa-button variant="Link">Link</sa-button>

Icons

Add an icon to a button using the <sa-icon> Tag Helper.

<sa-button variant="Outline">
    <sa-icon name="tickets-plane"/>
    Booking Confirmation
</sa-button>
<sa-button variant="Destructive" size="Icon">
    <sa-icon name="trash" />
</sa-button>

Spinner

Indicate that the system is busy with a spinner.

<sa-button disabled>
    <sa-spinner />
    Saving Changes
</sa-button>

Additional attributes

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

<sa-button variant="Outline" onclick="alert('Hello')">
    Display Alert
</sa-button>
<sa-button variant="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>