SINGULARITY
DOCS
Reference
Divider
The Divider component offers a subtle, lightweight line to organize elements and enhance visual structure.
Introduction
The Material UI Divider component appears as a dark gray
<hr> by default and includes various props for easy style customization.Toothbrush
$4.50
Pinstriped cornflower blue cotton blouse takes you on a walk to the park or just down the hall.
Select type
Soft
Medium
Hard
import * as React from 'react';
import Card from '@mui/material/Card';
import Box from '@mui/material/Box';
import Chip from '@mui/material/Chip';
import Stack from '@mui/material/Stack';
import Divider from '@mui/material/Divider';
import Typography from '@mui/material/Typography';
export default function IntroDivider() {
return (
<Card variant="outlined" sx={{ maxWidth: 360 }}>
<Box sx={{ p: 2 }}>
<Stack
direction="row"
sx={{ justifyContent: 'space-between', alignItems: 'center' }}
>
<Typography gutterBottom variant="h5" component="div">
Toothbrush
</Typography>
<Typography gutterBottom variant="h6" component="div">
$4.50
</Typography>
</Stack>
<Typography variant="body2" sx={{ color: 'text.secondary' }}>
Pinstriped cornflower blue cotton blouse takes you on a walk to the park or
just down the hall.
</Typography>
</Box>
<Divider />
<Box sx={{ p: 2 }}>
<Typography gutterBottom variant="body2">
Select type
</Typography>
<Stack direction="row" spacing={1}>
<Chip color="primary" label="Soft" size="small" />
<Chip label="Medium" size="small" />
<Chip label="Hard" size="small" />
</Stack>
</Box>
</Card>
);
}Basics
import Divider from '@mui/material/Divider';
Variants
The Divider component offers three variants:
fullWidth (default), inset, and middle.- Full width variant below
- Inset variant below
- Middle variant below
- List item
import * as React from 'react';
import List from '@mui/material/List';
import ListItem from '@mui/material/ListItem';
import ListItemText from '@mui/material/ListItemText';
import Divider from '@mui/material/Divider';
const style = {
py: 0,
width: '100%',
maxWidth: 360,
borderRadius: 2,
border: '1px solid',
borderColor: 'divider',
backgroundColor: 'background.paper',
};
export default function DividerVariants() {
return (
<List sx={style}>
<ListItem>
<ListItemText primary="Full width variant below" />
</ListItem>
<Divider component="li" />
<ListItem>
<ListItemText primary="Inset variant below" />
</ListItem>
<Divider variant="inset" component="li" />
<ListItem>
<ListItemText primary="Middle variant below" />
</ListItem>
<Divider variant="middle" component="li" />
<ListItem>
<ListItemText primary="List item" />
</ListItem>
</List>
);
}Orientation
Apply the
orientation prop to switch the Divider from horizontal to vertical. In vertical orientation, the Divider renders as a <div> with appropriate accessibility attributes instead of <hr> to comply with the WAI-ARIA spec.import * as React from 'react';
import FormatAlignLeftIcon from '@mui/icons-material/FormatAlignLeft';
import FormatAlignCenterIcon from '@mui/icons-material/FormatAlignCenter';
import FormatAlignRightIcon from '@mui/icons-material/FormatAlignRight';
import FormatBoldIcon from '@mui/icons-material/FormatBold';
import Box from '@mui/material/Box';
import Divider, { dividerClasses } from '@mui/material/Divider';
export default function VerticalDividers() {
return (
<Box
sx={{
display: 'flex',
alignItems: 'center',
border: '1px solid',
borderColor: 'divider',
borderRadius: 1,
bgcolor: 'background.paper',
color: 'text.secondary',
'& svg': {
m: 1,
},
[`& .${dividerClasses.root}`]: {
mx: 0.5,
},
}}
>
<FormatAlignLeftIcon />
<FormatAlignCenterIcon />
<FormatAlignRightIcon />
<Divider orientation="vertical" flexItem />
<FormatBoldIcon />
</Box>
);
}Flex item
Enable the
flexItem prop to properly display the Divider within a flex container.import * as React from 'react';
import FormatBoldIcon from '@mui/icons-material/FormatBold';
import FormatItalicIcon from '@mui/icons-material/FormatItalic';
import Box from '@mui/material/Box';
import Divider from '@mui/material/Divider';
export default function FlexDivider() {
return (
<Box
sx={{
display: 'inline-flex',
alignItems: 'center',
border: '1px solid',
borderColor: 'divider',
borderRadius: 2,
bgcolor: 'background.paper',
color: 'text.secondary',
'& svg': {
m: 1,
},
}}
>
<FormatBoldIcon />
<Divider orientation="vertical" variant="middle" flexItem />
<FormatItalicIcon />
</Box>
);
}With children
Utilize the
textAlign prop to position elements wrapped by the Divider.Lorem ipsum dolor sit amet, consectetur adipiscing elit.
CENTER
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
LEFT
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
RIGHT
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Chip
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
import * as React from 'react';
import { styled } from '@mui/material/styles';
import Divider from '@mui/material/Divider';
import Chip from '@mui/material/Chip';
const Root = styled('div')(({ theme }) => ({
width: '100%',
...theme.typography.body2,
color: (theme.vars || theme).palette.text.secondary,
'& > :not(style) ~ :not(style)': {
marginTop: theme.spacing(2),
},
}));
export default function DividerText() {
const content = (
<p>{`Lorem ipsum dolor sit amet, consectetur adipiscing elit.`}</p>
);
return (
<Root>
{content}
<Divider>CENTER</Divider>
{content}
<Divider textAlign="left">LEFT</Divider>
{content}
<Divider textAlign="right">RIGHT</Divider>
{content}
<Divider>
<Chip label="Chip" size="small" />
</Divider>
{content}
</Root>
);
}Customization
Use with a List
When separating items in a List, set the
component prop to render the Divider as an <li> to ensure valid HTML structure.- Inbox
- Drafts
- Trash
- Spam
import * as React from 'react';
import List from '@mui/material/List';
import ListItem from '@mui/material/ListItem';
import ListItemText from '@mui/material/ListItemText';
import Divider from '@mui/material/Divider';
const style = {
p: 0,
width: '100%',
maxWidth: 360,
borderRadius: 2,
border: '1px solid',
borderColor: 'divider',
backgroundColor: 'background.paper',
};
export default function ListDividers() {
return (
<List sx={style} aria-label="mailbox folders">
<ListItem>
<ListItemText primary="Inbox" />
</ListItem>
<Divider component="li" />
<ListItem>
<ListItemText primary="Drafts" />
</ListItem>
<Divider component="li" />
<ListItem>
<ListItemText primary="Trash" />
</ListItem>
<Divider component="li" />
<ListItem>
<ListItemText primary="Spam" />
</ListItem>
</List>
);
}Icon grouping
The example below demonstrates combining the
variant="middle" and orientation="vertical" props.import * as React from 'react';
import Card from '@mui/material/Card';
import Divider, { dividerClasses } from '@mui/material/Divider';
import FormatAlignLeftIcon from '@mui/icons-material/FormatAlignLeft';
import FormatAlignCenterIcon from '@mui/icons-material/FormatAlignCenter';
import FormatAlignRightIcon from '@mui/icons-material/FormatAlignRight';
import FormatBoldIcon from '@mui/icons-material/FormatBold';
export default function VerticalDividerMiddle() {
return (
<Card
variant="outlined"
sx={{
display: 'flex',
color: 'text.secondary',
'& svg': {
m: 1,
},
[`& .${dividerClasses.root}`]: {
mx: 0.5,
},
}}
>
<FormatAlignLeftIcon />
<FormatAlignCenterIcon />
<FormatAlignRightIcon />
<Divider orientation="vertical" variant="middle" flexItem />
<FormatBoldIcon />
</Card>
);
}Accessibility
With its implicit
separator role, the Divider, a <hr> element, is announced by screen readers as a "Horizontal Splitter" (or vertical, when using the orientation prop).For purely stylistic use, set
aria-hidden="true" to prevent screen readers from announcing the Divider.<Divider aria-hidden="true" />
When wrapping other elements like text or chips with the Divider, use the
component prop to render it as a <div> and set role="presentation". This prevents screen reader announcements while maintaining the semantics of the enclosed elements.<Divider component="div" role="presentation"> <Typography>Text element</Typography> </Divider>
Anatomy
The Divider component consists of a root
<hr> element.<hr className="MuiDivider-root"> </hr>