Divider

Dividers are used to separate actions or information.

Useful links:: MUI docs

API reference

Use cases

The Divider comes in two forms: semantic and presentational. By default, the Divider is semantic; it programmatically communicates a separation of content or functionality. However, in some cases, the semantics may be superfluous. In these cases, you should turn it into a presentational Divider.

Use case	semantic	presentational
As a horizontal rule, separating paragraphs and other flow content	✅	❌
As a separator, marking a division between options, such as in a toolbar	✅	❌
As a visual indicator marking the separation of two lists	❌	✅

StrataKit MUI modifications

Renders a semantic <hr> by default, switching to a <div> when it has children, is vertical, or is presentational.

Examples

Separating flow content

In the following example, from the HTML5 specification, the Divider separates topics within a section.

Presentational dividers

You may wish to make a Divider presentational by removing its semantics, i.e. by passing role="presentation".

For example, your navigation may be subdivided into multiple lists which are already separated semantically. You can use a presentational Divider to visually mark where one list ends and the next begins.

Orientation

By default, the Divider appears in a horizontal orientation. Reorientate it using orientation="vertical".

Margin

The margin prop can be set to include some space before and after the Divider.

Variant

The variant can control how much of the container the Divider spans. The default is "fullWidth".

✅ Do

Use the Divider to break up flow content.
Use the Divider to indicate divisions between grouped content such as lists.
Use presentational Divider in cases where the semantics are superfluous, such as at the intersection between two unordered lists.

🚫 Don’t

Don’t use a Divider where a heading would better introduce a section of content.