Divider
A divider is a thin line between two groups of content.
Signed in as ada@example.com
Sign out of all devices
<p>Signed in as ada@example.com</p> <tk-divider></tk-divider> <p>Sign out of all devices</p>
Anatomy
| Part | What it is |
|---|---|
tk-divider |
the element; never focusable, ignores the pointer |
rule part |
the line; one segment, or one on each side of a label |
label part |
an optional centered label, horizontal only |
Orientation
<div style="display: flex; align-items: center; gap: var(--space-8); height: 32px"> <tk-button variant="ghost">Bold</tk-button> <tk-button variant="ghost">Italic</tk-button> <tk-divider orientation="vertical"></tk-divider> <tk-button variant="ghost">Link</tk-button> </div>
horizontal(default): a full-width line in a vertical flow.vertical: a full-height line in a row. Put it in a flex row or give it a height; on its own it is only one line of text tall.
Label
Text in the default slot splits the line around a centered label, such as "OR" between two alternatives.
<tk-button full-width>Continue with email</tk-button> <tk-divider>OR</tk-divider> <tk-button variant="outline" full-width>Continue with Google</tk-button>
The label works on horizontal dividers only; a vertical divider ignores it. Screen readers read the label as the divider's name.
Spacing, inset, and strength
Set spacing and color with CSS custom properties on the element. The line spans its container by default; to inset it, give the element a margin.
<tk-divider style="--tk-divider-spacing: var(--space-16)"></tk-divider> <tk-divider style="--tk-divider-color: var(--border-default)"></tk-divider> <tk-divider style="margin-inline: var(--space-16)"></tk-divider>
--tk-divider-spacing: space on both sides of the line, along its axis.--tk-divider-color: the line color;var(--border-default)gives a stronger line between larger areas.--tk-divider-thickness: 1px by default; rarely changed.
Decorative
Add decorative when the nearby structure already shows the grouping, such as between two
landmark sections or items of a real list. It hides the divider from screen readers. A
divider with a label is never hidden.
<tk-divider decorative></tk-divider>
When to use
- Use a divider between groups of content, such as settings sections, stacked cards, or groups of toolbar buttons.
- Try white space and headings first. Add a divider only when they don't make the grouping clear.
- Don't use it for a component's own lines, such as table rows, a dialog's edges, or
a field's frame. Draw those with a CSS border on
border/subtleorborder/default.
Do / Don't
| ✅ Do | ❌ Don't |
|---|---|
| Put it between real groups of content | Add lines where space or a heading already groups things |
| Draw a component's own lines with a token border | Wrap a table row or a field frame in tk-divider |
Use decorative between groups already marked up as sections or list items |
Leave an extra separator for screen readers there |
Set a stronger line through --tk-divider-color |
Hard-code a line color that won't follow the theme |
| Give a vertical divider a row or a height | Expect it to fill a height it doesn't have |
Related
Menu : uses a divider between its sections.Prose : styles<hr>in rich text as the same faint line.
API
Attributes
| Attribute | Type | Default | What it does |
|---|---|---|---|
orientation |
horizontal | vertical |
horizontal |
the line's direction; an unknown value renders horizontal |
decorative |
boolean | false |
hides the divider from screen readers |
Slots
| Slot | Content |
|---|---|
| default | an optional label, horizontal only |
Events
None.
CSS
| Custom property | Default | What it does |
|---|---|---|
--tk-divider-color |
var(--border-subtle) |
the line color |
--tk-divider-spacing |
0 |
space on both sides of the line, along its axis |
--tk-divider-thickness |
1px |
the line thickness |
::part(rule): each line segment.::part(label): the label.
Tokens
| Element | Token |
|---|---|
| line | border/subtle; stronger border/default |
| label | text/secondary, Body Small |
| label gap | space-12 on each side |
Values per theme:
Accessibility
Built in:
- A divider is announced as a separator, with its direction.
- A labeled divider is announced by its label, such as "OR".
decorativeremoves it from the accessibility tree.- It is never focusable.
Your part:
- Use
decorativewhen the grouping is already clear from the structure, so screen readers don't hear an extra separator. - Don't make a divider the only thing that tells two groups apart if it matters: the
default line is faint and not held to the 3:1 minimum. Use
border/defaultfor a line people must see.