Button

A versatile button component with multiple variants, sizes, and navigation support.

Default

Variants

The button component supports multiple visual variants for different contexts.

Variants

    <.button variant="primary">Primary</.button>
<.button variant="secondary">Secondary</.button>
<.button variant="destructive">Destructive</.button>
<.button variant="outline">Outline</.button>
<.button variant="ghost">Ghost</.button>
<.button variant="link">Link</.button>
  

Sizes

Buttons come in different sizes to fit various UI contexts.

Sizes

    <.button size="sm">Small</.button>
<.button size="default">Default</.button>
<.button size="lg">Large</.button>
<.button size="icon" aria-label="Settings">
  <.icon name="lucide-settings" class="size-4" />
</.button>
  

With Icon

Add icons to buttons for better visual communication.

With Icon

    <.button>
  <.icon name="lucide-mail" class="mr-2 size-4" /> Login with Email
</.button>
<.button variant="outline">
  <.icon name="lucide-download" class="mr-2 size-4" /> Download
</.button>
  

Loading State

Show a loading state while an action is being processed.

As Link

Buttons can render as links using the navigate, patch, or href props.

As Link

Navigate External Link

Notes

When using size="icon", always provide an aria-label for accessibility.
The loading state automatically sets aria-busy="true" and disables the button.
Use navigate for LiveView navigation, patch for same-LiveView updates, and href for external links.