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>

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
Keyboard navigation is fully supported
Focus states are clearly visible
Disabled state is properly announced to screen readers