LineaUI.Components.Button (linea_ui v0.1.1)

Copy Markdown View Source

LineOne's buttons: filled, outlined, soft, bordered, flat and glowing, in every theme color.

<.button>Neutral</.button>
<.button color="primary">Save</.button>
<.button color="error" variant="outline" shape="pill">Delete</.button>
<.button color="info" icon aria-label="Search"><svg>…</svg></.button>
<.button navigate={~p"/orders"} color="primary" variant="soft">Orders</.button>
<.button icon variant="flat" color="current" aria-label="Menu"><svg>…</svg></.button>
<.button variant="glass">On a gradient card</.button>

With href, navigate or patch it renders a link that looks the same.

Summary

Functions

button(assigns)

Renders a button, or a link when href, navigate or patch is given.

button_group(assigns)

Joins buttons side by side into one segmented control.

Functions

button(assigns)

Renders a button, or a link when href, navigate or patch is given.

Attributes

  • color (:string) - white is for buttons on colored or gradient surfaces; current takes the parent's text color (solid and glow have no current). Defaults to "neutral". Must be one of "neutral", "primary", "secondary", "info", "success", "warning", "error", "white", or "current".
  • variant (:string) - solid is filled, glow adds the colored shadow, bordered is soft with a tinted border, flat has no background until hovered, glass is translucent white with white text for gradient and colored cards (it ignores color). Defaults to "solid". Must be one of "solid", "glow", "outline", "soft", "bordered", "flat", or "glass".
  • size (:string) - Defaults to "md". Must be one of "xs", "sm", "md", "lg", or "xl".
  • shape (:string) - Defaults to "rounded". Must be one of "rounded", "pill", or "square".
  • icon (:boolean) - A square button that holds only an icon. Defaults to false.
  • type (:string) - Defaults to "button".
  • disabled (:boolean) - Defaults to false.
  • class (:any) - Defaults to nil.
  • Global attributes are accepted. Supports all globals plus: ["href", "navigate", "patch", "method", "download", "target", "rel", "form", "name", "value"].

Slots

  • inner_block (required)

button_group(assigns)

Joins buttons side by side into one segmented control.

<.button_group>
  <.button variant="outline">Day</.button>
  <.button variant="outline">Week</.button>
</.button_group>

Attributes

  • shape (:string) - pill rounds the outer ends fully, as LineOne's First / Second / Third group. Defaults to "rounded". Must be one of "rounded", or "pill".
  • class (:any) - Defaults to nil.
  • Global attributes are accepted.

Slots

  • inner_block (required)