# Text

> Body copy with size, weight and semantic tone from the type scale.

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

Text sets every piece of non-heading copy. Tones are semantic. Muted is for secondary information and subtle is for tertiary detail, and both meet AA contrast. The status tones are only for messages about state. It renders a paragraph by default; use `as="span"` inline.

## Import

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

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

## Examples

### Basic

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

export function Basic() {
  return <Text>Signatures are deployed to every mailbox in your organisation automatically.</Text>;
}
```

### Tones

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

export function Tones() {
  return (
    <Stack gap={2}>
      <Text tone="default">Default: primary content</Text>
      <Text tone="muted">Muted: secondary information</Text>
      <Text tone="subtle">Subtle: tertiary detail</Text>
      <Text tone="success">Success: deployment completed</Text>
      <Text tone="warning">Warning: 3 users missing a job title</Text>
      <Text tone="danger">Danger: Exchange connection failed</Text>
    </Stack>
  );
}
```

### Sizes

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

export function Sizes() {
  return (
    <Stack gap={2}>
      {(['xl', 'lg', 'md', 'sm', 'xs', '2xs'] as const).map((s) => (
        <Text key={s} size={s}>
          {s}: Consistent foundations
        </Text>
      ))}
    </Stack>
  );
}
```

### Truncation and clamping

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

export function Truncation() {
  return (
    <Stack gap={3} style={{ maxWidth: 280 }}>
      <Text size="sm" truncate>
        Master services agreement, Acme Holdings International Ltd (revised)
      </Text>
      <Text size="sm" truncate={2} tone="muted">
        This agreement governs the provision of design, engineering and support services between the
        parties listed in schedule one.
      </Text>
    </Stack>
  );
}
```

## API reference

| Component | Prop | Type | Default | Description |
| --- | --- | --- | --- | --- |
| Text | `as` | `keyof JSX.IntrinsicElements` | `'p'` | Element to render. |
| Text | `size` | `'2xs' \| 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'` | `'md'` | Font size token. |
| Text | `weight` | `'regular' \| 'medium' \| 'semibold' \| 'bold'` | None | Font weight token. |
| Text | `tone` | `'default' \| 'muted' \| 'subtle' \| 'danger' \| 'success' \| 'warning' \| 'inverse' \| 'inherit'` | `'default'` | Semantic colour. |
| Text | `align` | `'start' \| 'center' \| 'end'` | None | Alignment. |
| Text | `truncate` | `boolean \| number` | None | true truncates one line; a number clamps lines. |
| Text | `eyebrow` | `boolean` | None | Uppercase label with wide tracking. |
| Text | `tabular` | `boolean` | None | Tabular figures for aligned numbers. |
| Text | `leading` | `'tight' \| 'snug' \| 'normal' \| 'relaxed'` | `'normal'` | Line height. |

## Accessibility

- Every tone meets WCAG AA (4.5:1) on canvas and surface backgrounds in all three themes.
- Never rely on colour alone. Pair status tones with an icon or words.
- Truncated text should be available in full elsewhere, such as a tooltip or detail view.

## Guidelines

**Do**

- Use muted for secondary metadata.

**Don’t**

- Use subtle for essential information.
- Use danger tone for anything other than errors.

## Related

- https://stanceui.com/components/heading
- https://stanceui.com/components/caption