Modal

Diálogo sobre un fondo atenuado.

Configuración

El componente real, en vivo.

Prop size: sm o md. El modal real se abre sobre toda la página.

Abrí el modal de ejemplo.

Prop role.

Diálogo estándar.

Los tokens globales que usa el CSS real del componente.

Token	Valor	Uso
	100
	16px
	110
	rgba(0, 0, 0, 0.5)	Detrás de drawers y modales
	rgba(0, 0, 0, 0.6)
	1px
	#e4e4e4	Solo divisores y bordes decorativos. Controles usan form.border
	16px	Cards de contenido
	#ffffff	Cards, modales, header
	0px 25px 50px -12px rgba(0, 0, 0, 0.25)	Drawers, modales, bottom sheets
	192px
	24px
	224px
	12px
	44px
	9999px	CTAs de marketing, filtros, inputs pill, contador
	#fff1f2
	#e30613
	20px
	4px
	18px
	28px
	600
	#1a1a1a	Texto principal (17.4:1)
	14px
	20px
	#6b6b6b	Gramaje, metadatos (5.33:1)