Separator renders a div with role="separator" and an accessible orientation. It uses the Base UI separator contract, including native props, refs, and render composition. Import SeparatorProps from the same entry point.
Usage
Orientation and appearance
orientation defaults to horizontal. Margins default to zero in both orientations. Horizontal separators fill the available width. Vertical separators stretch along their flex container. Give a standalone vertical separator a height. Control spacing through the parent layout, or use native style or className for explicit margins and line color. Base UI also accepts functions of the orientation for these props.
Labeled dividers
Compose text and divider lines in a separate layout. Give the layout an accessible name and make the individual lines presentational.Migration
Replace the former horizontal helper withSeparator. Remove noMargin, since margins now default to zero. To keep the former default spacing, add style={{ marginBlock: 'var(--t-spacing-3)' }}. Replace color with style={{ backgroundColor: color }}. Move text and textPosition into a labeled composition. Replace separators used only for invisible spacing with layout spacing.
Props
string | ((state: SeparatorState) => string | undefined)
CSS class or function of the separator orientation.
"horizontal" | "vertical"
default:"horizontal"
Direction of the divider: horizontal or vertical.
ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, SeparatorState>
Element or render function composed with the native separator props and ref.
CSSProperties | ((state: SeparatorState) => CSSProperties | undefined)
Native style or function of the separator orientation. Use it for spacing and line color.