Separator

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 separates groups without adding a line.

Playground

Usage

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.

<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

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.