Button
El componente v-btn reemplaza el botón html estándar con un diseño de material design y una multitud de opciones. Cualquier clase auxiliar de color puede ser utilizada para alterar el color del texto o del fondo.
API
Posiciona el elemento como absolute
La clase que se aplica cuando el componente está activo. Advertencia: Dependiendo del componente, esto puede traer efectos secundarios. Si necesitas agregar una clase personalizada encima de la default, házlo así: active-class="default-class your-class"
Prop router-link del Vue Router
Expande el botón al 100% del espacio disponible
Alínea el componente hacia abajo
Aplica el color especificado al control.
Aplica la variante del tema dark
Quita la sombra al botón
Route item deshabilitado
Coincidir con el link exactamente. Sin esto, "/" coincidirá con todas las rutas
Prop router-link del Vue Router
Hace el botón redondo
Posiciona el elemento como fixed
Quita el color del fondo del botón
Denotará la etiqueta del componente como <a>
Denota al botón como un ícono, redondo y plano
Controla el estado activo del botón
Botón de tamaño grande
Alínea el componente hacia la izquierda
Aplica la variante del tema light
Agrega un ícono animado "loading"
Especifica el link como un nuxt-link
El botón tendrá un contorno
Prop router-link del Vue Router
Alínea el componente hacia la derecha
Aplica la directiva v-ripple
El botón será redondeado de los lados
Botón de tamaño pequeño
Especifica una etiqueta personalizada para ser usada en el componente
Especifica el atributo target, sólo funciona para la etiqueta <a>
Denotará la etiqueta del componente como <router-link>
Alínea el componente hacia arriba
Configura el atributo type del botón
Controla la visibilidad
Ejemplos
Flat
Los botones flat no tienen sombra ni color de fondo. Sólo cuando se pasa el mouse por encima de ellos es que se muestra el contenedor del botón.
Raised
Los botones raised tienen una sombra que incrementa cuando se hace click en ellos. Este es el estilo por default.
Depressed
Los botones depressed mantienen su color de fondo, pero no tienen sombra.
Variantes de Button Dropdown
Los button dropdowns son selects regulares con estilos adicionales.
Ícono
Los íconos pueden ser usados como el contenido principal de un botón.
Floating
Los floating buttons son redondos y generalmente contienen un ícono.
Loaders
Al utilizar la prop loading puedes notificar al usuario que hay una actividad en proceso. El comportamiento default es que se aplica un componente v-progress-circular pero esto puede ser personalizado.
Tamaños
Los botones pueden obtener diferentes tamaños para poder ser usados en una multitud de escenarios.
Outline
Los outline buttons heredan sus bordes del color aplicado actual.
Round
Los rounded buttons se comportan de la misma forma que los botones regulares pero tienen bordes redondeados.
Block
Los block butons se extienden hasta abarcar el ancho total disponible.