Divider

Componentes/Conteúdo e estrutura

ImplementaçãoHTML/CSS/JSArk/Zag — planejadaReact · shadcn/Base UIAngular

Separa regiões de conteúdo relacionadas sem introduzir uma nova superfície.

DesignUsoImplementaçãoAcessibilidade

Seção da documentaçãoDesignUsoImplementaçãoAcessibilidade

Design

Preview funcional

Executado com HTML e CSS estáveis do DS, sem runtime JavaScript do componente.

Carregando preview funcional…

Abrir playground HTML/CSS/JS

Contextos · HTML/CSS/JS

Separadores horizontal e vertical executados com HTML e CSS estáveis.

Carregando preview funcional…

Abrir este exemplo em HTML/CSS/JS

Anatomia

---

1 2 3

1 Elemento separador (.ds-divider) — use <hr> quando a separação for semântica; marque como decorativo quando for apenas visual.
2 Orientação — horizontal por padrão; vertical com .ds-divider--vertical.
3 Token de borda — usa cor semântica de divider/border, não cor hardcoded.

Divider horizontal

O divider padrão ocupa toda a largura do container e adiciona separação vertical entre o conteúdo.

Content above the divider

---

Content below the divider

Em uma lista

Dividers entre itens de lista criam agrupamento visual.

Notifications

Manage your notification preferences

---

Privacy

Control who can see your profile

---

Security

Two-factor authentication and password

Divider vertical

Use ds-divider--vertical dentro de um flex container para separar itens horizontalmente.

Left

---

Center

---

Right

Em uma toolbar

Dividers verticais separam grupos de ações em uma toolbar.

Cut Copy Paste

---

Undo Redo

Mapeamento de tokens

Propriedade	Token	Variável CSS
cor da linha	component.divider.line.color.default	--ds-divider-line-color-default
espessura da linha	component.divider.line.thickness.default	--ds-divider-line-thickness-default
raio da linha	component.divider.line.radius.default	--ds-divider-line-radius-default

Uso

Quando usar

• A proximidade e o espaçamento não distinguem suficientemente grupos relacionados.
• Uma toolbar precisa separar visualmente grupos de ações.

Quando não usar

• Um heading ou o espaçamento já comunica claramente a mudança de seção.
• A linha seria usada apenas como decoração sem função de agrupamento.

Implementação

Status

Estável

Distribuição

Pacote npm

Instalação

npm

npm install ds-tis

pnpm

pnpm add ds-tis

yarn

yarn add ds-tis

bun

bun add ds-tis

Importações

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>

Sem runtime para Divider

O componente usa um elemento HTML nativo. JavaScript permanece sob responsabilidade da aplicação; o DS entrega anatomia, visual e estados.

Contrato da implementação Web

Classes CSS

Classe	Descrição
ds-divider	Divider horizontal (padrão)
ds-divider--vertical	Divider vertical (para flex containers)

Acessibilidade

Accessibility

Contexto	Requisito	Implementação
<hr> semântico	role="separator" implícito	Nenhum atributo extra necessário — o navegador fornece a role
<div> divider decorativo	Oculto da tecnologia assistiva	aria-hidden="true"
Contexto interativo	Comunica a separação a leitores de tela	role="separator"

Prefira HTML semântico

Use <hr class="ds-divider"> em vez de um <div> estilizado. O elemento <hr> tem role="separator" implícito, então nenhum ARIA extra é necessário.

Responsabilidade da saída

Preserve a semântica do elemento nativo, nomes acessíveis, comportamento de teclado e foco visível.

Evidência de validação

Coberta pelo Storybook estável, testes do runtime público quando aplicável, cenários de teclado, responsividade e Axe.

Abrir referência estável