Divider

A thin separator line between content, horizontal or vertical, with an optional centered label.

import { Divider } from '@lobehub/ui/base-ui';

Layout

Basic

Loading preview

Divider properties

children: null | string | number | bigint | false | true | ReactElement<unknown, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | Promise<AwaitedReactNode>
dashed: boolean
Defaults to false.
orientation: 'horizontal' | 'vertical'
Defaults to "horizontal".
ref: null | (instance: HTMLDivElement | null) => void | (() => VoidOrUndefinedOnly) | DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES] | RefObject<HTMLDivElement | null>
Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref).

Also accepts all native HTML and ARIA attributes.

Divider renders the @base-ui/react Separator (role="separator", aria-orientation). Standard div attributes are forwarded.

The default margin is 0 in both orientations. Add style={{ marginBlock: 12 }} where spacing is wanted.

TSX

import { Divider } from '@lobehub/ui/base-ui';

<Divider dashed />;
<Divider orientation="vertical" />;

Remove style={{ margin: 0 }} / marginBlock: 0 overrides; they are the default now.
type="vertical" → orientation="vertical".
titlePlacement, orientationMargin, plain, variant and size are not supported.