Divider
Visual separator for content sections. Can be horizontal or vertical, with optional text.
Horizontal Divider
Default horizontal divider
Content above
Content below
Divider with Text
Horizontal divider with centered text
OR
Vertical Divider
Vertical divider for inline content
Item 1Item 2Item 3
| Prop | Type | Default | Description |
|---|---|---|---|
orientation | 'horizontal' | 'vertical' | 'horizontal' | Orientation of the divider |
children | React.ReactNode | undefined | Optional text to display in the middle of the divider |
check_circleWhen to use
- Use to separate distinct sections of content
- Use with text to indicate alternative actions (e.g., "OR")
- Use vertical dividers to separate inline items
cancelWhen not to use
- Don't use multiple dividers in close proximity
- Don't use dividers where whitespace would suffice
- Don't use as a decorative element