Divider

Components/Content and structure

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

A standalone directive on a native hr element, with typed orientation and optional decorative semantics.

DesignUsageImplementationAccessibility

Documentation sectionDesignUsageImplementationAccessibility

Design

Functional preview

Running with the native Angular component and HTML hr nativo.

Loading functional preview…

Open the Angular playground

Toolbar · Angular

A decorative vertical separator rendered by the Angular directive between native Buttons.

Loading functional preview…

Open this example in Angular

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.

When to choose this output

Choose this native Angular output when the application already uses Angular. It consumes the same DS CSS and has no dependency on the Web runtime or React adapters.

Implementation

Status

Beta

Distribution

Validated Angular tarball

Installation

npm

npm install ./dist/tis-angular-0.0.0-beta.0.tgz ds-tis

pnpm

pnpm add ./dist/tis-angular-0.0.0-beta.0.tgz ds-tis

yarn

yarn add ./dist/tis-angular-0.0.0-beta.0.tgz ds-tis

bun

bun add ./dist/tis-angular-0.0.0-beta.0.tgz ds-tis

Validated workspace beta

The command installs the locally generated and consumer-tested tarball. @tis/angular is not published on the public npm registry.

DS styles

@import "ds-tis/css";

Angular imports

import { TisDivider } from '@tis/angular/divider'

Template

<hr tisDivider>

<div role="toolbar" aria-label="Ações de edição">
  <button type="button">Copiar</button>
  <hr tisDivider orientation="vertical" [decorative]="true">
  <button type="button">Colar</button>
</div>

Public contract

Package

@tis/angular

Entrypoint

@tis/angular/divider

Primitive

HTML hr nativo

Status

Beta

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 button semantics, submit behavior, accessible names, disabled state, and visible focus.

Validation evidence

Covered by its independent Storybook output plus browser, responsive, keyboard, Axe, and bundle checks.

Open the stable reference