Divider

1.0.0

El componente Divider es un elemento visual atómico utilizado para separar secciones de contenido o grupos de elementos dentro de una misma interfaz.

Horizontal

Vertical

Grosor

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

Definición

El componente Divider es un elemento visual atómico utilizado para separar secciones de contenido o grupos de elementos dentro de una misma interfaz. Su función principal es establecer límites claros y organizar la jerarquía visual sin añadir peso innecesario, facilitando que el merchant pueda escanear la información de su tienda de manera ágil y productiva.

Cuándo usar

Para separar bloques de contenido distintos dentro de una misma página o contenedor tipo Card.
Para dividir ítems en una lista o menú cuando el espacio en blanco no es suficiente para distinguir la separación.
Para jerarquizar información en flujos de edición complejos donde se requiere agrupar campos relacionados.

Cuándo no usar

No utilizar como reemplazo de márgenes o padding; el espaciado debe ser la primera opción para separar contenido.
Evitar su uso excesivo para no fragmentar la interfaz, lo cual puede aumentar la carga cognitiva del usuario.
No usar para separar elementos que ya poseen una distinción visual clara mediante el uso de diferentes colores de fondo.

Criterios de usabilidad y productividad

Enfoque en la acción: Ayuda a delimitar áreas de trabajo, permitiendo que el merchant identifique rápidamente dónde termina una sección y comienza la siguiente.
Navegación fluida: Al no ser un elemento interactivo, no debe interferir con la navegación por teclado (Tab) entre componentes de acción.
Feedback visual: Contribuye a una respuesta inmediata del sistema al organizar visualmente los resultados de acciones en lote o listas.

Accesibilidad

Rol decorativo: Al ser un elemento visual, debe implementarse de forma que los lectores de pantalla lo ignoren para no interrumpir el flujo de lectura.
Contraste adecuado: Garantizar que el color del divisor cumpla con los niveles mínimos de contraste (WCAG AA) respecto al fondo de la interfaz.
Manejo del foco: El componente no debe recibir foco ni alterar el orden lógico de navegación entre los elementos que separa.

Anatomía

El componente consiste en una línea sólida cuya apariencia está definida por los tokens de diseño de Nimbus.

Línea (Line): El trazo principal que atraviesa el contenedor de forma horizontal o vertical.

Dependencias

Este componente atómico es utilizado frecuentemente por:

Card
List
Layout

Variantes

Horizontal: Variante por defecto para separar contenido apilado verticalmente.
Vertical: Utilizada en barras de herramientas o encabezados para separar acciones laterales.

Do and Don'ts

✅ Do

Mantener la consistencia del grosor (usualmente 1px) para no generar ruido visual innecesario.
Alinear el divisor con el contenido que está separando para mantener una estructura visual armónica.
Usar para agrupar lógicamente elementos o separar items en listas o tablas.

❌ Don't

No utilizar divisores de colores llamativos.
No mezclar variantes horizontales y verticales en un mismo bloque si esto genera confusión jerárquica.

Implementación

Instalá el componente via terminal.

npm install @nimbus-ds/divider

Props

Las propiedades adicionales se pasan al elemento <Divider>. Consultá la documentación para ver la lista de atributos aceptados por el elemento <Divider>.

Divider

Name	Type	Default	Description
orientation	'horizontal' 'vertical'	'horizontal'	Defines the orientation of the divider.
appearance	'neutral'	'neutral'	Visual appearance color.
thickness	'1' '2' '3'	'1'	Thickness level based on shape.border.width tokens.