Skip to content

Divider API

API reference docs for the React Divider component. Learn about the props, CSS, and other APIs of this exported module.

Demos

Import

import Divider from '@mui/joy/Divider';
// or
import { Divider } from '@mui/joy';

Learn about the difference by reading this guide on minimizing bundle size.

Props

Props of the native component are also available.

NameTypeDefaultDescription
childrennode-

The content of the component.

componentelementType-

The component used for the root node. Either a string to use a HTML element or a component.

inset'none'
| 'context'
| string		-

Class name applied to the divider to shrink or stretch the line based on the orientation.

orientation'horizontal'
| 'vertical'		'horizontal'

The component orientation.

slotProps{ root?: func
| object }		{}

The props used for each slot inside.

slots{ root?: elementType }{}

The components used for each slot inside.

See Slots API below for more details.

sxArray<func
| object
| bool>
| func
| object		-

The system prop that allows defining system overrides as well as additional CSS styles.

See the `sx` page for more details.

The ref is forwarded to the root element.

Theme default props

You can use JoyDivider to change the default props of this component with the theme.

(

Slots

To learn how to customize the slot, check out the Overriding component structure guide.

Slot nameClass nameDefault componentDescription
root.MuiDivider-root'hr'The component that renders the root.
)

CSS classes

These class names are useful for styling with CSS. They are applied to the component's slots when specific states are triggered.

Class nameRule nameDescription
.MuiDivider-horizontalhorizontalClass name applied to the root element if orientation="horizontal".
.MuiDivider-insetContextinsetContextClass name applied to the root element if inset="context".
.MuiDivider-insetNoneinsetNoneClass name applied to the root element if inset="none".
.MuiDivider-verticalverticalClass name applied to the root element if orientation="vertical".

You can override the style of the component using one of these customization options: