Caption

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>
  );
}

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>
  );
}

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>
  );
}