# Core/Divider - Design

Divider separates and groups content. Use horizontal dividers between sections; use vertical dividers between inline items. A horizontal divider can optionally display a label. Dividers are static and not keyboard focusable.

## Usage

Use Collapse to structure readable content, separate regions, or group related information. Pair it with shared spacing, typography, and surface rules. Do not stretch it into an interaction pattern that already has a dedicated component.

## Properties

### Label

A horizontal divider can be given a label to provide context to a grouping. When possible, avoid labeled dividers and use headings instead. When you do use a label, ensure it has the proper semantic level (e.g. pass an `<h2>` or `<h3>` as children) so it is announced as a heading by assistive technologies.

## Best Practices

Do:

* Do use Divider to separate semantically distinct groups.
* Do use a label when the divider introduces a new conceptual group.

Don't:

* Don't use Divider between every list item in a dense list.
* Don't use Divider as pure decoration.

## Accessibility

* Dividers are static and not keyboard focusable.
* Unlabeled horizontal dividers render as an `<hr>` (a thematic break between content).
* When a horizontal divider has a label, prefer a real heading element as children (for example, `Text` with `as="h2"` or `as="h3"`) when the label introduces a new section, so the label is announced with the correct level. When possible, avoid labeled dividers and use headings instead.

## Related components

* [Collapse](?path=/docs/core-collapse--design)