Button

O componente v-btn substitui o tema do botão html padrão pelo material design com grande variedade de opções. Qualquer classe de ajuda de cor pode ser usada para alterar a cor do fundo ou texto.

API

v-btn
Nome
absolute
Padrão
false
Tipos
boolean

Components.Buttons.

Nome
active-class
Padrão
'v-btn--active'
Tipos
string

Components.Buttons.

Nome
append
Padrão
false
Tipos
boolean

Components.Buttons.

Nome
block
Padrão
false
Tipos
boolean

Expande o botão para 100% do espaço disponível

Nome
bottom
Padrão
false
Tipos
boolean

Components.Buttons.

Nome
color
Padrão
undefined
Tipos
string

Components.Buttons.

Nome
dark
Padrão
false
Tipos
boolean

Components.Buttons.

Nome
depressed
Padrão
false
Tipos
boolean

Remove a sombra do botão

Nome
disabled
Padrão
false
Tipos
boolean

Components.Buttons.

Nome
exact
Padrão
false
Tipos
boolean

Components.Buttons.

Nome
exact-active-class
Padrão
undefined
Tipos
string

Components.Buttons.

Nome
fab
Padrão
false
Tipos
boolean

Torna o bottão redondo

Nome
fixed
Padrão
false
Tipos
boolean

Components.Buttons.

Nome
flat
Padrão
false
Tipos
boolean

Remove a cor de fundo do botão

Nome
href
Padrão
undefined
Tipos
string | object

Components.Buttons.

Nome
icon
Padrão
false
Tipos
boolean

Designa o botão como ícone - redondo e plano

Nome
input-value
Padrão
undefined
Tipos
any

Controla o estado ativo do botão

Nome
large
Padrão
false
Tipos
boolean

Botão de tamanho grande

Nome
left
Padrão
false
Tipos
boolean

Components.Buttons.

Nome
light
Padrão
false
Tipos
boolean

Components.Buttons.

Nome
loading
Padrão
false
Tipos
boolean

Adiciona uma animação de ícone de carregamento

Nome
nuxt
Padrão
false
Tipos
boolean

Components.Buttons.

Nome
outline
Padrão
false
Tipos
boolean

O botão terá um contorno

Nome
replace
Padrão
false
Tipos
boolean

Components.Buttons.

Nome
right
Padrão
false
Tipos
boolean

Components.Buttons.

Nome
ripple
Padrão
undefined
Tipos
boolean | object

Aplica a diretiva v-ripple

Nome
round
Padrão
false
Tipos
boolean

O botão terá cantos arredondados

Nome
small
Padrão
false
Tipos
boolean

Botão de tamanho pequeno

Nome
tag
Padrão
'button'
Tipos
string

Components.Buttons.

Nome
target
Padrão
undefined
Tipos
string

Components.Buttons.

Nome
to
Padrão
undefined
Tipos
string | object

Components.Buttons.

Nome
top
Padrão
false
Tipos
boolean

Components.Buttons.

Nome
type
Padrão
'button'
Tipos
string

Define o tipo do botão

Nome
value
Padrão
undefined
Tipos
any

Controla visibilidade

Exemplos

Plano

Botões planos não tem sombra ou fundo. O contorno do botão é exibido somente ao passar o mouse.

Em relevo

Os botões em relevo têm sombra que aumenta quando clicado. Este é o estilo padrão.

Rebaixado

Botões rebaixados ainda mantêm a sua cor de fundo, mas não tem sombra.

Variantes de Botão com Menu Suspenso

Os botões com menu suspenso são seleções normais com estilo adicional.

Ícone

Ícones podem ser usados para o contúdo principal de um botão.

Flutuante

Botões flutuantes são redondos e geralmente contêm um ícone.

Carregamento

Usando a propriedade de carregamento (loading), você pode notificar um usuário de que está ocorrendo um processamento. O comportamento padrão é usar um componente v-progress-circular, mas isso pode ser personalizado.

Dimensionamento

Botões podem receber diferentes opções de tamanhos para se adequarem a uma infinidade de cenários.

Contorno

Botões com contorno herdam suas bordas da cor atual aplicada.

Arredondado

Botões arredondados comportam da mesma maneira que botões comuns, mas possuem cantos arredondadas.

Bloco

Botões de bloco preenchem toda a largura disponível.

Edit this page | language on Github
Vuetify 3 is now available!The latest version of Vuetify is now available!
Learn about Vuetify 3's new features and functionality for modern Vue applications
Start exploringExplore