View Source Lume.Components.Button (lume v0.3.0)

A versatile button component with multiple variants, sizes, and styling options.

Features

  • Multiple variants (primary, secondary, outline, minimal)
  • Various sizes (xs, sm, md, lg, xl)
  • Optional icon support
  • Content justification options
  • Border toggle for outline variant
  • Focus and hover states

Examples

# Basic button
<.button>Send!</.button>

# Button with Phoenix event
<.button phx-click="go" class="ml-2">Send!</.button>

# Button with leading icon
<.button icon="hero-user-group">Teams</.button>

# Outline button without border
<.button variant="outline" border={false}>Borderless</.button>

# Left-aligned full-width button
<.button justify="start" class="w-full">Left aligned</.button>

# Large secondary button
<.button variant="secondary" size="lg">Large Button</.button>

Summary

Functions

Renders a button component.

Functions

button(assigns)

Renders a button component.

Attributes

  • type - HTML button type attribute, defaults to "button"
  • class - Additional CSS classes to apply to the button
  • variant - Button style variant ("primary", "secondary", "outline", "minimal"), defaults to "primary"
  • size - Size variant ("xs", "sm", "md", "lg", "xl"), defaults to "md"
  • icon - Optional icon name (from heroicons)
  • justify - Content alignment ("start", "center", "end"), defaults to "center"
  • border - Whether to show a border (only applies to outline variant), defaults to true

Slots

  • inner_block - Required. The content to display inside the button

Attributes

  • type (:string) - Defaults to "button".
  • class (:string) - Defaults to nil.
  • variant (:string) - Defaults to "primary".
  • size (:string) - Defaults to "md".
  • icon (:string) - the name of the icon to display. Defaults to nil.
  • justify (:string) - content alignment (start=left, center, end=right). Defaults to "center".
  • border (:boolean) - whether to show a border (applies to outline variant). Defaults to true.
  • Global attributes are accepted.

Slots

  • inner_block (required)