OverviewIntroductionIntroductionUsageUsageThemeThemeLayoutBoxBoxContainerContainerFlexFlex GridGridSectionSectionTypographyTextText HeadingHeadingComponentsAccordionAccordionAlert DialogAlert DialogAvatarAvatarBadgeBadgeBlockquoteBlockquoteButtonButton CalloutCallout CardCard CheckboxCheckbox ChipChip Code BlockCode Block Code EditorCode Editor Color FieldColor Field Data ListData ListDefinition ListDefinition ListDialogDialogHover CardHover CardIcon ButtonIcon Button InsetInset Image FieldImage Field LabelLabel MarkerMarkerPermanent LinkPermanent LinkPopoverPopoverProgressProgressRadio Card GroupRadio Card GroupScreenshotScreenshotScroll AreaScroll AreaSegmented ControlSegmented ControlSelectSelectSeparatorSeparator SkeletonSkeleton SpinnerSpinner StatusStatus SwitchSwitch TableTableTabsTabsText AreaText Area Text FieldText FieldTooltipTooltipZoomableZoomableFormattingCodeCodeEmEmKbdKbdQuoteQuoteStrongStrongIconsLogo IconLogo IconFeature IconFeature IconProvider IconProvider IconIcon PanelIcon PanelNavigationPage NavPage NavQuick NavQuick NavUtilitiesDesign System ProviderDesign System ProviderRecipesCopy ButtonCopy Button Copy ChipCopy Chip Theme ToggleTheme Toggle

Separator

Displays a vertical or a horizontal line.

 <Separator />

API Reference

Prop	Type	Default
`decorative`	`boolean`	`true`
`orientation`	`Responsive<"horizontal" \| "vertical">`	`"horizontal"`
`size`	`Responsive<"1" \| "2" \| "3" \| "4">`	`"1"`

Unlike in the Radix primitive, decorative prop is set to true by default

This component is based on the Radix Separator primitive. View source

Examples

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>

You can change the separator orientation across breakpoints using the object syntax.

Single Sign-OnDirectory SyncAudit LogsAPI Reference

 <Flex
  align={{ initial: 'start', md: 'center' }}
  direction={{ initial: 'column', md: 'row' }}
  gap="4"
>
  <Text color="gray" size="2" trim="both">
    Single Sign-On
  </Text>
  <Text color="gray" size="2" trim="both">
    Directory Sync
  </Text>
  <Text color="gray" size="2" trim="both">
    Audit Logs
  </Text>
  <Separator orientation={{ initial: 'horizontal', md: 'vertical' }} />
  <Text color="gray" size="2" trim="both">
    API Reference
  </Text>
</Flex>

Sizes

Use the size prop to control the size of the separator. Size 3 separator takes full width or height of the container.

You can change the separator size across breakpoints using the object syntax.

 <Flex direction="column" gap="4">
  <Separator orientation="horizontal" size="4" />
  <Separator orientation="horizontal" size="3" />
  <Separator orientation="horizontal" size="2" />
  <Separator orientation="horizontal" size="1" />
</Flex>

 <Flex align="center" gap="4" height="96px">
  <Separator orientation="vertical" size="4" />
  <Separator orientation="vertical" size="3" />
  <Separator orientation="vertical" size="2" />
  <Separator orientation="vertical" size="1" />
</Flex>