Button

The Button component provides a flexible, accessible button element with multiple visual variants and sizes. It supports navigation via Phoenix's navigate, patch, and href attributes.

Import

use PUI
# or
import PUI.Button

Basic Usage

<.button>Click me</.button>

Variants

Buttons come in several visual styles to communicate different levels of emphasis and intent.

<.button variant="default">Default</.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

Control the button size using the size attribute.

<.button size="sm">Small</.button>
<.button size="default">Default</.button>
<.button size="lg">Large</.button>
<.button size="icon">🔔</.button>

Navigation

Buttons can act as navigation links using Phoenix's built-in attributes:

<!-- Client-side navigation (LiveView) -->
<.button navigate={~p"/dashboard"}>Go to Dashboard</.button>

<!-- Patch current LiveView -->
<.button patch={~p"/settings"}>Settings</.button>

<!-- Traditional link -->
<.button href="https://example.com">External Link</.button>

Disabled State

<.button disabled>Disabled</.button>
<.button variant="destructive" disabled>Can't Delete</.button>

With Icons

Combine buttons with icon components for rich visual cues:

<.button>
  <.icon name="hero-plus" class="size-4 mr-2" /> Add Item
</.button>

<.button variant="destructive">
  <.icon name="hero-trash" class="size-4 mr-2" /> Delete
</.button>

<.button size="icon" variant="ghost">
  <.icon name="hero-cog-6-tooth" class="size-5" />
</.button>

Unstyled / Headless

Use variant="unstyled" to get a button with no default styles — perfect for building custom designs:

<.button variant="unstyled" class="my-custom-btn">
  Fully Custom
</.button>

API Reference

Attributes

Slots