Button

New

Overview

It's a button! Use it when you need to perform an action that doesn't navigate the page.

HEEx

<div class="example-buttons flex flex-wrap gap-2.25 items-center max-[760px]:gap-1.75">
  <Button.button phx-click="demo-action" phx-value-action="Changes saved">Save changes
  <span aria-hidden="true">↗</span></Button.button>
</div>

Secondary

HEEx

<div class="example-buttons flex items-center">
  <Button.button kind={:secondary}>Secondary</Button.button>
</div>

Outline

HEEx

<div class="example-buttons flex items-center">
  <Button.button kind={:outline}>Outline</Button.button>
</div>

Ghost

HEEx

<div class="example-buttons flex items-center">
  <Button.button kind={:ghost}>Ghost</Button.button>
</div>

Destructive

HEEx

<div class="example-buttons flex items-center">
  <Button.button kind={:destructive}>Destructive</Button.button>
</div>

Sizes

HEEx

<div class="flex w-full flex-col items-center justify-center gap-8 sm:flex-row">
  <div class="flex items-start gap-2">
    <Button.button size={:xs} kind={:outline}>Extra Small</Button.button>
    <Button.button size={:icon_xs} aria-label="Extra small action" kind={:outline}>
      <Icon.icon name="hero-arrow-up-right" class="size-3" />
    </Button.button>
  </div>
  <div class="flex items-start gap-2">
    <Button.button size={:sm} kind={:outline}>Small</Button.button>
    <Button.button size={:icon_sm} aria-label="Small action" kind={:outline}>
      <Icon.icon name="hero-arrow-up-right" />
    </Button.button>
  </div>
  <div class="flex items-start gap-2">
    <Button.button kind={:outline}>Default</Button.button>
    <Button.button size={:icon} aria-label="Default action" kind={:outline}>
      <Icon.icon name="hero-arrow-up-right" />
    </Button.button>
  </div>
  <div class="flex items-start gap-2">
    <Button.button size={:lg} kind={:outline}>Large</Button.button>
    <Button.button size={:icon_lg} aria-label="Large action" kind={:outline}>
      <Icon.icon name="hero-arrow-up-right" />
    </Button.button>
  </div>
</div>

Loading state

Use phx-disable-with to disable a button and temporarily replace its text while LiveView waits for the server. Phoenix LiveView adds the phx-submit-loading class to the form while its submit event is in flight. The Tailwind setup defines a matching phx-submit-loading variant, which we can use to swap in a loading button with a spinner.

HEEx

<div class="flex flex-wrap items-center gap-3">
  <.form for={@form} id="text-loading-form" phx-submit="save">
    <Button.button type="submit" phx-disable-with="Loading...">
      Load with text
    </Button.button>
  </.form>

  <.form for={@form} id="spinner-loading-form" phx-submit="save">
    <Button.button
      type="submit"
      phx-disable-with
      class="phx-submit-loading:hidden"
    >
      Load with spinner
    </Button.button>
    <span class="hidden phx-submit-loading:inline-flex">
      <Button.button loading>Loading...</Button.button>
    </span>
  </.form>
</div>

Add this module

terminal

mix dizzy.add button

Component API

Button.button

Attributes

Attributes for Button.button
Name	Type	Default	Values
`as_dropdown_trigger`	`:boolean`	false	—
`class`	`:any`	nil	—
`disabled`	`:boolean`	false	—
`kind`	`:atom`	:primary	:primary, :secondary, :outline, :ghost, :destructive
`loading`	`:boolean`	false	—
`rest`	`:global`	nil	—
`size`	`:atom`	:md	:xs, :sm, :md, :lg, :icon_xs, :icon_sm, :icon, :icon_lg
`type`	`:string`	"button"	"button", "submit", "reset"

Slots

Slots for Button.button
Name	Required
`inner_block`	Required