Separator

A separator element accessible to screen readers.

import { Separator } from 'base-ui-solid/separator';
import styles from './index.module.css';

export default function ExampleSeparator() {
  return (
    <div class={styles.Container}>
      <a href="#" class={styles.Link}>
        Home
      </a>
      <a href="#" class={styles.Link}>
        Pricing
      </a>
      <a href="#" class={styles.Link}>
        Blog
      </a>
      <a href="#" class={styles.Link}>
        Support
      </a>

      <Separator orientation="vertical" class={styles.Separator} />

      <a href="#" class={styles.Link}>
        Log in
      </a>
      <a href="#" class={styles.Link}>
        Sign up
      </a>
    </div>
  );
}

Anatomy

Import the component and use it as a single part:

Anatomy

import { Separator } from 'base-ui-solid/separator';

<Separator />;

API reference

Prop

Type

Default

orientationOrientation'horizontal'

The orientation of the separator.Orientation

classfunction—

CSS class applied to the element, or a function that returns a class based on the component’s state.JSX.ClassValue | ((state) => JSX.ClassValue)

stylefunction—

Style applied to the element, or a function that returns a style object based on the component’s state.JSX.CSSProperties | string | ((state) => JSX.CSSProperties | string | undefined)

renderfunction—

Replace the default element with a tag name, component, or render function.keyof JSX.IntrinsicElements | Component | ((props, state) => JSX.Element)

Data attributes

Name

Type

Default

data-orientationUnion—

Indicates the orientation of the separator.'horizontal' | 'vertical'

Attribute	Description	-
`data-orientation`	Indicates the orientation of the separator.

Separator.State

type SeparatorState = {
  /** The orientation of the separator. */
  orientation: Orientation;
};