---
titulo: Botón unificado
resumen: Un solo botón para la landing y el portal, con una hoja de estilos compartida.
estado: produccion
creado: 2026-10-11
actualizado: 2026-10-11
relacionados:
  - componentes/boton
id: iniciativas/boton-unificado
url: /designloop/iniciativas/boton-unificado
sync: null
---

# Botón unificado

Un solo botón para la landing y el portal, con una hoja de estilos compartida.

## Resumen

La landing (`.button` en `public/site/styles.css`) y el portal (`Button` con clases de Tailwind) resolvían el mismo botón con dos códigos y pequeñas diferencias. Decidido el 11 de octubre de 2026: se unifican.

En producción desde el 11 de octubre de 2026: [imandresochoa/designloop#11](https://github.com/imandresochoa/designloop/pull/11).

- `public/site/button.css` pasa a ser la fuente única. La landing lo carga desde `index.html` y el portal lo importa en la capa `components` de `globals.css`.
- Variantes en las dos superficies: `primary`, `outline`, `ghost`, `subtle`, `danger` y `light`. Tamaños normal (44 px) y pequeño (36 px), y `block`.
- Token nuevo `--ink-hover` para el hover del principal.

## Referencias

- Ficha actual: [Botón](/designloop/componentes/boton), sección «Diferencias entre superficies».

## Exploración

Valores que se igualan: texto de 15 px en el tamaño normal (la landing tenía 16 px), radio de 10 px en el pequeño (el portal tenía 12 px) y transiciones de 180 ms.

## Flujos

Sin cambios de comportamiento: `Button` y `ButtonLink` mantienen sus props.

## Handoff

Hecho: ficha del botón actualizada (una sola API de clases) y huella aceptada. Iniciativa cerrada.

## Playground

Pendiente.