Divider

The Divider component is used to create a visual separation between content sections. It supports both horizontal and vertical orientations, different styles, and can include optional labels.

Import

import { Divider } from 'rebel-ui';

Usage

Basic Divider

The most basic usage of the Divider component.

<Divider />

With Label

Add a label to create a more meaningful separation.

<Divider label="OR" />

Different Styles

The Divider component comes with three style variants: solid, dashed, and dotted.

<Divider style="solid" label="Solid" />
<Divider style="dashed" label="Dashed" />
<Divider style="dotted" label="Dotted" />

Different Weights

Control the thickness of the divider using the weight prop.

<Divider weight="thin" label="Thin" />
<Divider weight="medium" label="Medium" />
<Divider weight="thick" label="Thick" />

Label Alignment

Position the label using the align prop.

<Divider align="start" label="Start Aligned" />
<Divider align="center" label="Center Aligned" />
<Divider align="end" label="End Aligned" />

Vertical Divider

Use the vertical orientation to separate content horizontally.

<div class="flex h-20">
    <div>Left Content</div>
    <Divider orientation="vertical" />
    <div>Right Content</div>
</div>

Vertical with Different Styles

Vertical dividers support the same style variants as horizontal ones.

<div class="flex h-20 gap-8">
    <div>Content</div>
    <Divider orientation="vertical" style="solid" />
    <div>Content</div>
    <Divider orientation="vertical" style="dashed" />
    <div>Content</div>
    <Divider orientation="vertical" style="dotted" />
    <div>Content</div>
</div>

Props

Prop	Type	Default	Description
orientation	'horizontal' \| 'vertical'	'horizontal'	The orientation of the divider
style	'solid' \| 'dashed' \| 'dotted'	'solid'	The visual style of the divider
weight	'thin' \| 'medium' \| 'thick'	'thin'	The thickness of the divider
align	'start' \| 'center' \| 'end'	'center'	The alignment of the label (horizontal only)
label	string	''	Optional text to display in the divider
decorative	boolean	false	Whether the divider is purely decorative

CSS Variables

The Divider component uses these CSS variables for customization:

.divider {
    --divider-gap: var(--rebel-spacing-4);
    --divider-color: var(--rebel-border);
    --divider-thickness-thin: 1px;
    --divider-thickness-medium: 2px;
    --divider-thickness-thick: 3px;
}

Accessibility

• Uses semantic HTML with appropriate ARIA attributes
• Includes role="separator" for non-decorative dividers
• Properly conveys orientation with aria-orientation
• When used decoratively, includes role="none"

Best Practices

1. Use Sparingly: Dividers should be used thoughtfully to create clear visual separation. Overuse can lead to a cluttered interface.

2. Consider Spacing: Often, proper spacing between elements can eliminate the need for explicit dividers.

3. Label Clarity: When using labels, keep them short and meaningful. Labels should provide context for the separation.

4. Vertical Divider Height: Ensure vertical dividers have a container with a defined height or use them in flex layouts.

5. Semantic Usage: Use the decorative prop when the divider is purely visual and doesn’t represent a semantic separation.