# Contrato de componente · plantilla

Copia este archivo, renómbralo con el nombre del componente y rellena cada sección. Borra los ejemplos entre corchetes. Si una sección no aplica, escribe "No aplica" en lugar de eliminarla: así se sabe que se ha pensado.

---

## Identidad

- **Nombre:** [Button]
- **Versión del contrato:** [1.0.0]
- **Estado:** [borrador | aprobado | obsoleto]
- **Responsable:** [persona o equipo que aprueba cambios]
- **Componente en Figma:** [nombre exacto y enlace a la librería]
- **Componente en código:** [ruta o paquete, p. ej. `@empresa/ui/Button`]

## Propósito

- **Sirve para:** [iniciar una acción en la vista actual]
- **No sirve para:** [navegar a otra página: para eso, Link]

## Propiedades

| Propiedad | Valores permitidos | Por defecto | Obligatoria | Notas |
|---|---|---|---|---|
| [variant] | [primary, secondary, ghost] | [secondary] | [no] | [solo un primary por vista] |
| [size] | [s, m, l] | [m] | [no] | |
| [disabled] | [true, false] | [false] | [no] | |

## Contenido y huecos

| Hueco | Qué admite | Límites | Si se supera |
|---|---|---|---|
| [label] | [texto] | [1–24 caracteres] | [no se trunca: se revisa el texto] |
| [icon] | [icono del sistema] | [opcional, uno] | |

## Estados

| Estado | Cuándo ocurre | Qué cambia |
|---|---|---|
| [reposo] | | |
| [hover / foco] | | |
| [cargando] | [acción en curso] | [se bloquea, muestra indicador, mantiene el ancho] |
| [deshabilitado] | | |
| [error] | | |

## Tokens que usa

| Decisión | Token | Variable en Figma |
|---|---|---|
| [fondo, primary] | [color.action.primary] | [action/primary] |
| [espaciado horizontal] | [space.4] | [space/4] |
| [radio] | [radius.m] | [radius/m] |

Regla: ningún valor visual del componente se escribe a mano. Si falta un token, se propone el token; no se usa un valor suelto.

## Accesibilidad

- **Rol:** [button]
- **Nombre accesible:** [el texto del label; si solo hay icono, `aria-label` obligatorio]
- **Teclado:** [se activa con Enter y Espacio; foco visible]
- **Contraste mínimo:** [4,5:1 texto, 3:1 borde y foco]
- **Tamaño mínimo del área táctil:** [24 × 24 px]

## Reglas de uso comprobables

Escríbelas de forma que alguien, o un agente, pueda responder sí o no.

1. [En una misma vista hay como máximo un botón `primary`.]
2. [El label empieza por un verbo.]
3. [Nunca se usa `disabled` sin explicar al lado por qué.]

## Ejemplo correcto

[Descripción o enlace: botón primary "Guardar cambios" al final de un formulario, junto a un secondary "Cancelar".]

## Caso límite

[Descripción o enlace: label traducido al alemán que duplica la longitud. Comportamiento esperado: el botón crece, no trunca; si no cabe en móvil, pasa a ancho completo.]

## Preguntas abiertas

Lo que este contrato todavía no decide. Si un agente o una persona tiene que tomar una de estas decisiones, se anota aquí y se resuelve en la siguiente versión.

- [¿Se permite un botón con icono a la derecha?]

## Historial

| Versión | Fecha | Cambio | Aprobado por |
|---|---|---|---|
| [1.0.0] | | [versión inicial] | |