Renders a button styled with Pure Admin BEM classes.

When href is provided, renders as an anchor tag instead of a button.

Variants

primary, secondary, success, danger, warning, info, light, dark

Examples

<.button variant="primary">Save</.button>
<.button variant="danger" size="sm" is_outline>Delete</.button>
<.button variant="primary" is_loading>Saving...</.button>
<.button variant="primary" is_icon_only title="Save"><i class="fa-solid fa-floppy-disk"></i></.button>
<.button href="/settings" variant="secondary">Settings</.button>
<.button variant="primary">
  Save
  <:icon><i class="fa-solid fa-floppy-disk"></i></:icon>
</.button>

Attributes

• variant (:string) - Color variant. Defaults to "primary". Must be one of "primary", "secondary", "success", "warning", "danger", "info", "light", "dark", or "ghost".
• size (:string) - Button size. Defaults to nil. Must be one of nil, "xs", "sm", "lg", or "xl".
• theme_color (:string) - Theme color slot 1-9 (overrides variant). Defaults to nil. Must be one of nil, "1", "2", "3", "4", "5", "6", "7", "8", or "9".
• is_outline (:boolean) - Outline style. Defaults to false.
• is_block (:boolean) - Full-width block button. Defaults to false.
• is_loading (:boolean) - Loading state with spinner. Defaults to false.
• is_icon_only (:boolean) - Icon-only button (square). Defaults to false.
• is_ripple (:boolean) - Ripple effect on click. Defaults to false.
• align (:string) - Content alignment. Defaults to nil. Must be one of nil, "start", "end", "center", or "justify".
• icon_position (:string) - Icon position relative to text. Defaults to "start". Must be one of "start", or "end".
• type (:string) - HTML button type. Defaults to "button".
• href (:string) - Link URL (renders as <a> tag). Defaults to nil.
• target (:string) - Link target (_blank, _self, etc.). Defaults to nil.
• class (:string) - Additional CSS classes. Defaults to nil.
• Global attributes are accepted. Supports all globals plus: ["disabled", "name", "value", "form", "phx-click", "phx-disable-with", "title", "navigate", "patch"].

Slots

• icon - Icon slot rendered inside pa-btn__icon span.
• inner_block (required)

Renders a button group container.

Examples

<.button_group>
  <.button variant="secondary">Left</.button>
  <.button variant="secondary">Right</.button>
</.button_group>

<.button_group is_vertical align="stretch">
  <.button variant="primary">Save</.button>
  <.button variant="danger">Delete</.button>
</.button_group>

Attributes

• is_vertical (:boolean) - Vertical orientation. Defaults to false.
• align (:string) - Vertical alignment. Defaults to nil. Must be one of nil, "center", "end", or "stretch".
• is_nowrap (:boolean) - Prevent wrapping. Defaults to false.
• responsive (:string) - Responsive direction change at breakpoint (e.g. 'md-vertical' becomes vertical at 768px+). Defaults to nil. Must be one of nil, "sm-vertical", "sm-horizontal", "md-vertical", "md-horizontal", "lg-vertical", "lg-horizontal", "xl-vertical", or "xl-horizontal".
• class (:string) - Additional CSS classes. Defaults to nil.
• Global attributes are accepted.

Slots

• inner_block (required)

Renders a split button with a primary action and a dropdown toggle.

Uses the PureAdminSplitButton JS hook for Floating UI positioning. Menu items are rendered from the :item slot.

Examples

<.split_button label="Save" variant="primary" on_click="save">
  <:item icon="fas fa-file" on_click="save" action="draft">Save as Draft</:item>
  <:item icon="fas fa-door-closed" on_click="save" action="close">Save & Close</:item>
</.split_button>

<.split_button label="Export" icon="fas fa-download" variant="secondary" on_click="export">
  <:item icon="fas fa-file-csv" on_click="export" action="csv">Export as CSV</:item>
  <:item icon="fas fa-file-pdf" on_click="export" action="pdf">Export as PDF</:item>
  <:item is_danger on_click="export" action="delete-all">Delete All</:item>
</.split_button>

Item icons

Menu items can have icons via the icon attr, rendered as pa-btn-split__item-icon.

Inline action buttons

Items can include an inline action button (e.g. delete) beside the item text. Set action_icon to enable it:

<.split_button label="Bookmarks" icon="fas fa-bookmark" variant="primary">
  <:item icon="fas fa-home" on_click="navigate" action="dashboard"
         action_icon="fas fa-trash-can" action_event="remove_bookmark" action_value="dashboard">
    Dashboard
  </:item>
</.split_button>

• action_icon — Font Awesome class for the inline button (required to show it)
• action_event — LiveView event name pushed when clicked
• action_value — string value sent as %{"action" => value} with the event. Falls back to the item's action attr if not set
• action_variant — button color variant (default: "danger")

Upward placement

Use placement="top-end" to open the menu upward. The chevron icon automatically points up. Floating UI will auto-flip if there's not enough space.

Attributes

• label (:string) (required) - Primary button label.
• icon (:string) - Font Awesome icon class for the primary button (e.g. "fas fa-download"). Defaults to nil.
• variant (:string) - Defaults to "primary". Must be one of "primary", "secondary", "success", "warning", "danger", "info", "light", or "dark".
• size (:string) - Defaults to nil.Must be one of nil, "xs", "sm", "lg", or "xl".
• placement (:string) - Menu placement (Floating UI). Defaults to "bottom-end".
• on_click (:string) - phx-click event for the primary button. Defaults to nil.
• disabled (:boolean) - Defaults to false.
• class (:string) - Defaults to nil.
• Global attributes are accepted.

Slots

• item (required) - Menu items. Accepts attributes:
  • is_danger (:boolean) - Danger styling for destructive actions.
  • on_click (:string) - LiveView click event name.
  • action (:string) - Action value sent with the click event.
  • icon (:string) - Font Awesome icon class for the item (e.g. "fas fa-file").
  • action_icon (:string) - Inline action button icon (e.g. "fas fa-trash-can").
  • action_event (:string) - LiveView event for the inline action button.
  • action_value (:string) - Value sent with the inline action event.
  • action_variant (:string) - Variant for the inline action button (default: "danger").