UI Component LabData display
Divider
A thin line that separates sections or groups of content.
Demo
Also known as
- Divider — Ant Design
- Separator — React Aria
- ディバイダー — デジタル庁デザインシステム
How to recognize it
A thin gray horizontal line across the content, or a short vertical line between items in a row.
Variations
- Full width
- Runs edge to edge to separate major sections or lists.
- Inset
- Starts with an indent, separating items within the same section while keeping them related.
Behavior
- It is not interactive.
- In this demo, the lines between sections are <hr>, which screen readers announce as a separator. The vertical lines between links are only decoration and are hidden from screen readers.
Keyboard
| Key | Action |
|---|---|
| — | None. |
Usage notes
- A divider only supports spacing. The layout should still make sense without the line.
- Leave enough space around it (at least 8 px in lists and 16 px between sections) so separate items do not look like one.
- Use <hr> for a change of topic. For a purely visual line, use a CSS border instead.
Sources
- MDN: <hr> (Last checked: )
- デジタル庁デザインシステムウェブサイト「ディバイダー」をもとに作成 (Last checked: )