Skip to main content
Kaleidoscope

Separator

HW

A line to visually separate content

Default

A simple line to separate content.

Editable example
<Stack gap="m">
  <Text>Some content</Text>
  <Separator />
  <Text>Some other content</Text>
</Stack>

Best practices

  1. Any time you find yourself writing a style just to apply a 1px border between elements consider using a Separator instead.
  2. When using an OptionMenu, use the OptionMenuSeparator. It's just a regular Separator but it has the default spacing and outset to work within an OptionMenu pre-applied.

Vertical

A vertical separator to separate horizontal content.

Editable example
<Stack gap="m" direction="horizontal">
  <Text>Some content</Text>
  <Separator direction="vertical" />
  <Text>Some other content</Text>
</Stack>

Size

By default Separator will fill its flex or grid container. An explicit size can also be provided.

Editable example
<Stack gap="s">
  <Text>50% width separator</Text>
  <Separator size="50%" />
  <Text>24px wide separator</Text>
  <Separator size="24px" />
  <Text>24px tall separator</Text>
  <Separator direction="vertical" size="24px" />
</Stack>

Spacing

Use the spacing prop to add spacing around the Separator. If possible try to use gap on a Stack or flexbox/grid container before reaching for spacing.

Editable example
<Stack>
  <Text>Some content separated with spacing without using gap</Text>
  <Separator spacing="m" />
  <Text>Some other content</Text>
</Stack>

Outset

Extend the separator all the way to the edges of a container if it has padding. Just set the outset prop to the same amount of spacing as the container's padding.

Editable example
<Card>
  <Stack gap="s" padding="s">
    <MenuItem>Example option</MenuItem>
    <MenuItem>Another example option</MenuItem>
    <Separator outset="s" />
    <MenuItem>Separated example option</MenuItem>
  </Stack>
</Card>