Button

Primary action control with three variants and three sizes. Renders <button>, or <a> when href is set.

Actions

Usage

import { Button } from "@zudo-sg/ui";

<Button variant="primary" onClick={save}>Save</Button>
<Button variant="secondary" href="/docs">Docs</Button>

As link

Block

Disabled

Sizes

Controls

Size

Variants

Controls

Variant

<Button href="/docs" variant="primary">Read the docs</Button>
<Button href="https://example.com" variant="secondary">External</Button>

Injected into the previews above. Button

/* Live CSS — edits inject into every preview above.
   Try overriding a component utility, e.g.:
   .btn { letter-spacing: 0.04em; } */