ContentDivider

Separador horizontal, solo o con texto o un botón en el centro.

Cuándo usarlo

Props. label (+ heading para texto de título), children (un Button en el centro), variant (single · dual · fill).

Uso. "o continúa con" en formularios de acceso, fechas en listas largas, "Cargar más" al final de un listado. Sin texto, es solo una línea border-secondary.

Detalles. Funciona sin JavaScript. Sin contenido es un separador para lectores de pantalla (role="separator"); con texto o botón, las líneas son decorativas y se lee solo lo de en medio. Si pasas children, label no se pinta.

Ejemplos

o continúa con

Octubre 2026

Pendientes

Props

Prop	Tipo	Por defecto	Descripción
`label`	`ReactNode`	—	Texto en el centro, como "o continúa con" o una fecha.
`heading`	`boolean`	—	El texto como título (`text-md` semibold en `text-primary`) en lugar de `text-sm` en `text-tertiary`.
`variant`	`"single" · "dual" · "fill"`	`single`	`single` una línea · `dual` dos líneas · `fill` banda en `bg-secondary`.
`children`	`ReactNode`	—	Un `Button` en el centro, como "Cargar más". Sustituye a `label`.
`className`	`string`	—

Código

import { ContentDivider } from "@jotis-me/react";

export default function Page() {
	return (
		<>
			<ContentDivider label="o continúa con" />
		</>
	);
}

---
import { ContentDivider } from "@jotis-me/react";
---

<ContentDivider label="o continúa con" />