Divider
import { Divider } from '@enmovil/ui-design-system';
A line that separates content, horizontally or vertically. A horizontal divider can carry a title, positioned with orientation.
Properties
| Property | Type | Required | Default | Allowed values | Description |
|---|---|---|---|---|---|
type | string | No | — | 'horizontal', 'vertical' | horizontal (the default) draws a full-width line between blocks; vertical draws a short inline separator between items. |
orientation | string | No | — | 'start', 'end', 'left', 'right', 'center' | Position of the title in a horizontal divider, such as left, center (the default) or right. |
orientationMargin | string | number | No | — | — | Space between the title and the nearest edge, in pixels or as a CSS length. Only applies when orientation is not center. |
variant | string | No | — | 'dashed', 'solid', 'dotted' | Style of the line, solid (the default), dashed or dotted. |
plain | boolean | No | — | — | Shows the title as regular body text instead of a heading. |
Other attributes
Divider passes 6 further attributes through to the underlying element. They aren't part of the supported API and may change between releases, so use only the properties listed on this page.
Events
This component has no events.
Children
Divider does not accept children.
Variants
Loading examples…
Playground
Change the controls to see how the properties affect the component. Values the controls don't cover come from the Default example.
Loading playground…
Storybook
Open Divider in Storybook to try every story with the full set of controls.