PineUiPhoenix.Components.Button (Pine UI v0.2.1)

Copy Markdown View Source

Buttons.

A port of the Pines button. Pure Tailwind — no Alpine required — except for the optional loading state, which only toggles classes.

<.button>Save</.button>
<.button variant="destructive" phx-click="delete">Delete</.button>
<.button variant="outline" size="sm">Cancel</.button>

Summary

Forms

button(assigns)

Renders a button.

Forms

button(assigns)

Renders a button.

Examples

<.button>Save changes</.button>

<.button variant="destructive" phx-click="delete" phx-value-id={@item.id}>
  Delete
</.button>

<.button loading={@saving} disabled={@saving}>
  <:icon><Heroicons.check class="h-4 w-4" /></:icon>
  Save
</.button>

Accessibility

While loading is true the button is marked aria-busy and the spinner is hidden from assistive technology, so a screen reader announces the label rather than the decoration.

Attributes

  • variant (:string) - Visual style. One of primary, secondary, destructive, outline, ghost, link. Defaults to "primary". Must be one of "primary", "secondary", "destructive", "outline", "ghost", or "link".
  • size (:string) - Control size. icon renders a square button sized for a single glyph. Defaults to "md". Must be one of "sm", "md", "lg", or "icon".
  • type (:string) - The HTML button type. Defaults to button so it never submits a form by accident. Defaults to "button". Must be one of "button", "submit", or "reset".
  • disabled (:boolean) - Defaults to false.
  • loading (:boolean) - Shows a spinner and disables interaction. Defaults to false.
  • class (:string) - Extra classes. These override the defaults. Defaults to nil.
  • Global attributes are accepted. Any other attribute, including phx-* and Alpine x-*.

Slots

  • inner_block (required)
  • icon - Rendered before the label.