Wishlist Dizzy

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>

Add this module

terminal 
mix dizzy.add button

Component API

Button.button

Attributes

Attributes for Button.button
NameTypeDefault 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 :atom :button :button, :submit, :reset

Slots

Slots for Button.button
NameRequired Attributes
inner_block Required —