Divider
Recipe React distribuída como source, sobre hr nativo e com as classes/tokens públicos do Divider TIS.
Design
Preview funcional
Executado pela recipe React distribuída via shadcn e baseada em Base UI.
Abrir playground React · shadcn/Base UI
Toolbar · React · shadcn/Base UI
Separador vertical executado pela recipe React entre Buttons da própria saída.
Anatomia
1 2 3
.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.
Center
Right
Em uma toolbar
Dividers verticais separam grupos de ações em uma toolbar.
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.
Composição React
import { Separator } from "@/components/ui/separator"
<Separator />Implementação
- Status
- Beta
- Distribuição
- Source via shadcn
Instalação
Configure o namespace uma única vez na integração React.
npx shadcn@latest add @tis/separatorpnpm dlx shadcn@latest add @tis/separatoryarn dlx shadcn@latest add @tis/separatorbunx --bun shadcn@latest add @tis/separatorContrato público
- Item do registry
@tis/separator- Provider
- React nativo
- Distribuição
- Source copiado para a aplicação
- Status
- Beta
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" |
<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 da Base UI e teste conteúdo real, foco visível e nomes acessíveis na aplicação consumidora.
Evidência de validação
Coberta pelo Storybook da saída independente e por verificações de browser, responsividade, teclado, Axe e bundle.