Botões
O componente padrão para botões se chama Btn.
AVISO
Deve ser utilizado no lugar do <button> nativo.
Propriedades
Variantes
A prop variant define a variação de estilo aplicada ao botão. O padrão é primary.
vue
<template>
<btn variant="primary">Primary</btn>
<btn variant="secondary">Secondary</btn>
<btn variant="ghost">Ghost</btn>
</template>
<script lang="ts" setup>
import { Btn } from "@nexdom/uimed-vue/components";
</script>Cores
A prop color aceita um dos valores da paleta do componente: primary, secondary, positive, informative, caution ou danger.
vue
<template>
<btn color="primary">Primary</btn>
<btn color="secondary">Secondary</btn>
<btn color="positive">Positive</btn>
<btn color="informative">Informative</btn>
<btn color="caution">Caution</btn>
<btn color="danger">Danger</btn>
</template>
<script lang="ts" setup>
import { Btn } from "@nexdom/uimed-vue/components";
</script>Estados
Desabilitado
Utilize a prop disabled para remover a possibilidade de clicar ou focar no botão.
vue
<template>
<btn disabled>Desabilitado</btn>
</template>
<script lang="ts" setup>
import { Btn } from "@nexdom/uimed-vue/components";
</script>Carregamento
A prop loading exibe um indicador de carregamento e desabilita a interação com o botão enquanto ativa.
vue
<template>
<btn loading>Carregando</btn>
</template>
<script lang="ts" setup>
import { Btn } from "@nexdom/uimed-vue/components";
</script>Eventos
Clique
O evento click é emitido ao clicar no botão, repassando o MouseEvent nativo. Ele não é disparado quando o botão está disabled.
0 clique(s)
vue
<template>
<btn @click="onClick">Me clique</btn>
</template>
<script lang="ts" setup>
import { ref } from "vue";
import { Btn } from "@nexdom/uimed-vue/components";
const clicks = ref(0);
function onClick() {
clicks.value++;
}
</script>Playground
Experimente as combinações de props do componente.
primary
primary
Ver também
Consulte a referência de API do Btn para a lista completa de props, slots e eventos.