Button

The Button component provides an interactive button with multiple variants, sizes, and states.

Installation

npm install @duskmoon-dev/el-button

Usage

import '@duskmoon-dev/el-button/register';

<el-dm-button variant="primary">Click me</el-dm-button>

Use type="submit" or type="reset" inside a form, or set form to an external form’s ID. Buttons can be removed and reinserted without duplicating submissions or resets.

Live Demo

Button Variants

Primary

Secondary

Tertiary

Outline

Ghost

Semantic Colors

Success

Warning

Error

Info

Properties

Property	Type	Default	Description
`variant`	`'primary' \| 'secondary' \| 'tertiary' \| 'outline' \| 'ghost' \| 'success' \| 'warning' \| 'error' \| 'info'`	`'primary'`	Visual style of the button
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Size of the button
`disabled`	`boolean`	`false`	Disables the button
`loading`	`boolean`	`false`	Shows loading state
`type`	`'button' \| 'submit' \| 'reset'`	`'button'`	Button type attribute

Variants

Primary

The primary variant is used for main actions.

<el-dm-button variant="primary">Primary</el-dm-button>

Secondary

The secondary variant is used for less prominent actions.

<el-dm-button variant="secondary">Secondary</el-dm-button>

Outline

The outline variant has a transparent background with a border.

<el-dm-button variant="outline">Outline</el-dm-button>

Ghost

The ghost variant is minimal, with no background or border.

<el-dm-button variant="ghost">Ghost</el-dm-button>

Tertiary

The tertiary variant provides an alternative accent color.

<el-dm-button variant="tertiary">Tertiary</el-dm-button>

Semantic Colors

Semantic color variants communicate status or intent.

Success

<el-dm-button variant="success">Success</el-dm-button>

Warning

<el-dm-button variant="warning">Warning</el-dm-button>

Error

<el-dm-button variant="error">Error</el-dm-button>

Info

<el-dm-button variant="info">Info</el-dm-button>

Sizes

Button Sizes

Small

Medium

Large

<el-dm-button size="sm">Small</el-dm-button>
<el-dm-button size="md">Medium</el-dm-button>
<el-dm-button size="lg">Large</el-dm-button>

States

Disabled

Disabled State

Disabled

<el-dm-button disabled>Disabled</el-dm-button>

Loading

Loading State

<el-dm-button loading>Loading</el-dm-button>

Events

The button component emits standard DOM events:

Event	Description
`click`	Fired when the button is clicked
`focus`	Fired when the button receives focus
`blur`	Fired when the button loses focus

Event Handling

const button = document.querySelector('el-dm-button');
button.addEventListener('click', (event) => {
  console.log('Button clicked!');
});

CSS Custom Properties

Property	Default	Description
`--btn-padding-x`	`1rem`	Horizontal padding
`--btn-padding-y`	`0.5rem`	Vertical padding
`--btn-border-radius`	`0.375rem`	Border radius
`--btn-font-weight`	`500`	Font weight

Accessibility

The button uses native <button> element semantics
Host aria-label and aria-labelledby name the native button and stay synchronized
Keyboard navigation is fully supported
Focus states are clearly visible
Disabled state is properly announced to screen readers

Use aria-label for an icon-only button, or reference label elements with aria-labelledby:

<el-dm-button aria-label="Remove email">
  <svg aria-hidden="true" viewBox="0 0 24 24">
    <path d="M5 5L19 19M19 5L5 19" />
  </svg>
</el-dm-button>

<span id="remove-email-label">Remove email</span>
<el-dm-button aria-labelledby="remove-email-label">×</el-dm-button>

Label IDs resolve in the host’s document or containing shadow root. When a label target exists, aria-labelledby takes precedence over aria-label. Label text and target replacements stay synchronized. Modern browsers use ARIA element references across the shadow boundary; older browsers use the targets’ text content or aria-label. Without either attribute, the slotted content supplies the accessible name.