Divider
Separa visualmente secciones de contenido o grupos de elementos dentro de una misma superficie, mediante una línea horizontal o vertical.
- Separar bloques de contenido: dividir secciones distintas dentro de una misma superficie (por ejemplo, dentro de una Card) cuando el espaciado no alcanza para distinguirlas con claridad. Ej.: separar los datos de envío de los datos de facturación en un mismo formulario.
- Dividir ítems de una lista o menú: marcar el límite entre elementos consecutivos cuando conviene reforzar la separación además del espaciado. Ej.: los ítems de un menú de acciones.
- Separar acciones o datos en una misma fila: usar la variante vertical (orientation="vertical") para delimitar grupos alineados horizontalmente. Ej.: separar las estadísticas de un resumen o las acciones de una barra de herramientas.
- Reforzar jerarquía en formularios extensos: marcar dónde termina un grupo de campos relacionados y empieza el siguiente, en flujos de edición con varias secciones.
- Reemplazar el espaciado: usar el Divider en lugar de márgenes o padding para separar contenido. El espaciado debe ser la primera opción; agregar una línea sin necesidad suma ruido visual donde no hace falta.
- Separar bloques que ya se distinguen visualmente: dividir elementos que ya tienen un límite claro por color de fondo o superficie propia, como dos Card contiguas. En ese caso, la línea es redundante.
- Fragmentar en exceso: encadenar varios divisores seguidos o insertar uno entre cada elemento chico de una lista corta. Esto aumenta la carga cognitiva; evaluar el espaciado o agrupar la información en menos bloques.
- Comunicar estado o categoría: transmitir un estado o una clasificación mediante el color del divisor. En su lugar, usar Badge o Tag para eso.
- Line: trazo que separa visualmente el contenido; su grosor, color y orientación se controlan mediante las props thickness, appearance y orientation.
Horizontal: separa bloques de contenido apilados verticalmente; ocupa el 100% del ancho disponible por defecto. Valor por defecto. Ej.: dividir dos secciones dentro de una Card.
Vertical: separa elementos alineados horizontalmente, como acciones o datos en una misma fila. Necesita que el contenedor le dé una altura explícita, ya que no tiene altura propia. Ej.: separar los ítems de una barra de herramientas.
Neutral: color de bajo contraste, para separar contenido sin darle protagonismo al límite. Valor por defecto; cubre la mayoría de los casos. Ej.: separar los bloques de un formulario.
Primary: color con mayor contraste, para reforzar el límite entre secciones cuando conviene destacarlo. Uso poco frecuente: reservar para los casos donde ese contraste extra realmente aporta.
1: grosor estándar, adecuado para la mayoría de los casos. Valor por defecto.
2: grosor intermedio, para reforzar levemente el límite sin competir con el contenido.
3: grosor máximo disponible; usar con moderación, solo cuando la separación necesita máxima presencia visual.
El Divider aparece dentro de superficies como Card, List o Layout, para separar bloques de contenido o secciones de un formulario. En su variante vertical, separa acciones o datos alineados en una misma fila, como en un resumen de estadísticas o una barra de herramientas.
Ventas
$128.400
Pedidos
342
Visitas
5.6k
Usar un único Divider para separar bloques de contenido claramente distintos dentro de una misma superficie.
Evitar insertarlo entre cada línea de una lista corta cuando el espaciado ya alcanza para diferenciarlas.
Mantener el mismo grosor y apariencia en todos los divisores de un mismo bloque.
Evitar mezclar grosores o apariencias distintas entre divisores del mismo bloque: genera ruido visual inconsistente.
- Elemento semántico nativo: se renderiza como <hr>, con rol implícito separator; los lectores de pantalla lo anuncian como un límite de contenido, sin necesidad de agregar roles ni atributos adicionales.
- Orientación comunicada: al usar orientation="vertical", el componente aplica aria-orientation="vertical" automáticamente, para que la tecnología de asistencia entienda el sentido del separador.
- Sin foco ni interacción: al no ser un elemento interactivo, no recibe foco ni se incluye en el orden de navegación por teclado; no debe agregarse tabIndex ni manejadores de eventos.
- No anidar dentro de una lista de ítems: si separa ítems dentro de un contenedor con rol de lista (<ul> o role="list"), insertarlo entre los ítems del markup en lugar de tratarlo como un ítem más, para no romper la semántica de la lista para lectores de pantalla.
- Contraste del color: al usar appearance="primary" o un color personalizado, verificar que el contraste contra el fondo sea suficiente para que el límite se perciba (WCAG AA), sobre todo en modo oscuro.
Instalá el componente vía 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;Las propiedades adicionales se pasan al elemento <hr> renderizado. Consultá la documentación del elemento hr para ver la lista de atributos aceptados.
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. |
Ayudanos a mejorar la documentación
¿Encontraste un problema o tenés una sugerencia? Contanos.