Skip to main content

Divider

Every example on this page is live, drawn by the library's Storybook, where you can also change its props and see the result.

A horizontal or vertical separator with optional label.

Import​

import { Divider } from "~lib/layout/divider";

Props​

NameTypeRequiredDefaultDescription
orientation"horizontal" | "vertical"No"horizontal"Direction of the divider
labelstringNoN/ACentered label text
spacing"none" | "sm" | "md" | "lg"No"md"Margin around divider

Examples​

Horizontal​

Open Horizontal in Storybook

With Label​

Open With Label in Storybook

Large Spacing​

Open Large Spacing in Storybook

See Also​

  • Card - Bordered container
  • Fade - Fade transition