Separator
Separa conteúdos de forma visual ou semântica.
Exemplos
Horizontal
Acima do separador
Abaixo do separador
Vertical
Conteúdo à esquerda
Conteúdo à direita
Mais conteúdo
Cards e listas
Resumo do pedido
#12345SubtotalR$ 99,00
FreteR$ 9,99
ImpostosR$ 10,90
TotalR$ 119,89
API
| Propriedade | Tipo | Padrão | Descrição |
|---|---|---|---|
| orientation | "horizontal" | "vertical" | "horizontal" | Orientação do separador. |
| decorative | boolean | true | Define se o componente é puramente decorativo. Quando true, a árvore de acessibilidade ignora o elemento. |
| className | string | - | Classe CSS para estilo personalizado. |
| ...props | React.ComponentProps<typeof SeparatorPrimitive.Root> | - | Aceita todas as propriedades do root do Radix Separator. |
Diretrizes de uso
- Use separadores horizontais para dividir seções de conteúdo no sentido vertical
- Use separadores verticais em menus de navegação, breadcrumbs ou conteúdo em linha
- Defina
decorative={false}quando o separador transmite um significado estrutural importante - Ajuste o estilo com className para diferentes pesos visuais e cores
- Pense na hierarquia visual: nem toda divisão precisa de um separador