# Separator

A separator draws a thin line between groups of content.

A separator is a one-pixel line that divides groups of content, such as sections of a card or sets of buttons in a toolbar. Often space alone does the job: a larger `gap` on a [Flex](/docs/flex) separates groups without adding a line.


## Usage

```tsx
import { Card, Flex, Heading, Separator, Text } from '@kushagradhawan/kookie-ui';

export function PlanSummary() {
  return (
    <Card>
      <Flex direction="column" gap="3">
        <Heading size="3">Pro plan</Heading>
        <Text size="2" emphasis="medium">
          Unlimited projects and priority support.
        </Text>
        <Separator />
        <Flex justify="between">
          <Text size="2">Billed monthly</Text>
          <Text size="2" weight="medium">$24</Text>
        </Flex>
      </Flex>
    </Card>
  );
}
```

## Best practices

**Try space before a line.** Group related items with a small gap and unrelated ones with a larger gap. Add a separator only when space can't show where one group ends.

**Don't separate every item.** A line between each row of a list adds noise. Use one between groups, not between members of a group.

**Hide a purely visual line.** A separator is announced to screen readers by default. Set `decorative` when the line only draws a border and divides nothing a reader should know about.

## Orientation

`orientation` is `horizontal` by default, a line 1 pixel tall across the full width of its parent. `vertical` is 1 pixel wide and stretches to the height of its row, for dividing groups in a row. Outside a Flex it is as tall as a parent with a set height. `orientation` accepts a responsive object, so a separator can turn with a layout that switches from row to column.

The separator has no margin props. Set the space around it with `gap` on the parent.

## Examples

### Toolbar groups

A vertical separator takes the height of its row, whatever the Flex's `align`, so the line runs the full height of the buttons.

```tsx
<Flex gap="2">
  <Button iconOnly emphasis="quiet" aria-label="Bold">
    <HugeiconsIcon icon={TextBoldIcon} strokeWidth={1.75} />
  </Button>
  <Separator orientation="vertical" />
  <Button iconOnly emphasis="quiet" aria-label="Insert link">
    <HugeiconsIcon icon={Link01Icon} strokeWidth={1.75} />
  </Button>
</Flex>
```

### A softer line

`light` draws the line at a lower contrast, for separators inside dense content where the default line is too strong.

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `orientation` | `'horizontal' \| 'vertical'`, responsive | `'horizontal'` | The direction of the line |
| `color` | `AccentColor` | `'gray'` | The colour of the line |
| `light` | `boolean` | `false` | Draws the line at a lower contrast |
| `decorative` | `boolean` | `false` | Hides the separator from screen readers by removing its `separator` role |

Separator renders a `span` and accepts every attribute of the HTML `span` element.

## Accessibility

- **Role:** By default the separator has `role="separator"` and an `aria-orientation` that matches the line. A responsive `orientation` announces the one drawn at the current screen width.
- **Decorative:** With `decorative` it has no role, so screen readers skip it.
- **Focus:** The separator never takes focus.