Button

Overview

The s-btn attribute provides accessible, styled buttons with automatic dark mode support and auto-contrast text colors.

Basic Usage

<button s-btn="primary">Primary Button</button>

Variants

Primary

<button s-btn="primary">Primary</button>

Secondary

<button s-btn="secondary">Secondary</button>

Ghost

<button s-btn="ghost">Ghost</button>

Link

<button s-btn="link">Link</button>

Outline

<button s-btn="outline">Outline</button>

State Variants

Danger

<button s-btn="danger">Delete</button>

Success

<button s-btn="success">Confirm</button>

Warning

<button s-btn="warning">Caution</button>

Sizes

Use the s-size attribute to change button size:

<button s-btn="primary" s-size="sm">Small</button>
<button s-btn="primary">Default (Medium)</button>
<button s-btn="primary" s-size="lg">Large</button>
<button s-btn="primary" s-size="xl">Extra Large</button>

States

Disabled

<button s-btn="primary" disabled>Disabled</button>

Loading

<button s-btn="primary" s-loading>Loading...</button>

Special Modifiers

Icon-Only Button

<button s-btn="primary" s-icon>
  <svg><!-- icon --></svg>
</button>

Full-Width Button

<button s-btn="primary" s-block>Full Width</button>

With Icons

<button s-btn="primary">
  <svg><!-- icon --></svg>
  With Icon
</button>

As Links

<a href="/path" s-btn="primary">Link Button</a>

Button Groups

Group related buttons together:

<div s-btn-group>
  <button s-btn="secondary">Left</button>
  <button s-btn="secondary">Center</button>
  <button s-btn="secondary">Right</button>
</div>

How It Works

Buttons use the Layered Intent pattern with :where() for zero-specificity base styles:

/* Base styles - easily overridable */
:where([s-btn]) {
  --_btn-bg: var(--s-interactive-primary);
  --_btn-text: var(--s-text-inverse);
  --_btn-border: transparent;

  display: inline-flex;
  align-items: center;
  background-color: var(--_btn-bg);
  color: var(--_btn-text);

  /* Auto-contrast for custom backgrounds */
  @supports (color: oklch(from red l c h)) {
    color: oklch(
      from var(--_btn-bg) clamp(0.15, calc((0.6 - l) * 1000 + 0.15), 0.95) 0 0
    );
  }
}

/* Variant styles - intentional specificity */
[s-btn="primary"] {
  --_btn-bg: var(--s-interactive-primary);
}

CSS Custom Properties

Property	Description
--_btn-bg	Background color (private)
--_btn-text	Text color (private, auto-contrast)
--_btn-border	Border color (private)

All Attributes

Attribute	Purpose	Values
s-btn	Button variant	primary, secondary, ghost, link, outline, danger, success, warning
s-size	Button size	sm, lg, xl
s-icon	Icon-only button	Boolean
s-block	Full-width button	Boolean
s-loading	Loading state	Boolean
s-btn-group	Button group container	N/A

Customization Examples

Override Primary Color

Change the primary hue to affect all primary buttons:

:root {
  --shift-hue-primary: 280; /* Purple */
}

Custom Button Style

[s-btn="primary"] {
  --_bg: var(--s-accent-500);
  border-radius: var(--s-radius-full);
}