Separator

A hairline between two groups of controls in a toolbar-like row. It carries no margin; the row's gap puts space on either side of it, which is what makes the line read as a divider and not as a group of its own.

import { Separator } from '@basmilius/react-ui';

import { Bold, Italic, Link, List, ListOrdered } from 'lucide-react';
import { ButtonGroup, IconButton, Separator } from '@basmilius/react-ui';

export default function SeparatorDemo() {
    return (
        <div className="flex w-72 flex-col gap-3">
            <div className="flex items-center gap-2">
                <ButtonGroup>
                    <IconButton icon={Bold} label="Bold" size="sm" />
                    <IconButton icon={Italic} label="Italic" size="sm" />
                </ButtonGroup>
                <Separator />
                <ButtonGroup>
                    <IconButton icon={List} label="Bulleted list" size="sm" />
                    <IconButton icon={ListOrdered} label="Numbered list" size="sm" />
                </ButtonGroup>
                <Separator />
                <IconButton icon={Link} label="Link" size="sm" />
            </div>
            <Separator orientation="horizontal" />
            <p className="text-xs text-text-muted">A horizontal separator runs the full width.</p>
        </div>
    );
}

It is vertical and 16 pixels tall by default; orientation="horizontal" runs the full width. It is hidden from screen readers. Between two groups of menu rows use Menu.Separator instead.

Prop	Type	Default
orientation	'vertical' | 'horizontal'	'vertical'
className	string
ref	Ref<HTMLSpanElement>

SeparatorProps is an exported type.