Moodinary/UI

Separator

Separar grupos dentro de una card o toolbar. Preferí espacio antes que líneas.

Línea fina para separar grupos dentro de una card o una barra. Si alcanza con espacio, usá espacio.

Instalación

shadcn
npx shadcn@latest add https://design.moodinary.com/r/separator.json
import
import { Separator } from "@moodinary/ui/components/separator";

Ejemplos

Horizontal y vertical

La vertical necesita un padre con alto definido.

Pulsos del equipo Norte
HoySemanaMes
Código
orientations.tsx
import { Separator } from "@moodinary/ui/components/separator";

export default function SeparatorOrientations() {
	return (
		<div className="grid w-full gap-3">
			<span>Pulsos del equipo Norte</span>
			<Separator />
			<div className="flex h-5 items-center gap-3">
				<span>Hoy</span>
				<Separator orientation="vertical" />
				<span>Semana</span>
				<Separator orientation="vertical" />
				<span>Mes</span>
			</div>
		</div>
	);
}

Props

Separator

PropTipoDefaultDescripción
orientation"horizontal" | "vertical""horizontal"Dirección de la línea.
classNamestring-Clases extra.

Cuándo sí y cuándo no

Hacé
  • Separá grupos con significado distinto.
  • Usá vertical en barras compactas.
  • Dejá aire alrededor de la línea.
Evitá
  • No separes cada fila.
  • No lo uses como borde de card.
  • No apiles separadores.

Accesibilidad

  • Expone role="separator" y su orientación.
  • No recibe foco.