Buttons

Import: @bnotk/dsx/css/buttons.css

Live Preview

Classes

Class	Description
`.dsx-btn`	Base button class (required)
`.dsx-btn--primary`	Primary action (filled, brand color)
`.dsx-btn--secondary`	Secondary action (outlined)
`.dsx-btn--danger`	Destructive action (red)
`.dsx-btn--dashed`	Dashed border variant
`.dsx-btn--link`	Link-styled button
`.dsx-btn--light`	Light/ghost variant
`.dsx-btn--icon`	Icon-only button (square)
`.dsx-btn--sm`	Small size modifier
`.dsx-btn-group`	Button group container

Examples

<button class="dsx-btn dsx-btn--primary">Primary</button>
<button class="dsx-btn dsx-btn--secondary">Secondary</button>
<button class="dsx-btn dsx-btn--danger">Delete</button>
<button class="dsx-btn dsx-btn--dashed">Add Item</button>
<button class="dsx-btn dsx-btn--link">Cancel</button>
<button class="dsx-btn dsx-btn--light">Ghost</button>

<!-- Small -->
<button class="dsx-btn dsx-btn--primary dsx-btn--sm">Small</button>

<!-- Icon button -->
<button class="dsx-btn dsx-btn--icon" aria-label="Settings">
  <svg viewBox="0 0 16 16" fill="none" aria-hidden="true">
    <path d="M8 1.75v2.1m0 8.3v2.1M3.58 3.58l1.48 1.49m5.88 5.88 1.48 1.47M1.75 8h2.1m8.3 0h2.1M3.58 12.42l1.49-1.48m5.88-5.88 1.47-1.48" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
    <circle cx="8" cy="8" r="2.5" stroke="currentColor" stroke-width="1.5"/>
  </svg>
</button>

<!-- Disabled -->
<button class="dsx-btn dsx-btn--primary" disabled>Disabled</button>

<!-- Button group -->
<div class="dsx-btn-group">
  <button class="dsx-btn dsx-btn--secondary">Left</button>
  <button class="dsx-btn dsx-btn--secondary">Center</button>
  <button class="dsx-btn dsx-btn--secondary">Right</button>
</div>

States

All button variants support:

:hover — Slight darken/lighten
:focus-visible — Cyan focus ring (--ds2-color-focus)
:active — Pressed state
:disabled / [disabled] — Reduced opacity, no pointer events