Separator

import { Heading } from "@hel/ui/heading"
import { Separator } from "@hel/ui/separator"
import { Stack } from "@hel/ui/stack"

When to use it#

Use a separator when two groups of content next to each other could be mistaken for one: a header and its body, the rows of a list, the items in a toolbar. It says "this is a different group".

Space is often enough on its own. If the groups are already clear from spacing or headings, a line only adds noise. Do not use a separator as a decoration, and do not stack several of them.

Import#

Copyimport { Separator } from "@hel/ui/separator"

Usage#

A separator is horizontal by default, and fills the width of its parent.

Copy<Separator />

Screen readers announce it as a divider between the two groups, with its orientation.

Examples#

Vertical#

Set orientation="vertical" to divide items in a row. A vertical separator takes the height of its parent, so the row needs a height of its own, or the line will not show.

import { Flex } from "@hel/ui/flex"
import { Separator } from "@hel/ui/separator"
import { Text } from "@hel/ui/text"

Props#

Separator#