Separator

Línea divisoria horizontal o vertical entre elementos.

---

Import

import { Separator } from '@imansi/ui';

---

Horizontal

<div>
  <p>Sección 1</p>
  <Separator className="my-4" />
  <p>Sección 2</p>
</div>

---

Vertical

<div className="flex h-5 items-center gap-4">
  <span>Blog</span>
  <Separator orientation="vertical" />
  <span>Docs</span>
  <Separator orientation="vertical" />
  <span>Contacto</span>
</div>

---

En un menú

<DropdownMenuContent>
  <DropdownMenuItem>Perfil</DropdownMenuItem>
  <DropdownMenuItem>Configuración</DropdownMenuItem>
  <Separator className="my-1" />
  <DropdownMenuItem variant="destructive">
    Cerrar sesión
  </DropdownMenuItem>
</DropdownMenuContent>

---

Props

Prop	Tipo	Default	Descripción
orientation	'horizontal' | 'vertical'	'horizontal'	Dirección de la línea
decorative	boolean	true	Si es false agrega role="separator"
className	string	—	Clases adicionales

---

Accesibilidad

• Por defecto es decorativo (role="none") para no molestar a lectores de pantalla
• Si separa contenido semántico, pasá decorative={false}