Saltar al contenido principal

Botón

Los botones permiten a los usuarios realizar acciones y tomar decisiones con un solo toque.

Guías de Diseño​

Cuándo Usar​

  • Acciones primarias en formularios o diálogos
  • Activadores de navegación
  • Envío de formularios
  • Confirmación o cancelación de operaciones

Variantes​

Nuestros botones vienen en múltiples variantes de color para diferentes contextos:

  • Primary - Mayor énfasis, acciones principales
  • Secondary - Énfasis medio, acciones secundarias
  • Lavender - Acento alternativo
  • Sky - Acento alternativo
  • Sun - Acento alternativo
  • Green Neon - Acento alternativo
  • Error - Acciones destructivas
  • Outlined - Versión delineada (sin fondo) de cualquier variante

Estilos​

Tres estilos principales están disponibles:

  • Sólido - Relleno completo (predeterminado)
  • Outlined - Solo borde sin fondo
  • Icon - Botón circular solo ícono

Tamaños​

Dos tamaños están disponibles:

  • Normal - Tamaño predeterminado (40px de altura)
  • Small - Espacios compactos (26px de altura)

Estados​

  • Predeterminado - Estado interactivo normal
  • Hover - Ratón sobre el botón
  • Activo (.bttn--active) - Mantiene el efecto de hover, por ejemplo para la opción seleccionada
  • Deshabilitado - Estado no interactivo
  • Foco - Indicador de foco del teclado

Accesibilidad​

  • Usa el elemento semántico <button> (HTML/CSS) o equivalente
  • Incluye etiquetas descriptivas
  • Proporciona etiquetas ARIA apropiadas cuando sea solo icono
  • Asegura contraste de color suficiente (mínimo 4.5:1)
  • Soporta navegación por teclado (Enter/Espacio)
  • Incluye indicadores de foco visibles
  • El estado deshabilitado debe ser determinable programáticamente

Mejores Prácticas​

✅ Haz:

  • Usa etiquetas claras y orientadas a la acción ("Guardar", "Enviar", "Cancelar")
  • Limita los botones primarios a uno por sección
  • Proporciona retroalimentación visual en la interacción
  • Haz los botones lo suficientemente grandes para objetivos táctiles (mínimo 44x44px)
  • Usa colocación consistente de botones en contextos similares

❌ No hagas:

  • Usar etiquetas genéricas como "Haz clic aquí"
  • Deshabilitar botones sin explicación
  • Usar demasiadas variantes de botones en una vista
  • Hacer los botones demasiado pequeños para una interacción cómoda
  • Usar botones para navegación (usa enlaces en su lugar)

Implementación por Plataforma​

Paquete: @tiendana/web-foundation

CSS/HTML​

Variables CSS @tiendana/web-foundation​

Tokens usados
/* Colores de Marca */
--color-natura: #00D47E;        /* Verde primario */
--color-forrest: #1B434C;       /* Verde oscuro */
--color-light-forrest: #E4ECE3; /* Verde claro */
--color-lavender: #9687F2;      /* Lavanda */
--color-sky: #75DBD2;           /* Cielo */
--color-sun: #FF7834;           /* Sol */
--color-green-neon: #C6F54F;    /* Verde neón */
--color-error: #F54F4F;         /* Error/rojo */

/* Espaciado */
--spacing-xs: 4px;
--spacing-sm: 8px;
--spacing-md: 16px;
--spacing-button: 40px;         /* Altura normal */
--spacing-button-sm: 26px;      /* Altura small */

/* Radio de Borde */
--border-radius-button: 14px;   /* Esquinas de botones sólidos/outlined */
--border-radius-lg: 8px;        /* Para botones small */
--border-radius-full: 9999px;   /* Para botones icon (círculo perfecto) */

/* Tipografía */
--font-size-xs: 12px;
--font-weight-extrabold: 800;
--line-height-tight: 1;         /* Altura de línea del botón */
Diferencia entre border-radius-button y border-radius-full
  • --border-radius-button (14px): esquinas de los botones sólidos y outlined
  • --border-radius-full (9999px): círculo perfecto para botones icon

Variaciones​

Cada variación tiene su demo individual:

.bttn​

Cargando demo...
Ver código

.bttn--primary​

Cargando demo...
Ver código

.bttn--secondary​

Cargando demo...
Ver código

.bttn--lavender​

Cargando demo...
Ver código

.bttn--sky​

Cargando demo...
Ver código

.bttn--sun​

Cargando demo...
Ver código

.bttn--green-neon​

Cargando demo...
Ver código

.bttn--error​

