# Caption

> Small supporting text for figures, timestamps and footnotes.

Category: Typography · Status: stable · Package: @bindshq/stance-react@0.1.1 · Docs: https://stanceui.com/components/caption

Caption is 12px secondary text. Use it with `as="figcaption"` under figures, and for timestamps, footnotes and legal small print. For text that helps someone fill in a form field, use the description of FormField, which is linked to the control.

## Import

```tsx
import { Caption } from '@bindshq/stance-react';
```

Styles are imported once per app: `@bindshq/stance-tokens/css` and `@bindshq/stance-react/styles.css`.

## Examples

### Basic

```tsx
import { Caption, Stack, Text } from '@bindshq/stance-react';

export function Basic() {
  return (
    <Stack gap={1}>
      <Text size="sm" weight="medium">
        Deployment completed
      </Text>
      <Caption>11 November 2026 at 09:42 · by Priya Raman</Caption>
    </Stack>
  );
}
```

### Figure caption

```tsx
import { Caption } from '@bindshq/stance-react';

export function Figure() {
  return (
    <figure style={{ margin: 0, width: 280 }}>
      <div
        style={{ height: 120, borderRadius: 8, background: 'var(--st-color-bg-muted)' }}
        aria-hidden="true"
      />
      <Caption as="figcaption" align="center" style={{ marginTop: 8 }}>
        Signature preview in Outlook for Mac
      </Caption>
    </figure>
  );
}
```

### Tones

```tsx
import { Caption, Stack } from '@bindshq/stance-react';

export function Tones() {
  return (
    <Stack gap={1}>
      <Caption tone="default">Default</Caption>
      <Caption>Muted</Caption>
      <Caption tone="subtle">Subtle</Caption>
      <Caption tone="danger">Danger</Caption>
    </Stack>
  );
}
```

## API reference

| Component | Prop | Type | Default | Description |
| --- | --- | --- | --- | --- |
| Caption | `as` | `keyof JSX.IntrinsicElements` | `'p'` | Element; use figcaption inside figures. |
| Caption | `tone` | `'muted' \| 'subtle' \| 'default' \| 'danger'` | `'muted'` | Colour. |
| Caption | `align` | `'start' \| 'center' \| 'end'` | None | Alignment. |

## Accessibility

- Muted captions meet 4.5:1 contrast in every theme.
- Use figcaption so the caption is associated with its figure.

## Guidelines

**Do**

- Keep captions to one or two lines.

**Don’t**

- Put essential instructions in captions.

## Related

- https://stanceui.com/components/text
- https://stanceui.com/components/image