Separator
Divides content horizontally or vertically. Default or Brand color; the horizontal one can carry a label.
Usage
Import the component and render it.
import { Separator } from 'src/components/Separator/Separator';
<Separator orientation="horizontal" variant="default" />Accessibility
Role: separator (role="separator" with aria-orientation).
- Not focusable: a separator is a static divider.
- A labelled separator uses the label as its accessible name (aria-label); the visible text is hidden from assistive technology to avoid repeating it.
- For purely decorative separators inside a list or menu, keep role="separator" so the structure stays announced.
Orientation
Set the orientation prop: Horizontal is "horizontal", Vertical is "vertical".
<Separator orientation="horizontal" />
<Separator orientation="vertical" />Variant
Set the variant prop: Default is "default", Brand is "brand".
<Separator variant="default" />
<Separator variant="brand" />Used in
Separator is part of Accordion, ButtonGroup, Card, CommandMenu, Dialog, Drawer, Footer, Form, NavigationBar and Sidebar.