CSS-Only

Button

Interactive button component with semantic variants, styles, sizes, and states. Works by default, enhances with data attributes.

Example

<button class="omni-button">Default</button>
<button class="omni-button" data-variant="primary">Primary</button>
<button class="omni-button" data-variant="secondary">Secondary</button>
<button class="omni-button" data-variant="success">Success</button>
<button class="omni-button" data-variant="danger">Danger</button>

Variants

Semantic Variants

Use data-variant to convey meaning through color:

Style Variants

Use data-variant-style to adjust visual emphasis:

Solid (default)

Outline

Ghost

Soft

Sizes

Use data-size to adjust button dimensions:

<button class="omni-button" data-variant="primary" data-size="sm">Small</button>
<button class="omni-button" data-variant="primary">Medium</button>
<button class="omni-button" data-variant="primary" data-size="lg">Large</button>

With Icons

Add SVG icons before or after button text:

Icon-Only

Use data-type="icon" for square buttons. Always include aria-label:

States

Disabled

Loading

Full Width

API Reference

Attribute Values Default Description
data-variant primary, secondary, success, warning, danger, info — Semantic color variant
data-variant-style solid, outline, ghost, soft solid Visual style treatment
data-size sm, md, lg md Button dimensions
data-type icon — Square button for icons
data-width auto, full auto Button width behavior
data-state loading, disabled — Interactive state

Accessibility

  • Full keyboard navigation support (Tab, Enter, Space)
  • Focus visible indicators with semantic color-matched rings
  • Disabled state prevents interaction and conveys state visually
  • Loading state provides visual feedback and prevents duplicate submissions
  • Icon-only buttons require aria-label for screen readers
  • Works with both <button> and <a> elements
  • Respects prefers-reduced-motion for animations