Separator es un divisor visual que organiza contenido denso y mejora la lectura al separar grupos relacionados. En diseño de sistema se recomienda usar una variante única y ajustar su largo al contenedor.
Últimos movimientos
Horizontal · Vertical · Integración en cards/listados
Importa estilos base y el componente Separator desde la librería.
1import 'nave-ui-library/styles.css'2import { Separator } from 'nave-ui-library/react'Usá el separador para dividir jerarquías de contenido dentro de una misma card o listado.
Total bruto
$38.211.412,12
Impuestos
-$3.500.000,00
Tiene una única variante visual. La configuración principal es la orientación: horizontal o vertical.
Horizontal
Contenido principal
Contenido secundario
Vertical
Props disponibles para Separator.
| Prop | Type | Default | Description |
|---|---|---|---|
orientation | 'horizontal' | 'vertical' | horizontal | Orientation of the separator. |
decorative | boolean | true | Whether the separator is decorative. |
1{2 "name": "Separator",3 "description": "Separador visual para dividir contenido.",4 "component": "Separator",5 "files": [6 "components/base/layout/Separator.tsx"7 ],8 "dependencies": [9 "react",10 "@radix-ui/react-separator"11 ],12 "props": {13 "orientation": {14 "type": "'horizontal' | 'vertical'",15 "default": "horizontal",16 "description": "Orientation of the separator."17 },18 "decorative": {19 "default": true,20 "type": "boolean",21 "description": "Whether the separator is decorative."22 }23 },24 "states": {25 "default": {},26 "decorative": {},27 "semantic": {}28 }29}