SutraUI.Button (Sutra UI v0.3.0)

View Source

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

Buttons are the primary interactive element for triggering actions. They can render as <button>, <a>, or Phoenix LiveView navigation links depending on the props.

Examples

# Basic button
<.button>Click me</.button>

# With variant and size
<.button variant="destructive" size="lg">Delete Account</.button>

# Navigation button
<.button navigate={~p"/dashboard"}>Go to Dashboard</.button>

# Icon button (requires aria-label)
<.button size="icon" aria-label="Settings">
  <!-- Your icon here -->
</.button>

# Loading state
<.button loading phx-click="save">
  <.spinner class="mr-2" /> Saving...
</.button>

Variants

VariantUsageAppearance
primaryMain actionsSolid background
secondarySecondary actionsMuted background
destructiveDelete, removeRed/danger color
outlineLess emphasisBorder only
ghostMinimalTransparent until hover
linkInline actionsUnderlined text

Sizes

SizeUsageHeight
defaultMost buttons40px
smCompact UI32px
lgHero sections48px
iconIcon-only40px square

Navigation

The button automatically renders as a link when navigation props are provided:

  • navigate - Full page navigation (new LiveView)
  • patch - Same LiveView navigation
  • href - Regular link or external URL

Accessibility

  • Uses semantic <button> element (or <a> for links)
  • Loading state sets aria-busy="true"
  • Disabled state uses native disabled attribute
  • Icon-only buttons must have aria-label

Icon Buttons Need Labels

When using size="icon", always provide an aria-label for screen readers:

<.button size="icon" aria-label="Close dialog">
  <!-- Your icon here -->
</.button>

Summary

Functions

button(assigns)

Renders a button component.

Functions

button(assigns)

Renders a button component.

Attributes

  • variant - Visual style. One of primary, secondary, destructive, outline, ghost, link. Defaults to primary.
  • size - Size variant. One of default, sm, lg, icon. Defaults to default.
  • type - Button type. One of button, submit, reset. Defaults to button.
  • loading - Shows loading state and disables button. Defaults to false.
  • disabled - Disables the button. Defaults to false.
  • navigate - LiveView navigate path.
  • patch - LiveView patch path.
  • href - Regular link URL.
  • class - Additional CSS classes.

Slots

  • inner_block - Required. The button content.

Attributes

  • variant (:string) - Visual style variant. Defaults to "primary". Must be one of "primary", "secondary", "destructive", "outline", "ghost", or "link".
  • size (:string) - Size variant. Defaults to "default". Must be one of "default", "sm", "lg", or "icon".
  • type (:string) - Button type attribute. Defaults to "button". Must be one of "button", "submit", or "reset".
  • loading (:boolean) - Loading state - disables button and sets aria-busy. Defaults to false.
  • disabled (:boolean) - Disabled state. Defaults to false.
  • navigate (:string) - LiveView navigate path. Defaults to nil.
  • patch (:string) - LiveView patch path. Defaults to nil.
  • href (:string) - Regular link URL. Defaults to nil.
  • class (:any) - Additional CSS classes. Defaults to nil.
  • Global attributes are accepted. Additional HTML attributes. Supports all globals plus: ["id", "name", "value", "form", "aria-label", "aria-pressed", "aria-describedby", "aria-expanded", "aria-controls", "aria-haspopup", "phx-click", "phx-target", "phx-value-id", "phx-disable-with", "download"].

Slots

  • inner_block (required) - Button content.