Divider

Quando usarWhen to use

Use dividers quandoUse dividers when

Separando visualmente seções de conteúdo, itens de lista ou grupos de elementos relacionados. Use dividers horizontais entre blocos empilhados e dividers verticais entre itens inline.Visually separating content sections, list items, or groups of related elements. Use horizontal dividers between stacked blocks and vertical dividers between inline items.

Não use dividers quandoDon't use dividers when

O espaçamento sozinho já fornece separação suficiente — usar dividers em excesso adiciona ruído visual. Se o espaço em branco transmite o agrupamento claramente, um divider é desnecessário.Spacing alone provides sufficient separation — overusing dividers adds visual noise and clutter. If whitespace conveys the grouping clearly, a divider is unnecessary.

AnatomiaAnatomy

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. 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.

Divider horizontalHorizontal divider

O divider padrão ocupa toda a largura do container e adiciona separação vertical entre o conteúdo.The default divider spans the full width of its container and adds vertical separation between content.

Content above the divider

Content below the divider

<p>Content above the divider</p>
<hr class="ds-divider">
<p>Content below the divider</p>

Em uma listaIn a list

Dividers entre itens de lista criam agrupamento visual.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

<div>
  <p>Notifications</p>
  <p>Manage your notification preferences</p>
</div>
<hr class="ds-divider">
<div>
  <p>Privacy</p>
  <p>Control who can see your profile</p>
</div>

Divider verticalVertical divider

Use ds-divider--vertical dentro de um flex container para separar itens horizontalmente.Use ds-divider--vertical inside a flex container to separate items horizontally.

Left

Center

Right

<div style="display:flex;align-items:center;gap:var(--ds-space-lg);">
  <span>Left</span>
  <hr class="ds-divider ds-divider--vertical">
  <span>Center</span>
  <hr class="ds-divider ds-divider--vertical">
  <span>Right</span>
</div>

Em uma toolbarIn a toolbar

Dividers verticais separam grupos de ações em uma toolbar.Vertical dividers separate groups of actions in a toolbar.

<div style="display:flex;align-items:center;gap:var(--ds-space-sm);">
  <button class="ds-button ds-button--ghost ds-button--sm">Cut</button>
  <button class="ds-button ds-button--ghost ds-button--sm">Copy</button>
  <button class="ds-button ds-button--ghost ds-button--sm">Paste</button>
  <hr class="ds-divider ds-divider--vertical" style="height:24px;">
  <button class="ds-button ds-button--ghost ds-button--sm">Undo</button>
  <button class="ds-button ds-button--ghost ds-button--sm">Redo</button>
</div>

Boas práticasBest practices

Section A

Section B

Faça

Use dividers horizontais entre blocos de conteúdo e dividers verticais entre itens inline.Use horizontal dividers between content blocks and vertical dividers between inline items.

Item 1

Item 2

Item 3

Item 4

Item 5

Não faça

Não coloque um divider entre cada item da lista — isso adiciona ruído visual e reduz a legibilidade.Don't place a divider between every single list item -- it adds visual noise and reduces readability.

Mapeamento de tokensToken mapping

PropriedadeProperty	Token	Variável CSSCSS variable
cor da linhaline color	`component.divider.line.color.default`	`--ds-divider-line-color-default`
espessura da linhaline thickness	`component.divider.line.thickness.default`	`--ds-divider-line-thickness-default`
raio da linhaline radius	`component.divider.line.radius.default`	`--ds-divider-line-radius-default`

Classes CSSCSS classes

ClasseClass	DescriçãoDescription
`ds-divider`	Divider horizontal (padrão)Horizontal divider (default)
`ds-divider--vertical`	Divider vertical (para flex containers)Vertical divider (for flex containers)

AccessibilityAccessibility

ContextoContext	RequisitoRequirement	ImplementaçãoImplementation
`<hr>` semânticoSemantic `<hr>`	`role="separator"` implícitoImplicit `role="separator"`	Nenhum atributo extra necessário — o navegador fornece a roleNo extra attributes needed -- the browser provides the role
`<div>` divider decorativoDecorative `<div>` divider	Oculto da tecnologia assistivaHidden from assistive technology	`aria-hidden="true"`
Contexto interativoInteractive context	Comunica a separação a leitores de telaCommunicates separation to screen readers	`role="separator"`

Prefira HTML semânticoPrefer semantic HTML

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