Separator

Import#

import { Separator } from '@volue/wave-react';

Examples#

Basic#

Separator displays a thin horizontal or vertical line, and renders a div tag.

Orientation#

Provide the orientation property and set it to either horizontal or vertical. Separator will extend to parent element's width/height.

If the vertical orientation is used, make sure that the parent element is assigned a height or provide explicit size via size prop.

Size#

Use size prop to control the size of the Separator. When not provided, the separator takes full width or height of the container.

Specifying size is useful when using vertical separators to visually split a collection of horizontally aligned items (such as buttons) into related groups.

Decorative#

Separator should generally be used when there is a requirement for a semantic divider element. Where there is need for a purely decorative Separator, isDecorative property should be included.

Accessibility#

Separator implements the WAI-ARIA Separator Role​ and represents a thematic break.

Use Separator to create groupings and divide sections of content from each other.

API Reference#