Divider

1.2.0

O componente Divider é um elemento visual atômico utilizado para separar seções de conteúdo ou grupos de elementos dentro de uma mesma interface.

Horizontal

Vertical

Espessura

import 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;

Divider

Definição

O componente Divider é um elemento visual atômico utilizado para separar seções de conteúdo ou grupos de elementos dentro de uma mesma interface. Sua função principal é estabelecer limites claros e organizar a hierarquia visual sem adicionar peso desnecessário, facilitando que o merchant possa escanear as informações de sua loja de maneira ágil e produtiva.

Quando usar

Para separar blocos de conteúdo distintos dentro de uma mesma página ou container tipo Card.
Para dividir itens em uma lista ou menu quando o espaço em branco não é suficiente para distinguir a separação.
Para hierarquizar informação em fluxos de edição complexos onde é necessário agrupar campos relacionados.

Quando não usar

Não utilizar como substituição de margens ou padding; o espaçamento deve ser a primeira opção para separar conteúdo.
Evitar seu uso excessivo para não fragmentar a interface, o que pode aumentar a carga cognitiva do usuário.
Não usar para separar elementos que já possuem uma distinção visual clara através do uso de diferentes cores de fundo.

Critérios de usabilidade e produtividade

Foco na ação: Ajuda a delimitar áreas de trabalho, permitindo que o merchant identifique rapidamente onde termina uma seção e começa a seguinte.
Navegação fluida: Por não ser um elemento interativo, não deve interferir com a navegação por teclado (Tab) entre componentes de ação.
Feedback visual: Contribui para uma resposta imediata do sistema ao organizar visualmente os resultados de ações em lote ou listas.

Acessibilidade

Papel decorativo: Por ser um elemento visual, deve ser implementado de forma que os leitores de tela o ignorem para não interromper o fluxo de leitura.
Contraste adequado: Garantir que a cor do divisor cumpra com os níveis mínimos de contraste (WCAG AA) em relação ao fundo da interface.
Gerenciamento do foco: O componente não deve receber foco nem alterar a ordem lógica de navegação entre os elementos que separa.

Anatomia

O componente consiste em uma linha sólida cuja aparência é definida pelos tokens de design do Nimbus.

Linha (Line): O traço principal que atravessa o container de forma horizontal ou vertical.

Dependências

Este componente atômico é utilizado frequentemente por:

Card
List
Layout

Variantes

Horizontal: Variante padrão para separar conteúdo empilhado verticalmente.
Vertical: Utilizada em barras de ferramentas ou cabeçalhos para separar ações laterais.

Do and Don'ts

✅ Do

Manter a consistência da espessura (geralmente 1px) para não gerar ruído visual desnecessário.
Alinhar o divisor com o conteúdo que está separando para manter uma estrutura visual harmônica.
Usar para agrupar logicamente elementos ou separar itens em listas ou tabelas.

❌ Don't

Não utilizar divisores de cores chamativas.
Não misturar variantes horizontais e verticais em um mesmo bloco se isso gerar confusão hierárquica.

Implementação

Instale o componente via terminal.

npm install @nimbus-ds/divider

Props

Propriedades adicionais são repassadas ao elemento <Divider>. Consulte a documentação para ver a lista de atributos aceitos pelo elemento <Divider>.

Divider

Name	Type	Default	Description
orientation	'horizontal' 'vertical'	'horizontal'	Defines the orientation of the divider.
appearance	'neutral' 'primary'	'neutral'	Visual appearance color.
thickness	'1' '2' '3'	'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.