# Divider

> Separates sections of content, optionally with a short label such as “or”.

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

Divider marks a change of topic between sections. It renders a native thematic break (<hr>), or a labelled separator when it carries text. Inside menus and toolbars, use the lighter Separator.

## Import

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

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

## Examples

### Basic

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

export function Basic() {
  return (
    <div style={{ width: '100%' }}>
      <Text size="sm">Signature details</Text>
      <Divider />
      <Text size="sm">Deployment settings</Text>
    </div>
  );
}
```

### With label

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

export function Labelled() {
  return (
    <Stack gap={0} style={{ width: '100%', maxWidth: 360 }}>
      <Button variant="outline" fullWidth>
        Continue with Microsoft
      </Button>
      <Divider label="or" spacing={4} />
      <Button fullWidth>Continue with email</Button>
    </Stack>
  );
}
```

### Tone and style

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

export function Variants() {
  return (
    <div style={{ width: '100%' }}>
      <Divider tone="subtle" label="Subtle" labelPosition="start" />
      <Divider tone="strong" label="Strong" />
      <Divider variant="dashed" label="Dashed" labelPosition="end" />
    </div>
  );
}
```

## API reference

| Component | Prop | Type | Default | Description |
| --- | --- | --- | --- | --- |
| Divider | `label` | `ReactNode` | None | Text shown in the line. |
| Divider | `labelPosition` | `'start' \| 'center' \| 'end'` | `'center'` | Label alignment. |
| Divider | `spacing` | `SpaceKey` | `6` | Vertical margin. |
| Divider | `tone` | `'subtle' \| 'default' \| 'strong'` | `'default'` | Line strength. |
| Divider | `variant` | `'solid' \| 'dashed'` | `'solid'` | Line style. |

## Accessibility

- Unlabelled dividers are <hr> elements, announced as separators.
- Labelled dividers use role="separator" and expose their text.
- Lines become CanvasText in Windows forced-colours mode.

## Guidelines

**Do**

- Use between distinct sections.

**Don’t**

- Use a divider under every heading; whitespace usually suffices.

## Related

- https://stanceui.com/components/separator