Button — lunaDOM Docs

The <luna-button> component provides interactive buttons with customizable styles and behaviors.

Paths

/lunadom/components/button/button.js

REQUIRED

Example

Default Button

Variants

Default

Primary

Success

Warning

Danger

Neutral

Sizes & Shapes

Small

Medium

Large

Pill Button

Outline

Interactive States

Disabled

Caret

Customization

Slots
default - Button label/content
prefix - Content before label (icon, etc.)
suffix - Content after label

Attributes
variant - Visual variant (primary, success, warning, danger, neutral)
size - Size preset (sm, md, lg). Defaults to 'md'
pill - Full pill border-radius
circle - Equal width/height with 50% radius (icon-only)
outline - Transparent fill with colored border and text
disabled - Disables the button
loading - Shows spinner and disables interaction
caret - Appends downward caret after label

CSS Variables
--luna-button-bg - Resting background color
--luna-button-color - Label/icon color
--luna-button-border - Border color
--luna-button-hover-bg - Hover background color
--luna-button-active-bg - Active/pressed background color
--luna-button-focus - Focus ring color
--luna-button-radius - Border radius override

Events
luna-click - Fired on click when not disabled or loading. detail: { originalEvent }

Example Code

<luna-button>Default</luna-button> <luna-button variant="primary">Primary</luna-button> <luna-button variant="success">Success</luna-button> <luna-button variant="warning">Warning</luna-button> <luna-button variant="danger">Danger</luna-button> <luna-button variant="neutral">Neutral</luna-button>  <luna-button size="sm">Small</luna-button> <luna-button size="md">Medium</luna-button> <luna-button size="lg">Large</luna-button> <luna-button pill variant="primary">Pill Button</luna-button> <luna-button outline variant="primary">Outline</luna-button>  <luna-button loading>Loading</luna-button> <luna-button disabled>Disabled</luna-button> <luna-button caret variant="secondary">Caret</luna-button>