LanternUI.Components.Button (LanternUI v0.8.2)

Copy Markdown View Source

Buttons — Fluxon-compatible API, shadcn-caliber styling.

<.button>Save</.button>
<.button variant="solid">Deploy</.button>
<.button variant="solid" color="danger">Delete</.button>
<.button size="icon"><.icon name="plus" /></.button>
<.button size="icon" label="Toggle panel" kbd="]">
  <.icon name="view-columns" />
</.button>

The API mirrors Fluxon's button/1 (color × variant × size), so a consumer migrates by swapping imports. Styling is LanternUI's own: token-driven (--lantern-*), 32px md control height, hairline borders, coral focus ring.

Colors set a per-button --lui-c custom property; variants derive their background/border/text from it, so every color works with every variant without a compiled class matrix.

label is the accessible name. On icon-* sizes it also wraps the control in tooltip/1 (with optional kbd), the same chrome icon_button/1 used.

Summary

Functions

button(assigns)
button_group(assigns)

Groups buttons into a single segmented control (shared borders, joined radius).

Functions

button(assigns)

Attributes

  • color (:string) - Semantic color token for the button surface. Defaults to "primary". Must be one of "primary", "danger", "warning", "success", or "info".

  • variant (:string) - Surface style: solid fills, outline borders, ghost is transparent. Defaults to "outline". Must be one of "solid", "soft", "surface", "outline", "dashed", or "ghost".

  • size (:string) - Control height; icon-* sizes are square. Defaults to "md". Must be one of "xs", "sm", "md", "lg", "xl", "icon-xs", "icon-sm", "icon-md", "icon", "icon-lg", or "icon-xl".

  • label (:string) - Accessible name (aria-label). On icon-* sizes the control is also wrapped in tooltip/1 with this copy.

    Defaults to nil.

  • kbd (:string) - Optional keyboard hint shown in the tooltip after label. Defaults to nil.

  • disabled (:boolean) - Render disabled and non-interactive. A <button> gets the real disabled attribute; a link (navigate/patch/href) has no such attribute, so it gets data-disabled + aria-disabled="true" + tabindex="-1" — CSS then removes pointer events, matching the <button> behavior.

    Defaults to false.

  • class (:any) - Extra classes merged onto the root element. Defaults to nil.

  • navigate (:string) - LiveView navigate target; renders as a link. Defaults to nil.

  • patch (:string) - LiveView patch target; renders as a link. Defaults to nil.

  • href (:any) - External/full-page href; renders as a link. Defaults to nil.

  • Global attributes are accepted. Arbitrary HTML/phx-* attributes passed through. Supports all globals plus: ["type", "form", "name", "value", "method", "download", "target", "rel"].

Slots

  • inner_block (required) - Button label or content.

button_group(assigns)

Groups buttons into a single segmented control (shared borders, joined radius).

Attributes

  • class (:any) - Extra classes merged onto the root element. Defaults to nil.
  • Global attributes are accepted. Arbitrary HTML/phx-* attributes passed through.

Slots

  • inner_block (required) - Buttons to join into a segmented group.