Components

Button variants

Sizes, full-width, icon-only, loading, button groups, and split buttons — all extending the base button.

Sizes

sm · default · lg

<button class="ds-button ds-button--sm">Small</button>
<button class="ds-button">Default</button>
<button class="ds-button ds-button--lg">Large</button>

Icon-only · block · loading

States & shapes

<button class="ds-button ds-button--icon" aria-label="Add"><svg…></svg></button>
<button class="ds-button ds-button--primary ds-button--loading">Saving</button>
<button class="ds-button ds-button--block">Block button</button>

Button group

.ds-button-group

<div class="ds-button-group">
  <button class="ds-button">Day</button>
  <button class="ds-button">Week</button>
  <button class="ds-button">Month</button>
</div>

React

JSX

import { ButtonGroup, IconButton, SplitButton } from "@diametral/design-system/react";

<ButtonGroup><button className="ds-button">Day</button>…</ButtonGroup>
<IconButton label="Add" variant="primary"><PlusIcon /></IconButton>
<SplitButton variant="primary" onMain={save} menu={<div className="ds-menu">…</div>}>Save</SplitButton>

// the base Button also takes size / loading / block:
<Button size="lg" loading>Saving</Button>