Content Divider
Full-width separators that visually divide sections of content. Supports a centred label, button, or button group between ruled lines, as well as dual-line and filled-background variants.
Line with label
A horizontal rule on each side with a centred text label. Use a larger weight for headings and a smaller, muted style for timestamps or inline context.
Heading
Subtle / timestamp
Line with button
Embed a single action inline with the divider — useful for add-item patterns between list sections.
Line with icon button group
Use icon-only navigation controls — previous, add, and next — as the centre piece of a divider for paginated feeds or carousels.
Line with segmented control
Place a segmented button group as the centre element to let users filter the content on either side of the divider.
Dual line
Adds a top and bottom border instead of side rules, giving the label a contained, banner-like appearance.
Heading
Subtle / timestamp
With button
With icon button group
With segmented control
Fill
A rounded filled strip that draws stronger contrast against the surrounding content — useful as a prominent section header.
Heading
Subtle / timestamp
With button
With icon button group
With segmented control