Button

Interactive button component with multiple style variants, sizes, and states. Built on Web Components with full accessibility support.

Quick Start

npx @zizigy/capsule add Button

<capsule-button>Click me</capsule-button>

Showcase

Core Variants

<capsule-button variant="primary">Primary</capsule-button>
<capsule-button variant="secondary">Secondary</capsule-button>
<capsule-button variant="outline">Outline</capsule-button>
<capsule-button variant="text">Text</capsule-button>

Semantic Colors

<capsule-button variant="success">Success</capsule-button>
<capsule-button variant="error">Error</capsule-button>
<capsule-button variant="warning">Warning</capsule-button>
<capsule-button variant="info">Info</capsule-button>

Sizes

<capsule-button size="xs">Extra Small</capsule-button>
<capsule-button size="sm">Small</capsule-button>
<capsule-button size="md">Medium</capsule-button>
<capsule-button size="lg">Large</capsule-button>

Rounded

<capsule-button rounded="none">None</capsule-button>
<capsule-button rounded="xs">Extra Small</capsule-button>
<capsule-button rounded="sm">Small</capsule-button>
<capsule-button rounded="md">Medium</capsule-button>
<capsule-button rounded="lg">Large</capsule-button>
<capsule-button rounded="xl">XL</capsule-button>
<capsule-button rounded="full">Full</capsule-button>

States

<capsule-button>Normal</capsule-button>
<capsule-button disabled>Disabled</capsule-button>

API Reference

Attributes

Attribute	Type	Default	Description
variant	string	primary	Button style
size	string	md	Button size
disabled	boolean	false	Disabled state
type	string	button	Button type (button/submit/reset)
rounded	string	md	Border radius degree

Allowed Values

• variant:

  • primary — Primary action
  • secondary — Secondary action
  • outline — Outlined button
  • text — Text-only button
  • success — Success action
  • error — Error action
  • warning — Warning action
  • info — Informational action

• size:

  • xs — Extra small
  • sm — Small
  • md — Medium
  • lg — Large

• rounded:

  • none — No rounding
  • xs - Extra Small
  • sm — Small
  • md — Medium
  • lg — Large
  • xl — Extra large
  • full — Full

Events

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

Form Integration

<form id="myForm">
  <input
    type="text"
    name="username"
    required
  />
  <capsule-button type="submit">Submit</capsule-button>
  <capsule-button type="reset">Reset</capsule-button>
</form>

Accessibility

• ✅ Keyboard navigation (Enter/Space)
• ✅ ARIA attributes for screen readers
• ✅ Focus management
• ✅ Proper disabled state handling
• ✅ Form association support