Components

Buttons

Flat, sharp buttons with a 1px border and no radius. Three variants — ghost (default), primary (ink fill), and danger — plus hover, focus and disabled states.

Variants

Ghost · primary · danger

<button class="ds-button">Settings</button>
<button class="ds-button ds-button--primary">Save</button>
<button class="ds-button ds-button--danger">Reset</button>

States

Hover · focus · disabled

<button class="ds-button">Hover me</button>
<button class="ds-button" disabled>Disabled</button>

Web Component

<ds-button>

<ds-button>Settings</ds-button>
<ds-button variant="primary">Save</ds-button>
<ds-button variant="danger" disabled>Reset</ds-button>