Homepage
Homepage
ThemesThemesHooksHooksColorsColorsIconsIcons

Separator

Visually or semantically separates content.

View sourceReport an issueView in Playground
Tools for building high-quality, accessible UI.
ThemesPrimitivesIconsColors
<Text size="2">

  Tools for building high-quality, accessible UI.

  <Separator my="3" size="4" />

  <Flex gap="3" align="center">

    Themes

    <Separator orientation="vertical" />

    Primitives

    <Separator orientation="vertical" />

    Icons

    <Separator orientation="vertical" />

    Colors

  </Flex>

</Text>

API Reference

This component inherits props from the Separator primitive and supports common margin props.

PropTypeDefault
orientation
Responsive<"horizontal" | "vertical">
"horizontal"
size
Responsive<"1" | "2" | "3" | "4">
"1"
color
enum
"gray"
decorative
boolean
true

Examples

Size

Use the size prop to control the size of the separator. The largest step takes full width or height of the container.

<Flex direction="column" gap="4">

  <Separator orientation="horizontal" size="1" />

  <Separator orientation="horizontal" size="2" />

  <Separator orientation="horizontal" size="3" />

  <Separator orientation="horizontal" size="4" />

</Flex>

<Flex align="center" gap="4" height="96px">

  <Separator orientation="vertical" size="1" />

  <Separator orientation="vertical" size="2" />

  <Separator orientation="vertical" size="3" />

  <Separator orientation="vertical" size="4" />

</Flex>

Color

Use the color prop to assign a specific color.

<Flex direction="column" gap="3">

  <Separator color="indigo" size="4" />

  <Separator color="cyan" size="4" />

  <Separator color="orange" size="4" />

  <Separator color="crimson" size="4" />

</Flex>

Orientation

Use the orientation prop to control whether the separator is horizontal or vertical.

<Flex align="center" gap="4">

  <Separator orientation="horizontal" />

  <Separator orientation="vertical" />

</Flex>
PreviousSelect
NextSkeleton
Edit this page on GitHub.