Separator

Layout

Stable

Visual separator line for dividing content sections. Can be horizontal or vertical. Decorative by default (hidden from accessibility tree).

Quick Import

Full Documentation

import { Separator } from "@cohere-ai/waypoint-ui/separator";

Live Preview

Loading Separator...

Open in Storybook Open in v0 View Docs

Props

Name	Type	Default	Description
`orientation`	`'horizontal' \| 'vertical'`	`'horizontal'`	Direction of the separator
`decorative`	`boolean`	`true`	Hides from accessibility tree when true

Examples

Horizontal Separator

Separator dividing two content sections

1 import { Separator } from '@cohere-ai/waypoint-ui/separator';
2  
3 <div>
4   <p>Section A</p>
5   <Separator />
6   <p>Section B</p>
7 </div>

Additional Resources

View in Storybook

Explore all variants and interactive examples

Full Documentation

Complete API reference, advanced usage, and accessibility info

Found an Issue?

If you've encountered a bug or have feedback about the Separator component, please report it to our team. Your feedback helps us improve Waypoint.

Available for all users • Issue will be created in Linear

Was this page helpful?

Your feedback helps us improve our documentation.

Need Help?

Check out the Whitelabeling Playground to explore customization options or visit the Developer Guide for integration help.

1	import { Separator } from '@cohere-ai/waypoint-ui/separator';
2
3	<div>
4	<p>Section A</p>
5	<Separator />
6	<p>Section B</p>
7	</div>