A divider is a 1px line that separates content groups, so users can scan and organize information. It is decorative and never interactive.
Every example on this page is the real component, not a picture. Figma: Divider and guidelines.
Choose direction and color and the divider and its code update.
A divider is a 1px line that separates content groups, so users can scan and organize information. It is decorative: it carries no content and no interaction.
Divider has two directions (horizontal and vertical) and three colors. It has no states and no size, and it looks the same on every breakpoint. The line fills its container, and the space around it comes from the parent gap.
This documentation has three pages. Examples & Guidelines (this page) shows when and how to use a divider. Specifications holds the values: the line, the tokens and the requirements. Code shows how to add one to a page.
Add a divider only when spacing alone does not separate the content. Use it to:
Every line adds visual clutter. If the content is already grouped by space, a heading or a label, leave the line out.
A full-width boundary between two page sections is not a divider. Use .page-divider from eco-section: it adds the page margin and padding around the same 1px line.
Set the space above and below the line with the gap of the parent. A margin on the divider itself makes the space depend on where the divider is used.
gap.| The user… | Use |
|---|---|
| sees two groups of content that need a clear boundary | Divider |
| sees a boundary between two full-width page sections | .page-divider (eco-section) |
| sees a boundary between two menu rows | The row’s own divider (eco-menu) |
| sees content that is grouped by a heading | No divider |
gap.A divider has no label, no icon and no padding of its own. The space around it belongs to the parent.
Two directions in three colors, six in all. A divider has no states.
Between sections, list rows or form groups. It fills the width of its container.
Between items placed side by side. Put it in a flex row; it stretches to the height of the row.
The space between the text and the line comes from the parent gap.
A divider has no sizes. The line is always 1px thick, and there is no spacing token for a hairline. The length is set by the container: the full width for a horizontal divider, the full height of the row for a vertical one. Figma shows 335px and 112px as example lengths, not fixed values. The values are under Sizes in Specifications.
A horizontal divider starts at the left edge of its container and runs to the right edge. A vertical one sits between two items in a flex row and takes the height of the row.
Primary is the default. Secondary is less prominent and has very low contrast, so use it on white only. Tertiary is more prominent and suits short separations, such as values placed side by side. Token names and values are under Design Tokens in Specifications.
A divider is not interactive. It has no hover, focus or disabled state, it cannot be tabbed to, and it does not move or animate.
It is the same on every breakpoint. There is no mobile or desktop value.
All requirements are listed under Accessibility Requirements in Specifications.
None. A divider is not focusable.
An <hr> is announced as a separator, so use it when the line separates content for everyone. A line that is only visual, inside a component, gets aria-hidden="true".