Divider
Separa visualmente seções de conteúdo ou grupos de elementos dentro de uma mesma superfície, por meio de uma linha horizontal ou vertical.
- Separar blocos de conteúdo: dividir seções distintas dentro de uma mesma superfície (por exemplo, dentro de um Card) quando o espaçamento não é suficiente para diferenciá-las com clareza. Ex.: separar os dados de envio dos dados de faturamento em um mesmo formulário.
- Dividir itens de uma lista ou menu: marcar o limite entre elementos consecutivos quando convém reforçar a separação além do espaçamento. Ex.: os itens de um menu de ações.
- Separar ações ou dados em uma mesma linha: usar a variante vertical (orientation="vertical") para delimitar grupos alinhados horizontalmente. Ex.: separar as estatísticas de um resumo ou as ações de uma barra de ferramentas.
- Reforçar hierarquia em formulários extensos: marcar onde termina um grupo de campos relacionados e começa o seguinte, em fluxos de edição com várias seções.
- Substituir o espaçamento: usar o Divider no lugar de margens ou padding para separar conteúdo. O espaçamento deve ser a primeira opção; adicionar uma linha sem necessidade soma ruído visual onde não é preciso.
- Separar blocos que já se distinguem visualmente: dividir elementos que já têm um limite claro por cor de fundo ou superfície própria, como dois Card contíguos. Nesse caso, a linha é redundante.
- Fragmentar em excesso: encadear vários divisores seguidos ou inserir um entre cada elemento pequeno de uma lista curta. Isso aumenta a carga cognitiva; avaliar o espaçamento ou agrupar a informação em menos blocos.
- Comunicar estado ou categoria: transmitir um estado ou uma classificação por meio da cor do divisor. Nesse caso, usar Badge ou Tag para isso.
- Line: traço que separa visualmente o conteúdo; sua espessura, cor e orientação são controladas pelas props thickness, appearance e orientation.
Horizontal: separa blocos de conteúdo empilhados verticalmente; ocupa 100% da largura disponível por padrão. Valor padrão. Ex.: dividir duas seções dentro de um Card.
Vertical: separa elementos alinhados horizontalmente, como ações ou dados em uma mesma linha. Precisa que o container dê a ele uma altura explícita, já que não tem altura própria. Ex.: separar os itens de uma barra de ferramentas.
Neutral: cor de baixo contraste, para separar conteúdo sem dar protagonismo ao limite. Valor padrão; cobre a maioria dos casos. Ex.: separar os blocos de um formulário.
Primary: cor com mais contraste, para reforçar o limite entre seções quando convém destacá-lo. Uso pouco frequente: reservar para os casos em que esse contraste extra realmente agrega valor.
1: espessura padrão, adequada para a maioria dos casos. Valor padrão.
2: espessura intermediária, para reforçar levemente o limite sem competir com o conteúdo.
3: espessura máxima disponível; usar com moderação, apenas quando a separação precisa de máxima presença visual.
O Divider aparece dentro de superfícies como Card, List ou Layout, para separar blocos de conteúdo ou seções de um formulário. Na sua variante vertical, separa ações ou dados alinhados em uma mesma linha, como em um resumo de estatísticas ou uma barra de ferramentas.
Vendas
R$ 128.400
Pedidos
342
Visitas
5.6k
Usar um único Divider para separar blocos de conteúdo claramente distintos dentro de uma mesma superfície.
Evitar inserir um Divider entre cada linha de uma lista curta quando o espaçamento já é suficiente para diferenciá-las.
Manter a mesma espessura e aparência em todos os divisores de um mesmo bloco.
Evitar misturar espessuras ou aparências distintas entre divisores do mesmo bloco: gera ruído visual inconsistente.
- Elemento semântico nativo: é renderizado como <hr>, com papel implícito separator; os leitores de tela o anunciam como um limite de conteúdo, sem necessidade de adicionar papéis ou atributos adicionais.
- Orientação comunicada: ao usar orientation="vertical", o componente aplica aria-orientation="vertical" automaticamente, para que a tecnologia assistiva entenda o sentido do separador.
- Sem foco nem interação: por não ser um elemento interativo, não recebe foco nem é incluído na ordem de navegação por teclado; não deve receber tabIndex nem manipuladores de eventos.
- Não aninhar dentro de uma lista de itens: ao separar itens dentro de um container com papel de lista (<ul> ou role="list"), inserir o separador entre os itens no markup em vez de tratá-lo como mais um item, para não quebrar a semântica da lista para leitores de tela.
- Contraste da cor: ao usar appearance="primary" ou uma cor personalizada, verificar se o contraste com o fundo é suficiente para que o limite seja percebido (WCAG AA), principalmente no modo escuro.
Instale o componente via terminal.
npm install @nimbus-ds/componentsimport React from "react";
import { Box, Divider } from "@nimbus-ds/components";
const Example: React.FC = () => (
<Box display="flex" flexDirection="column" gap="4" width="100%">
<Box backgroundColor="neutral-surface" padding="4" borderRadius="2">
Contenido superior
</Box>
<Divider />
<Box backgroundColor="neutral-surface" padding="4" borderRadius="2">
Contenido inferior
</Box>
</Box>
);
export default Example;As propriedades adicionais são passadas ao elemento <hr> renderizado. Consulte a documentação do elemento hr para ver a lista de atributos aceitos.
Divider
| Name | Type | Default | Description |
|---|---|---|---|
orientation | 'horizontal' | 'horizontal' | Defines the orientation of the divider. |
appearance | 'neutral' | 'neutral' | Visual appearance color. |
thickness | '1' | '1' | Thickness level based on shape.border.width tokens. |
width | string | '100%' | CSS width of the divider. Applies to horizontal orientation only. |
marginLeft | string | CSS margin-left applied to the divider. | |
marginRight | string | CSS margin-right applied to the divider. |
Ajude-nos a melhorar a documentação
Encontrou um problema ou tem uma sugestão? Conte para a gente.