005cf56baf
Some checks failed
No response / noResponse (push) Has been cancelled
CI / Continuous releases (push) Has been cancelled
CI / test-dev (macos-latest) (push) Has been cancelled
CI / test-dev (ubuntu-latest) (push) Has been cancelled
CI / test-dev (windows-latest) (push) Has been cancelled
Maintenance / main (push) Has been cancelled
Scorecards supply-chain security / Scorecards analysis (push) Has been cancelled
CodeQL / Analyze (push) Has been cancelled
94 lines
2.8 KiB
Markdown
94 lines
2.8 KiB
Markdown
---
|
||
productId: material-ui
|
||
title: React Divider component
|
||
components: Divider
|
||
githubLabel: 'scope: divider'
|
||
materialDesign: https://m2.material.io/components/dividers
|
||
githubSource: packages/mui-material/src/Divider
|
||
---
|
||
|
||
# Divider
|
||
|
||
<p class="description">The Divider component provides a thin, unobtrusive line for grouping elements to reinforce visual hierarchy.</p>
|
||
|
||
{{"component": "@mui/docs/ComponentLinkHeader"}}
|
||
|
||
## Introduction
|
||
|
||
The Material UI Divider component renders as a dark gray `<hr>` by default, and features several useful props for quick style adjustments.
|
||
|
||
{{"demo": "IntroDivider.js", "bg": true}}
|
||
|
||
## Basics
|
||
|
||
```jsx
|
||
import Divider from '@mui/material/Divider';
|
||
```
|
||
|
||
### Variants
|
||
|
||
The Divider component supports three variants: `fullWidth` (default), `inset`, and `middle`.
|
||
|
||
{{"demo": "DividerVariants.js", "bg": true}}
|
||
|
||
### Orientation
|
||
|
||
Use the `orientation` prop to change the Divider from horizontal to vertical. When using vertical orientation, the Divider renders a `<div>` with the corresponding accessibility attributes instead of `<hr>` to adhere to the WAI-ARIA [spec](https://www.w3.org/TR/wai-aria-1.2/#separator).
|
||
|
||
{{"demo": "VerticalDividers.js", "bg": true}}
|
||
|
||
### Flex item
|
||
|
||
Use the `flexItem` prop to display the Divider when it's being used in a flex container.
|
||
|
||
{{"demo": "FlexDivider.js", "bg": true}}
|
||
|
||
### With children
|
||
|
||
Use the `textAlign` prop to align elements that are wrapped by the Divider.
|
||
|
||
{{"demo": "DividerText.js", "bg": true}}
|
||
|
||
## Customization
|
||
|
||
### Use with a List
|
||
|
||
When using the Divider to separate items in a List, use the `component` prop to render it as an `<li>`—otherwise it won't be a valid HTML element.
|
||
|
||
{{"demo": "ListDividers.js", "bg": true}}
|
||
|
||
### Icon grouping
|
||
|
||
The demo below shows how to combine the props `variant="middle"` and `orientation="vertical"`.
|
||
|
||
{{"demo": "VerticalDividerMiddle.js", "bg": true}}
|
||
|
||
## Accessibility
|
||
|
||
Due to its implicit role of `separator`, the Divider, which is a `<hr>` element, will be announced by screen readers as a "Horizontal Splitter" (or vertical, if you're using the `orientation` prop).
|
||
|
||
If you're using it as a purely stylistic element, we recommend setting `aria-hidden="true"` which will make screen readers bypass it.
|
||
|
||
```js
|
||
<Divider aria-hidden="true" />
|
||
```
|
||
|
||
If you're using the Divider to wrap other elements, such as text or chips, we recommend changing its rendered element to a plain `<div>` using the `component` prop, and setting `role="presentation"`.
|
||
This ensures that it's not announced by screen readers while still preserving the semantics of the elements inside it.
|
||
|
||
```js
|
||
<Divider component="div" role="presentation">
|
||
<Typography>Text element</Typography>
|
||
</Divider>
|
||
```
|
||
|
||
## Anatomy
|
||
|
||
The Divider component is composed of a root `<hr>`.
|
||
|
||
```html
|
||
<hr class="MuiDivider-root">
|
||
<!-- Divider children goes here -->
|
||
</hr>
|
||
```
|