Divider

A hairline that separates content. It runs horizontally or vertically, can fade in the accent color and can carry a small caption.

import { Divider } from 'jarvis-react-ui';

Variants

default uses the border color. accent draws a line in the accent color that fades out at both ends.

import { Divider } from 'jarvis-react-ui';

export default function Variants() {
    return (
        <div className="flex w-full flex-col gap-6">
            <Divider />
            <Divider variant="accent" />
        </div>
    );
}

With a label

label centers a small uppercase caption in a horizontal divider. Use it to title groups of content.

import { Divider } from 'jarvis-react-ui';

export default function WithLabel() {
    return (
        <div className="flex w-full flex-col gap-6">
            <Divider label="Telemetry" />
            <Divider label="Diagnostics" variant="accent" />
        </div>
    );
}

Vertical

orientation="vertical" stretches to the height of its flex row. Use it to group actions in a toolbar.

import { Copy, Download, Settings, Trash2 } from 'lucide-react';
import { Divider, IconButton } from 'jarvis-react-ui';

export default function Vertical() {
    return (
        <div className="flex items-center gap-1 border border-border rounded-[2px] p-1">
            <IconButton icon={Copy} label="Copy" size="sm" />
            <IconButton icon={Download} label="Download" size="sm" />
            <Divider orientation="vertical" className="mx-1" />
            <IconButton icon={Settings} label="Settings" size="sm" />
            <IconButton icon={Trash2} label="Delete" size="sm" variant="danger" />
        </div>
    );
}

Accessibility

• Renders a <div role="separator"> with aria-orientation set to horizontal or vertical.
• A label is plain text inside the separator; it is not a heading. Use a real heading when the caption titles a section.

API