Botones
El componente e-button cubre acciones primarias, secundarias y de navegacion. Soporta variantes visuales, tamanos, estados como disabled/loading e integracion con iconos y enlaces. En esta pagina puedes comparar patrones reales de uso para elegir rapidamente la configuracion adecuada segun jerarquia visual, contexto y accesibilidad.
Uso
Usa este playground para ajustar jerarquia visual con color, outlined y text; prueba block para layouts de formulario/mobile; y valida feedback de estado con disabled y loading.
Variantes de tamano
Define escala visual segun densidad y prioridad. Opciones: x-small, small, default, large, x-large.
Variantes visuales
Modo icono
Con la prop icon puedes crear botones compactos basados en icono. Recomendado para barras de herramientas y acciones recurrentes. Puedes aprender mas sobre como funcionan los iconos en la pagina de Configuracion de iconos .
Iconos prepend y append
Agrega contexto visual colocando iconos al lado izquierdo (prepend) o derecho (append) del texto.
Tamano personalizado
Ajusta dimensiones con width y height cuando el layout requiera medidas especificas.
Casos de uso comunes
Patron recomendado para app bars: navegacion al inicio, marca dentro del flujo principal, una accion primaria tonal para crear y utilidades agrupadas al final.
Props
Referencia completa de props, tipos y comportamiento para configurar Button con precision.
| Propiedad | Tipo | Por defecto |
|---|---|---|
| size | "x-small" | "small" | "default" | "large" | "x-large" | "default" (fallback visual) |
Define el tamano preestablecido del boton. | ||
| color | string | undefined |
Aplica el color del tema al boton (fondo/capas de estado segun variante). | ||
| hoverColor | string | undefined |
Color opcional aplicado cuando el puntero pasa sobre el boton. | ||
| disabled | boolean | false |
Deshabilita la interaccion y aplica estilos de estado deshabilitado. | ||
| loading | boolean | false |
Muestra el indicador de carga y bloquea interacciones de click. | ||
| ripple | boolean | true |
Activa o desactiva el efecto de interaccion ripple. | ||
| link | boolean | false |
Fuerza modo de renderizado como ancla cuando es true. | ||
| type | string | "button" (cuando tag es button) |
Tipo nativo del boton cuando renderiza como <button>. | ||
| ariaLabel | string | undefined |
aria-label explicito para accesibilidad, util en botones solo icono. | ||
| outlined | boolean | false |
Usa estilo outlined en lugar de fondo relleno. | ||
| text | boolean | false |
Usa estilo text con fondo transparente. | ||
| tonal | boolean | false |
Usa la variante visual tonal. | ||
| fab | boolean | false |
Activa presentacion tipo FAB; combinable con icon para layout centrado en icono. | ||
| stacked | boolean | false |
Aplica la clase de variante stacked. | ||
| rounded | boolean | false |
Aplica esquinas redondeadas tipo pill al boton. | ||
| block | boolean | false |
Expande el ancho para ocupar el espacio horizontal disponible. | ||
| useContrastColor | boolean | false |
Fuerza estrategia de color de contraste para casos tipo text/outlined. | ||
| elevation | "none" | "xs" | "sm" | "md" | "lg" | "xl" | "sm" |
Controla el nivel de elevacion cuando la variante admite elevacion. | ||
| icon | IconPath | IconPath[] | string | undefined |
Payload de icono para el contenido; soporta comportamiento icon-only si no hay slot default. | ||
| prependIcon | IconPath | IconPath[] | string | undefined |
Agrega un icono antes del contenido del slot default. | ||
| appendIcon | IconPath | IconPath[] | string | undefined |
Agrega un icono despues del contenido del slot default. | ||
| width | number | string | undefined |
Define ancho explicito con numero (px) o longitud CSS en string. | ||
| height | number | string | undefined |
Define alto explicito con numero (px) o longitud CSS en string. | ||