Buttons

Interactive button components with multiple variants, sizes, and states.

Interactive Playground

Customize the button below and see the generated code update in real-time. 

<.button variant="default" size="default">
  Button
</.button>

Variants

Buttons come in 6 different variants to suit various use cases. 

<.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

Three sizes are available: small, default, and large. 

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

Icon Buttons

Use the size="icon" attribute for square icon buttons. 

<.button variant="default" size="icon">
  <.icon name="hero-heart" class="w-4 h-4" />
</.button>

<.button variant="outline" size="icon">
  <.icon name="hero-cog" class="w-4 h-4" />
</.button>

Buttons with Icons

Add icons alongside text for enhanced visual context. 

<.button>
  <.icon name="hero-heart" class="w-4 h-4" /> Like
</.button>

<.button variant="destructive">
  <.icon name="hero-trash" class="w-4 h-4" /> Delete
</.button>

Buttons as Links

Buttons can act as links using navigate, patch, or href.

Patch Navigation Navigate Link Href Link 
<.button variant="link" patch={~p"/settings"}>
  Patch Navigation
</.button>

<.button variant="outline" navigate={~p"/profile"}>
  Navigate Link
</.button>

<.button variant="secondary" href="/logout">
  Href Link
</.button>

Disabled State

Use the disabled attribute to disable buttons. 

<.button disabled>Disabled</.button>
<.button variant="secondary" disabled>Disabled</.button>

Import 

use PUI

Description

A versatile button component with multiple variants and sizes. Supports icons, link behavior, and follows Phoenix LiveView conventions.

Props

Name Type Default Description
variant string "default" Button style variant: default, secondary, destructive, outline, ghost, link
size string "default" Button size: sm, default, lg, icon
class string "" Additional CSS classes
disabled boolean false Disable the button
navigate string nil Phoenix LiveView navigate path
patch string nil Phoenix LiveView patch path
href string nil Standard href link