No Preview

Sorry, but you either have no stories or none are selected somehow.

If the problem persists, check the browser console, or the terminal you've run Storybook from.

Divider

A divider visually separates two pieces of content.


Default

Open in CodeSandbox
NameDescriptionDefault
wrapper
Accessibility wrapper for content when presented.
ShorthandProps<{ as?: "div"; } & Pick<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof HTMLAttributes<...>> & { ...; } & { ...; }>
-
as
"div"
-
alignContent
Determines the alignment of the content within the divider.
"start""end""center"
-
appearance

A divider can have one of the preset appearances. When not specified, the divider has its default appearance.

"strong""brand""subtle"
-
inset
Adds padding to the beginning and end of the divider.
boolean
false
vertical
A divider can be horizontal (default) or vertical.
boolean
false

Stories

Vertical

A divider can vertically separate two pieces of content.

Open in CodeSandbox

Appearance

A divider can have its line inset from the edges of its container.

Open in CodeSandbox

Inset

A divider can have a brand, subtle, or strong appearance. When not specified, it has its default experience.

Open in CodeSandbox

Align Content

The label associated with the divider can be aligned at the start, center, or end of the divider line.

Open in CodeSandbox

Custom Styles

A divider can have custom styles applied to both the label and the line.

Open in CodeSandbox