Cargando demo...
Ver código

.bttn--outlined + .bttn--primary​

Cargando demo...
Ver código

.bttn--outlined + .bttn--secondary​

Cargando demo...
Ver código

.bttn--outlined + .bttn--lavender​

Cargando demo...
Ver código

.bttn--outlined + .bttn--sky​

Cargando demo...
Ver código

.bttn--outlined + .bttn--sun​

Cargando demo...
Ver código

.bttn--outlined + .bttn--green-neon​

Cargando demo...
Ver código

.bttn--outlined + .bttn--error​

Cargando demo...
Ver código

.bttn--small​

Cargando demo...
Ver código

.bttn--icon​

Cargando demo...
Ver código

.bttn--icon + .bttn--secondary​

Cargando demo...
Ver código

.bttn--icon + .bttn--lavender​

Cargando demo...
Ver código

.bttn--icon + .bttn--sky​

Cargando demo...
Ver código

.bttn--icon + .bttn--sun​

Cargando demo...
Ver código

.bttn--icon + .bttn--green-neon​

Cargando demo...
Ver código

.bttn--icon + .bttn--error​

Cargando demo...
Ver código

Estado disabled​

Cargando demo...
Ver código

.bttn--active​

Cargando demo...
Ver código

.bttn-group​

Cargando demo...
Ver código

Props / API​

CSS Classes​

Todas las clases se combinan sobre .bttn. Solo existen las clases listadas aquí: el estilo outlined es un modificador (.bttn--outlined) y no una familia .bttn-outlined--*.

Base y variantes de color​

ClaseDescripción
.bttnClase base: fondo --color-light-forrest, 40px de altura (--spacing-button), min-width de --spacing-xl (32px), texto en mayúsculas
.bttn--primaryBotón primario (--color-natura)
.bttn--secondaryBotón secundario (--color-forrest)
.bttn--lavenderBotón lavender
.bttn--skyBotón sky
.bttn--sunBotón sun
.bttn--green-neonBotón green neon. Sus colores se resuelven en compilación desde los tokens SCSS (no son var() en tiempo de ejecución)
.bttn--errorBotón destructivo (--color-error)

Estilos y layouts​

ClaseDescripción
.bttn--outlinedFondo transparente y borde de --border-width-thin. Se combina con cualquier variante de color: .bttn--primary, .bttn--lavender, .bttn--sky, .bttn--error, .bttn--green-neon y .bttn--sun cambian el color del borde
.bttn--smallBotón compacto: 26px de altura (--spacing-button-sm), padding de 4px 8px y radio --border-radius-lg
.bttn--iconBotón circular de solo icono: 40x40px, min-width: var(--spacing-button) para que el contenido no lo aplaste, sin sombra de hover
.bttn--columnApila el contenido en vertical: altura automática, padding --spacing-sm --spacing-lg y radio --border-radius-xl
min-width de .bttn--icon

.bttn define min-width: var(--spacing-xl) (32px), menor que los 40px del botón icon. .bttn--icon lo sobrescribe con var(--spacing-button) para que el botón conserve su forma circular aunque el contenedor sea angosto.

Estados​

ClaseDescripción
:disabled / .bttn--disabledOpacidad 0.5 y sin efectos de hover ni foco
.bttn--activeMantiene el efecto de hover de forma persistente

Agrupación​

ClaseDescripción
.bttn-groupContenedor flex que agrupa varios .bttn con gap de --border-width-medium y esquinas internas reducidas a --border-radius-md

Variantes de color de .bttn--icon​

Con .bttn--icon cada variante usa un fondo claro y el color pleno en el icono; el hover invierte los colores:

CombinaciónReposoHover
.bttn--iconFondo --color-light-forrest, icono --color-dark-forrestFondo --color-forrest, icono --color-light-forrest
.bttn--icon.bttn--primaryFondo --color-naturaFondo --color-forrest, icono --color-green-neon
.bttn--icon.bttn--secondaryTransparente con borde --color-dark-forrestBorde de --border-width-medium
.bttn--icon.bttn--errorFondo --color-error-light, icono --color-errorFondo --color-error, icono --color-light-sun
.bttn--icon.bttn--lavenderFondo --color-light-lavender, icono --color-lavenderFondo --color-lavender, icono --color-light-lavender
.bttn--icon.bttn--skyFondo --color-light-skyFondo --color-sky
.bttn--icon.bttn--sunFondo --color-light-sun, icono --color-sunFondo --color-sun, icono --color-light-sun
.bttn--icon.bttn--green-neonFondo --color-light-green-neonFondo --color-green-neon

Recursos​