AuroraUI.Components.Actions (Aurora UI v0.1.1)

View Source

Actions family — button, icon button, button group, and link treatments.

Actions are the kit's most-used primitive, so they set the conventions the rest of the library follows: finite variant/size attributes (never a stringly-typed style prop), explicit loading/disabled/destructive states, global-attribute passthrough, and a single focus-visible ring.

Semantics

button/1 renders a real <button> (or <a> when navigate/href/patch is set) so keyboard, form, and assistive-technology behavior come from the platform. A loading button stays focusable and announces its busy state with aria-busy; it is not silently swapped for a disabled control.

Summary

Functions

button(assigns)

Renders a button. Becomes an <a> when navigate, patch, or href is set, preserving the same visual treatment and focus behavior.

button_group(assigns)

Groups related buttons into a single segmented cluster. Use for a small set of peer actions, not for navigation (use tabs or a menu there).

icon_button(assigns)

Icon-only button. Requires label for a non-visual accessible name; the icon itself is marked decorative.

link_text(assigns)

Inline text link with consistent underline, focus, and visited treatment. External links get rel="noopener noreferrer", target="_blank", and a visually-hidden "(opens in new tab)" hint.

Functions

button(assigns)

Renders a button. Becomes an <a> when navigate, patch, or href is set, preserving the same visual treatment and focus behavior.

Examples

<.button>Save</.button>
<.button variant="danger" loading={@deleting}>Delete</.button>
<.button variant="link" navigate={~p"/docs"}>Read the docs</.button>

Attributes

  • variant (:string) - Visual priority. primary for the main action, danger for destructive. Defaults to "primary". Must be one of "primary", "secondary", "ghost", "subtle", "danger", or "link".
  • size (:string) - Defaults to "md". Must be one of "sm", "md", or "lg".
  • type (:string) - button type when rendered as <button>. Defaults to "button".
  • disabled (:boolean) - Defaults to false.
  • loading (:boolean) - shows a spinner and sets aria-busy. Defaults to false.
  • full_width (:boolean) - Defaults to false.
  • href (:string) - Defaults to nil.
  • navigate (:string) - Defaults to nil.
  • patch (:string) - Defaults to nil.
  • Global attributes are accepted. Supports all globals plus: ["form", "name", "value", "download", "target", "rel", "phx-click", "phx-value-id"].

Slots

  • icon_start - leading icon; hidden from AT (decorative).
  • icon_end
  • inner_block (required)

button_group(assigns)

Groups related buttons into a single segmented cluster. Use for a small set of peer actions, not for navigation (use tabs or a menu there).

Attributes

  • label (:string) - group accessible name (role=group). Defaults to nil.
  • Global attributes are accepted.

Slots

  • inner_block (required)

icon_button(assigns)

Icon-only button. Requires label for a non-visual accessible name; the icon itself is marked decorative.

<.icon_button label="Close"><.x_icon /></.icon_button>

Attributes

  • label (:string) (required) - accessible name; rendered as aria-label + tooltip.
  • variant (:string) - Defaults to "ghost". Must be one of "primary", "secondary", "ghost", "subtle", "danger", or "link".
  • size (:string) - Defaults to "md". Must be one of "sm", "md", or "lg".
  • disabled (:boolean) - Defaults to false.
  • loading (:boolean) - Defaults to false.
  • Global attributes are accepted. Supports all globals plus: ["form", "name", "value", "phx-click", "phx-value-id", "type"].

Slots

  • inner_block (required) - the icon.