Button

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

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

Usage

<dui-button>Proceed</button>

Examples

Sizes and Variants

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

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

Icon Right

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

Icon Left

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

Icon Only

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

Spinner

Indicate that the system is busy with a spinner.

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

Invalid States

Indicate an invalid state using the aria-invalid attribute.

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

Additional attributes

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

<dui-button variant="ButtonVariant.Outline" onclick="alert('Hello')">
    Display Alert
</dui-button>
<dui-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?')"
>
    <dui-icon name="trash"/>
    Delete
</dui-button>

Tabs

Previous Page

Button Group

Next Page

On this page

UsageExamplesSizes and VariantsIcon RightIcon LeftIcon OnlySpinnerInvalid StatesAdditional attributes