Divider Preview

A divider groups sections of content to create visual rhythm and hierarchy. Use dividers along with spacing and headers to organize content in your layout.

Loading...
Open in CodeSandbox
Divider storybook
React guidance

Properties

alignContent

Determines the alignment of the content within the divider.

“center” “start” “end”
Default:
“‘center’”

appearance

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

“strong” “brand” “subtle” “default”
Default:
“‘default’”

as

“div”
Default:
none

inset

Adds padding to the beginning and end of the divider.

boolean
Default:
false

vertical

A divider can be horizontal (default) or vertical.

boolean
Default:
false

wrapper

Accessibility wrapper for content when presented.

WithSlotShorthandValue<{ as?: "div"; } & Pick<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof HTMLAttributes<...>> & { ...; } & { ...; }> | null
Default:
none