Divider

Components/Content and structure

ImplementationHTML/CSS/JSArk/Zag — plannedReact · shadcn/Base UIAngular

Separates related content regions without introducing a new surface.

DesignUsageImplementationAccessibility

Documentation sectionDesignUsageImplementationAccessibility

Design

Functional preview

Running with stable DS HTML and CSS, without a component JavaScript runtime.

Loading functional preview…

Open the HTML/CSS/JS playground

Contexts · HTML/CSS/JS

Horizontal and vertical separators rendered with stable HTML and CSS.

Loading functional preview…

Open this example in HTML/CSS/JS

Anatomy

---

1 2 3

1 Separator element (.ds-divider) — use <hr> for semantic separation; mark it as decorative when it is only visual.
2 Orientation — horizontal by default; vertical with .ds-divider--vertical.
3 Border token — uses semantic divider/border color, not hardcoded color.

Horizontal divider

The default divider spans the full width of its container and adds vertical separation between content.

Content above the divider

---

Content below the divider

In a list

Dividers between list items create visual grouping.

Notifications

Manage your notification preferences

---

Privacy

Control who can see your profile

---

Security

Two-factor authentication and password

Vertical divider

Use ds-divider--vertical inside a flex container to separate items horizontally.

Left

---

Center

---

Right

In a toolbar

Vertical dividers separate groups of actions in a toolbar.

Cut Copy Paste

---

Undo Redo

Token mapping

Property	Token	CSS variable
line color	component.divider.line.color.default	--ds-divider-line-color-default
line thickness	component.divider.line.thickness.default	--ds-divider-line-thickness-default
line radius	component.divider.line.radius.default	--ds-divider-line-radius-default

Usage

When to use

• Proximity and spacing do not sufficiently distinguish related groups.
• A toolbar needs to visually separate action groups.

When not to use

• A heading or spacing already clearly communicates the section change.
• The line would be used only as decoration without a grouping function.

Implementation

Status

Stable

Distribution

npm package

Installation

npm

npm install ds-tis

pnpm

pnpm add ds-tis

yarn

yarn add ds-tis

bun

bun add ds-tis

Imports

import 'ds-tis/css'

Markup

<hr class="ds-divider">

<div role="toolbar" aria-label="Ações de edição">
  <button type="button">Copiar</button>
  <hr class="ds-divider ds-divider--vertical" aria-hidden="true">
  <button type="button">Colar</button>
</div>

No Divider runtime

The component uses a native HTML element. JavaScript remains the application responsibility; the DS provides anatomy, visual treatment, and states.

Web implementation contract

CSS classes

Class	Description
ds-divider	Horizontal divider (default)
ds-divider--vertical	Vertical divider (for flex containers)

Accessibility

Accessibility

Context	Requirement	Implementation
Semantic <hr>	Implicit role="separator"	No extra attributes needed -- the browser provides the role
Decorative <div> divider	Hidden from assistive technology	aria-hidden="true"
Interactive context	Communicates separation to screen readers	role="separator"

Prefer semantic HTML

Use <hr class="ds-divider"> instead of a styled <div>. The <hr> element has implicit role="separator", so no extra ARIA is needed.

Output responsibility

Preserve native element semantics, accessible names, keyboard behavior, and visible focus.

Validation evidence

Covered by the stable Storybook, public runtime tests when applicable, keyboard scenarios, responsive checks, and Axe.

Open the stable reference