Components Buttons

Petal Pro is the full SaaS app this is built for

Auth, billing, admin, and Claude Code integration included. One purchase, unlimited projects.

See what's included

Buttons

Buttons empower you to create interactive elements for a user.
Types
Link Link with method Live Patch Live Redirect
heex 
          <.button label="Button" to="/" />
<.button link_type="a" to="/" label="Link" />
<.button link_type="a" to="/" label="Link with method" method={:delete} />
<.button link_type="live_patch" to="/" label="Live Patch" />
<.button link_type="live_redirect" to="/" label="Live Redirect" />
Colors
heex 
          <.button color="primary" label="Primary" />
<.button color="secondary" label="Secondary" />
<.button color="white" label="White" />
<.button color="pure_white" label="Pure White" />
<.button color="info" label="Info" />
<.button color="success" label="Success" />
<.button color="warning" label="Warning" />
<.button color="danger" label="Danger" />
<.button color="gray" label="Gray" />
<.button color="light" label="Light" />
<.button color="Dark" label="Dark" />

# Light is unique in that it is designed to adapt subtly to dark mode
Outline
heex 
          <.button color="primary" label="Primary" variant="outline" />
<.button color="secondary" label="Secondary" variant="outline" />
<.button color="white" label="White" variant="outline" />
<.button color="info" label="Info" variant="outline" />
<.button color="success" label="Success" variant="outline" />
<.button color="warning" label="Warning" variant="outline" />
<.button color="danger" label="Danger" variant="outline" />
<.button color="gray" label="Gray" variant="outline" />
<.button color="light" label="Light" variant="outline" />
<.button color="dark" label="Dark" variant="outline" />
Log in to view
Inverted
heex 
          <.button color="primary" label="Primary" variant="inverted" />
<.button color="secondary" label="Secondary" variant="inverted" />
<.button color="white" label="White" variant="inverted" />
<.button color="info" label="Info" variant="inverted" />
<.button color="success" label="Success" variant="inverted" />
<.button color="warning" label="Warning" variant="inverted" />
<.button color="danger" label="Danger" variant="inverted" />
<.button color="gray" label="Gray" variant="inverted" />
<.button color="light" label="Light" variant="inverted" />
<.button color="dark" label="Dark" variant="inverted" />
Log in to view
Shadow
heex 
          <.button color="primary" label="Primary" variant="shadow" />
<.button color="secondary" label="Secondary" variant="shadow" />
<.button color="white" label="White" variant="shadow" />
<.button color="info" label="Info" variant="shadow" />
<.button color="success" label="Success" variant="shadow" />
<.button color="warning" label="Warning" variant="shadow" />
<.button color="danger" label="Danger" variant="shadow" />
<.button color="gray" label="Gray" variant="shadow" />
<.button color="light" label="Light" variant="shadow" />
<.button color="dark" label="Dark" variant="shadow" />
Log in to view
Ghost
heex 
              <.button color="primary" label="Primary" variant="ghost" />
    <.button color="secondary" label="Secondary" variant="ghost" />
    <.button color="info" label="Info" variant="ghost" />
    <.button color="success" label="Success" variant="ghost" />
    <.button color="warning" label="Warning" variant="ghost" />
    <.button color="danger" label="Danger" variant="ghost" />
    <.button color="gray" label="Gray" variant="ghost" />
Log in to view
Radius
heex 
          <.button radius="none" label="None" />
<.button radius="sm" label="sm" />
<.button radius="md" label="md" />
<.button radius="lg" label="lg" />
<.button radius="xl" label="xl" />
<.button radius="full" label="full" />
Sizes
heex 
          <.button size="xs" label="xs" />
<.button size="sm" label="sm" />
<.button size="md" label="md" />
<.button size="lg" label="lg" />
<.button size="xl" label="xl" />
States

Disabled

heex 
          <.button disabled size="xs" to="/" label="Disabled xs" />
<.button disabled size="sm" to="/" label="Disabled sm" />
<.button disabled size="md" to="/" label="Disabled md" />
<.button disabled size="lg" to="/" label="Disabled lg" />
<.button disabled size="xl" to="/" label="Disabled xl" />

Loading

heex 
          <.button loading size="xs" label="Loading xs" />
<.button loading size="sm" label="Loading sm" />
<.button loading size="md" label="Loading md" />
<.button loading size="lg" label="Loading lg" />
<.button loading size="xl" label="Loading xl" />
With icon
Solid Outline
heex 
          <.button icon="hero-home-mini" label="Mini" />
<.button with_icon link_type="a" to="/">
  <.icon name="hero-home-solid" class="w-5 h-5" /> Solid
</.button>
<.button with_icon link_type="a" to="/">
  <.icon name="hero-home" class="w-5 h-5" /> Outline
</.button>
Log in to view
Icon buttons
heex 
          <.icon_button tooltip="Clock" size="xs">
    <.icon name="hero-clock-solid" class="w-5 h-5" />
  </.icon_button>
  <.icon_button tooltip="Clock" size="sm" color="secondary">
    <.icon name="hero-clock-solid" />
  </.icon_button>
  <.icon_button size="md" color="success">
    <.icon name="hero-trash-solid" />
  </.icon_button>
  <.icon_button
    size="md"
    color="warning"
    tooltip="Take me to google!"
    target="_blank"
    link_type="a"
    to="https://google.com"
  >
    <.icon name="hero-arrow-up-circle-solid" class="w-7 h-7 " />
  </.icon_button>
  <.icon_button disabled class="!text-green-600">
    <.icon name="hero-arrow-down-on-square-solid" />
  </.icon_button>

  <.icon_button to="/" loading link_type="button" class="!text-indigo-600 !dark:text-indigo-300">
    <.icon name="hero-trash-solid" />
  </.icon_button>
Log in to view
Properties
elixir 
           attr :size, :string, default: "md", values: ["xs", "sm", "md", "lg", "xl"], doc: "button sizes"

attr :radius, :string,
  default: "md",
  values: ["none", "sm", "md", "lg", "xl", "full"],
  doc: "button border radius"

attr :variant, :string,
  default: "solid",
  values: ["solid", "light", "outline", "inverted", "shadow", "ghost"],
  doc: "button variant"

attr :color, :string,
  default: "primary",
  values: [
    "primary",
    "secondary",
    "info",
    "success",
    "warning",
    "danger",
    "gray",
    "pure_white",
    "white",
    "light",
    "dark"
  ],
  doc: "button color"

attr :to, :string, default: nil, doc: "link path"
attr :loading, :boolean, default: false, doc: "indicates a loading state"
attr :disabled, :boolean, default: false, doc: "indicates a disabled state"
attr :icon, :any, default: nil, doc: "name of a Heroicon at the front of the button"
attr :with_icon, :boolean, default: false, doc: "adds some icon base classes"

attr :link_type, :string,
  default: "button",
  values: ["a", "live_patch", "live_redirect", "button"]

attr :class, :any, default: nil, doc: "CSS class"
attr :label, :string, default: nil, doc: "labels your button"

attr :rest, :global,
  include: ~w(method download hreflang ping referrerpolicy rel target type value name form)

slot :inner_block, required: false