Divider
Horizontal line with optional label or vertical divider
Import
Source
Docs
Package
Usage
Divider component renders horizontal or vertical line.
Customize hr border style by setting variant
prop:
With label
In horizontal orientation you can add label with any react node at left, right or center of Divider
by setting label
and control its appearance with labelPosition
and labelProps
(see Text component for full props reference):
Sizes
Divider has predefined sizes: xs, sm, md, lg, xl. You can pass size as number and it will be set as height in px:
Vertical orientation
Divider can be oriented vertically with orientation
prop. In this case size will change the divider width:
Label
Label
Label
Label
Label
Label
Divider component props
Name | Type | Description |
---|---|---|
color | MantineColor | Line color from theme, defaults to gray in light color scheme and to dark in dark color scheme |
label | ReactNode | Adds text after line in horizontal orientation |
labelPosition | "left" | "right" | "center" | Label position |
labelProps | Record<string, any> | Props spread to Text component in label |
orientation | "horizontal" | "vertical" | Line orientation |
size | number | "xs" | "sm" | "md" | "lg" | "xl" | Sets height in horizontal orientation and width in vertical |
variant | "dashed" | "dotted" | "solid" | Divider borderStyle |
Divider component Styles API
Name | Static selector | Description |
---|---|---|
label | .mantine-Divider-label | Label element, horizontal orientation only |