Build / Atoms

Button

atom
play-fn

The primary action control.

Defaults to type="button" — an explicit opt-in is required to submit a form, which avoids the single most common accidental-submit bug.

import { Button } from '@meetcard/deck'

Example

<Button variant="primary">Share card</Button> <Button variant="secondary" iconStart={<PlusIcon />}>Add to CRM</Button>

Stories

Every preview below is the real component, rendered in this page from the same story Storybook runs. The width control resizes each preview's container; CSS media queries still follow the browser window, so breakpoint behaviour is worth checking in Storybook.

The one action a surface exists for. One per view, so it stays the obvious one.

Primary

Source

const Primary = () => <Button onClick={fn()} variant="primary">Share card</Button>;

Paired with a primary action, or used alone for lower-emphasis choices.

Secondary

Source

const Secondary = () => <Button onClick={fn()} variant="secondary">Add to CRM</Button>;

Lowest emphasis — toolbars, card overflow rows, and dismissals.

Ghost

Source

const Ghost = () => <Button onClick={fn()} variant="ghost">Cancel</Button>;

Irreversible actions only. Always confirm before the action runs.

Destructive

Source

const Destructive = () => <Button onClick={fn()} variant="destructive">Delete card</Button>;

Every size. md is the default; sm for dense rows and cards, lg for a screen's single call to action.

Sizes

Source

const Sizes = () => <Stack direction="row" gap={12} align="center">
    <Button onClick={fn()} size="sm">Small
              </Button>
    <Button onClick={fn()} size="md">Medium
              </Button>
    <Button onClick={fn()} size="lg">Large
              </Button>
</Stack>;

Icons are decorative — the label carries the accessible name.

With Icon

Source

const WithIcon = () => <Button onClick={fn()} iconStart={<ShareIcon />}>Share card</Button>;

Disabled. Prefer explaining why nearby — a disabled button on its own is a dead end.

Disabled

Source

const Disabled = () => <Button onClick={fn()} disabled>Share card</Button>;

Fills its container — the usual choice inside a card footer or a form.

Full Width

Source

const FullWidth = () => <Button onClick={fn()} fullWidth>Share card</Button>;

Proves the shared preview actually loaded Deck's token stylesheet: the primary surface must resolve to the Signal Green action token in light mode, or its derived counterpart in dark.

Css Check

Source

const CssCheck = () => <Button onClick={fn()} variant="primary">Share card</Button>;

Props

Prop	Type	Default	Description
`fullWidth`	`boolean`	`false`	Stretch to fill the container — useful in card footers and forms.
`iconEnd`	`ReactNode`	—	Decorative trailing icon. Hidden from assistive tech automatically.
`iconStart`	`ReactNode`	—	Decorative leading icon. Hidden from assistive tech automatically.
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	—
`type`	`—`	`'button'`	—
`variant`	`'primary' \| 'secondary' \| 'ghost' \| 'destructive'`	`'primary'`	—

Also accepts everything from ButtonHTMLAttributes, so id, data-* and event handlers pass straight through.