AvenUI.Components.Button (AvenUI v1.0.0)

Copy Markdown View Source

Button component with full variant, size, loading, and icon support.

Variants

  • primary — filled purple, main CTA
  • secondary — outlined, secondary actions
  • ghost — no border, subtle actions
  • danger — red tint, destructive actions
  • outline — neutral outline
  • link — looks like a hyperlink

Sizes

  • xs, sm, md (default), lg, xl

Examples

<.button>Deploy</.button>

<.button variant="secondary" size="sm">Cancel</.button>

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

<.button loading={@saving}>
  <.button_icon><.spinner /></.button_icon>
  Saving…
</.button>

<.button variant="primary" size="lg" disabled>
  Locked
</.button>

Summary

Functions

button(assigns)

Renders a button with variants, sizes, and loading state support.

button_icon(assigns)

Icon wrapper inside a button — handles sizing consistently.

Functions

button(assigns)

Renders a button with variants, sizes, and loading state support.

Attributes

  • variant (:string) - Defaults to "primary". Must be one of "primary", "secondary", "ghost", "danger", "outline", or "link".
  • size (:string) - Defaults to "md". Must be one of "xs", "sm", "md", "lg", or "xl".
  • type (:string) - Defaults to "button". Must be one of "button", "submit", or "reset".
  • loading (:boolean) - Defaults to false.
  • disabled (:boolean) - Defaults to false.
  • class (:string) - Defaults to nil.
  • Global attributes are accepted. Supports all globals plus: ["phx-click", "phx-submit", "phx-value", "phx-target", "form"].

Slots

  • inner_block (required)

button_icon(assigns)

Icon wrapper inside a button — handles sizing consistently.

Attributes

  • class (:string) - Defaults to nil.

Slots

  • inner_block (required)