Separator
Horizontal or vertical visual division between content groups.
Add it to your project
Eject the complete separator group, then import from its generated local barrel. The copied source and CSS belong to your application.
bash
pnpm exec toucan eject separatorbash
npx toucan eject separatorapp.tsx
import { Separator } from '@/components/toucan/separator';Use when
Adjacent content groups need a subtle visual boundary.
Avoid when
Spacing or a heading already communicates the grouping.
Example
Content above
Content below
API reference
Generated from packages/react/src/components. Only Toucan-specific props are listed; forwarded native props remain available as noted for each export.
Separator
Separator
Props type: SeparatorProps
| Name | Type | Default | Required | Description |
|---|---|---|---|---|
decorative | boolean | false | No | Remove separator semantics when the line is purely visual. |
orientation | "horizontal" | "vertical" | 'horizontal' | No | Horizontal or vertical orientation. |
spacing | 0 | 1 | 2 | 3 | "none" | 4 | 5 | 6 | 8 | 10 | 12 | 16 | 'none' | No | Space placed around the separator. |
Also accepts the native div attributes that are not replaced by a Toucan prop.
Type exports
SeparatorProps, SeparatorSpacing
ts
export type SeparatorSpacing = 0 | 1 | 2 | 3 | "none" | 4 | 5 | 6 | 8 | 10 | 12 | 16;Accessibility
- Uses separator semantics and reports orientation.
Token families
separatorcolor.border