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
Renders a button component.
Attributes
type
- HTML button type attribute, defaults to "button"class
- Additional CSS classes to apply to the buttonvariant
- 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 tonil
.variant
(:string
) - Defaults to"primary"
.size
(:string
) - Defaults to"md"
.icon
(:string
) - the name of the icon to display. Defaults tonil
.justify
(:string
) - content alignment (start=left, center, end=right). Defaults to"center"
.border
(:boolean
) - whether to show a border (applies to outline variant). Defaults totrue
.- Global attributes are accepted.
Slots
inner_block
(required)