Botones.
Usar un botón para ejecutar una acción inmediata en la página o enviar un formulario.
Cuándo usar
Usar un botón para ejecutar una acción inmediata en la página o enviar un formulario.
- Elegir el elemento HTML nativo antes de agregar una primitiva interactiva.
- Mantener el nombre, el resultado y la acción visibles sin depender de un icono.
- Documentar cualquier excepción en el producto consumidor.
Ejemplo visible
Anatomía
| Parte | Contrato |
|---|---|
| 1 | Elemento button y type explícito |
| 2 | Etiqueta visible con verbo |
| 3 | Icono opcional |
| 4 | Indicador de carga sin cambiar ancho |
Estados y variantes
| Estado | Comportamiento esperado |
|---|---|
| default | Jerarquía principal, secundaria o discreta |
| hover | Cambio no esencial |
| focus-visible | Outline de alto contraste |
| disabled | No activable y razón cercana |
| loading | Conserva etiqueta o anuncia el proceso |
| danger | Verbo y objeto específicos; confirmación si es material |
Accesibilidad
- Nombre accesible igual a la etiqueta.
- No usar div con click.
- Conservar foco después del resultado o moverlo al mensaje relevante.
- El icon-only requiere aria-label y tooltip complementario.
HTML de referencia
<button class="cis-button cis-button--primary" type="submit">Guardar cambios</button>Definition of Done
- Ejemplo visible y código copiable coinciden.
- Teclado, foco, nombre accesible y estado fueron probados.
- El componente funciona sin JavaScript o declara una mejora progresiva acotada.
- Los mensajes cumplen core/prosa en modo estricto.
- La promoción registra versión, compatibilidad y prueba de regresión.