Button styleguide variants

Purpose

The Button reference preview shows a standard save action and a destructive confirmation action. Both use the real product Button in an isolated React 19 fixture.

Import and props

import { Button } from '@takazudo/ui-components';

<Button variant="primary" onClick={save}>Save</Button>
<Button variant="danger" onClick={deleteDraft}>Delete draft</Button>

The variant prop selects the visual treatment. The two catalog variants use separate React fixture exports because their action states differ.

States and controls

Default increments a click counter. Danger increments a deletion counter. The default variant has label, visual variant, and disabled controls. The danger variant has a label control. In each preview, fixture base props are applied first, control defaults replace matching keys, and live controls replace those defaults. The explicit Reset fixture button remounts the selected variant and clears its local counter.

Keyboard and accessibility

Both examples are native buttons, so Space and Enter activate them. Each counter is an adjacent labeled output. The destructive variant does not submit a form or delete actual data.

Mobile and scale

The controls remain usable at narrow viewport widths. Product theme and display scale are inherited from the preview environment.

Architecture

The button implementation lives in packages/ui-components/src/button.tsx. The styleguide fixture is under styleguide/src/preview-react/fixtures.tsx.