useSeparator

Provides the accessibility implementation for a separator. A separator is a visual divider between two groups of content, e.g. groups of menu items or sections of a page.

Content above

Content below

Content left

Content right

Example

Separator.tsx

Separator.css

Example

Separator.tsx

Separator.css

import {Separator} from './Separator';

<div style={{color: 'var(--text-color)'}}>
  <div style={{display: 'flex', flexDirection: 'column', textAlign: 'center', gap: 8}}>
    Content above
    <Separator />
    Content below
  </div>
  <div style={{display: 'flex', flexDirection: 'row', marginTop: 16, height: 40, alignItems: 'center', gap: 8}}>
    Content left
    <Separator orientation="vertical" />
    Content right
  </div>
</div>

API

useSeparator(props: SeparatorProps): SeparatorAria

SeparatorProps

Name	Type	Default
`orientation`	`Orientation`	Default: `'horizontal'`
The orientation of the separator.
`elementType`	`string`	Default: —
The HTML element type that will be used to render the separator.

SeparatorAria

Name	Type
`separatorProps`	`DOMAttributes`
Props for the separator element.