Button
A flexible button component available as plain CSS classes, React components, and Astro components.
Usage
<button class="zui-button">Click me</button>
<a href="/action" class="zui-button">Link as button</a><button class="zui-button">Click me</button>
<a href="/action" class="zui-button">Link as button</a>import { Button } from '@mrmartineau/zui/react'
<Button>Click me</Button>
<Button href="/action">Link as button</Button>---
import { Button } from '@mrmartineau/zui/astro'
---
<Button>Click me</Button>
<Button href="/action">Link as button</Button>Button Types
Text-only, text with icon, and icon-only buttons at each size.
xs
sm
md
lg
xl
Variants
Controls how the accent colour is applied.
<button class="zui-button">Fill (default)</button>
<button class="zui-button zui-button-variant-subtle">Subtle</button>
<button class="zui-button zui-button-variant-outline">Outline</button>
<button class="zui-button zui-button-variant-ghost">Ghost</button>
<button class="zui-button zui-button-variant-link">Link</button><button class="zui-button">Fill (default)</button>
<button class="zui-button zui-button-variant-subtle">Subtle</button>
<button class="zui-button zui-button-variant-outline">Outline</button>
<button class="zui-button zui-button-variant-ghost">Ghost</button>
<button class="zui-button zui-button-variant-link">Link</button>import { Button } from '@mrmartineau/zui/react'
<Button>Fill (default)</Button>
<Button variant="subtle">Subtle</Button>
<Button variant="outline">Outline</Button>
<Button variant="ghost">Ghost</Button>
<Button variant="link">Link</Button>---
import { Button } from '@mrmartineau/zui/astro'
---
<Button>Fill (default)</Button>
<Button variant="subtle">Subtle</Button>
<Button variant="outline">Outline</Button>
<Button variant="ghost">Ghost</Button>
<Button variant="link">Link</Button>Accents
Sets the colour palette.
<button class="zui-button">Theme (default)</button>
<button class="zui-button zui-button-color-accent">Accent</button>
<button class="zui-button zui-button-color-destructive">Destructive</button><button class="zui-button">Theme (default)</button>
<button class="zui-button zui-button-color-accent">Accent</button>
<button class="zui-button zui-button-color-destructive">Destructive</button>import { Button } from '@mrmartineau/zui/react'
<Button>Theme (default)</Button>
<Button accent="accent">Accent</Button>
<Button accent="destructive">Destructive</Button>---
import { Button } from '@mrmartineau/zui/astro'
---
<Button>Theme (default)</Button>
<Button accent="accent">Accent</Button>
<Button accent="destructive">Destructive</Button>Sizes
Five size options from extra small to extra large.
<button class="zui-button zui-button-size-xs">Extra small</button>
<button class="zui-button zui-button-size-sm">Small</button>
<button class="zui-button">Medium (default)</button>
<button class="zui-button zui-button-size-lg">Large</button>
<button class="zui-button zui-button-size-xl">Extra large</button><button class="zui-button zui-button-size-xs">Extra small</button>
<button class="zui-button zui-button-size-sm">Small</button>
<button class="zui-button">Medium (default)</button>
<button class="zui-button zui-button-size-lg">Large</button>
<button class="zui-button zui-button-size-xl">Extra large</button>import { Button } from '@mrmartineau/zui/react'
<Button size="xs">Extra small</Button>
<Button size="sm">Small</Button>
<Button>Medium (default)</Button>
<Button size="lg">Large</Button>
<Button size="xl">Extra large</Button>---
import { Button } from '@mrmartineau/zui/astro'
---
<Button size="xs">Extra small</Button>
<Button size="sm">Small</Button>
<Button>Medium (default)</Button>
<Button size="lg">Large</Button>
<Button size="xl">Extra large</Button>Shapes
Controls border-radius. Includes squircle (limited browser support, uses corner-shape: superellipse).
<button class="zui-button">Default (rounded)</button>
<button class="zui-button zui-button-shape-hard">Hard (square)</button>
<button class="zui-button zui-button-shape-soft">Soft (pill)</button>
<button class="zui-button zui-button-shape-squircle">Squircle</button><button class="zui-button">Default (rounded)</button>
<button class="zui-button zui-button-shape-hard">Hard (square)</button>
<button class="zui-button zui-button-shape-soft">Soft (pill)</button>
<button class="zui-button zui-button-shape-squircle">Squircle</button>import { Button } from '@mrmartineau/zui/react'
<Button>Default (rounded)</Button>
<Button shape="hard">Hard (square)</Button>
<Button shape="soft">Soft (pill)</Button>
<Button shape="squircle">Squircle</Button>---
import { Button } from '@mrmartineau/zui/astro'
---
<Button>Default (rounded)</Button>
<Button shape="hard">Hard (square)</Button>
<Button shape="soft">Soft (pill)</Button>
<Button shape="squircle">Squircle</Button>Icon Buttons
Square 1:1 buttons for single icons. Uses the icon prop. Always include an aria-label.
<button class="zui-button zui-button-icon" aria-label="Settings">
<i class="ph ph-gear"></i>
</button>
<button class="zui-button zui-button-icon zui-button-variant-outline" aria-label="Edit">
<i class="ph ph-pencil-simple"></i>
</button>
<button class="zui-button zui-button-icon zui-button-variant-ghost" aria-label="Close">
<i class="ph ph-x"></i>
</button>
<button class="zui-button zui-button-icon zui-button-color-destructive" aria-label="Delete">
<i class="ph ph-trash"></i>
</button><button class="zui-button zui-button-icon" aria-label="Settings">
<i class="ph ph-gear"></i>
</button>
<button class="zui-button zui-button-icon zui-button-variant-outline" aria-label="Edit">
<i class="ph ph-pencil-simple"></i>
</button>import { Button } from '@mrmartineau/zui/react'
import { Gear, PencilSimple } from '@phosphor-icons/react'
<Button icon aria-label="Settings">
<Gear />
</Button>
<Button icon variant="outline" aria-label="Edit">
<PencilSimple />
</Button>---
import { Button } from '@mrmartineau/zui/astro'
---
<Button icon aria-label="Settings">
<i class="ph ph-gear"></i>
</Button>
<Button icon variant="outline" aria-label="Edit">
<i class="ph ph-pencil-simple"></i>
</Button>Icon Button Sizes
Icon Button Shapes
Combining Variant + Accent
<button class="zui-button zui-button-variant-outline zui-button-color-accent">Outline Accent</button>
<button class="zui-button zui-button-variant-ghost zui-button-color-destructive">Ghost Destructive</button>
<button class="zui-button zui-button-variant-subtle zui-button-color-theme">Subtle Theme</button><button class="zui-button zui-button-variant-outline zui-button-color-accent">
Outline Accent
</button>
<button class="zui-button zui-button-variant-ghost zui-button-color-destructive">
Ghost Destructive
</button>import { Button } from '@mrmartineau/zui/react'
<Button variant="outline" accent="accent">
Outline Accent
</Button>
<Button variant="ghost" accent="destructive">
Ghost Destructive
</Button>---
import { Button } from '@mrmartineau/zui/astro'
---
<Button variant="outline" accent="accent">
Outline Accent
</Button>
<Button variant="ghost" accent="destructive">
Ghost Destructive
</Button>Kitchen Sink
<button class="zui-button zui-button-variant-outline zui-button-color-destructive zui-button-size-lg zui-button-shape-soft">
Large Pill Outline Destructive
</button>Variants × Accents
fill
subtle
outline
ghost
link
Sizes × Shapes
default
hard
soft
squircle
Disabled States
<button class="zui-button" disabled>Fill</button>
<button class="zui-button zui-button-variant-outline" disabled>Outline</button>import { Button } from '@mrmartineau/zui/react'
<Button disabled>Fill</Button>
<Button variant="outline" disabled>Outline</Button>---
import { Button } from '@mrmartineau/zui/astro'
---
<Button disabled>Fill</Button>
<Button variant="outline" disabled>Outline</Button>As Links
<a href="/action" class="zui-button">Default link</a>
<a href="/action" class="zui-button zui-button-variant-outline zui-button-color-accent">Outline link</a>
<a href="/action" class="zui-button zui-button-variant-link">Text link</a>import { Button } from '@mrmartineau/zui/react'
<Button href="/action">Default link</Button>
<Button href="/action" variant="outline" accent="accent">Outline link</Button>
<Button href="/action" variant="link">Text link</Button>---
import { Button } from '@mrmartineau/zui/astro'
---
<Button href="/action">Default link</Button>
<Button href="/action" variant="outline" accent="accent">Outline link</Button>
<Button href="/action" variant="link">Text link</Button>