PertecButton

Um componente de botão flexível e customizável para Vue 3, desenvolvido com Composition API e JavaScript.

Instalação

Importe o componente diretamente em seu projeto Vue 3:

import PertecButton from './PertecButton.vue'

Uso Básico

<template>
  <PertecButton>Clique aqui</PertecButton>
</template>

Props

| Prop | Tipo | Padrão | Descrição | |------|------|--------|-----------| | variant | String | 'primary' | Variação visual do botão: 'primary', 'secondary', 'tertiary', 'overlay', 'overlay-inverted' | | size | String | 'default' | Tamanho do botão: 'mini', 'default' | | isLoading | Boolean | false | Exibe spinner de carregamento | | isActive | Boolean | false | Estado ativo do botão | | disabled | Boolean | false | Desabilita o botão | | onNeutralBg | Boolean | false | Aplica estilo para fundo neutro (apenas para variant tertiary) | | iconOnly | Boolean | false | Força o estilo de botão apenas com ícone | | className | String | '' | Classes CSS adicionais | | type | String | 'button' | Tipo do elemento button HTML |

Variações (Variants)

Primary

Botão principal com cor de destaque.

<PertecButton variant="primary">Botão Principal</PertecButton>

Secondary

Botão secundário com borda.

<PertecButton variant="secondary">Botão Secundário</PertecButton>

Tertiary

Botão terciário transparente.

<PertecButton variant="tertiary">Botão Terciário</PertecButton>
<PertecButton variant="tertiary" onNeutralBg>Em Fundo Neutro</PertecButton>

Overlay

Botão para uso sobre imagens ou fundos escuros.

<PertecButton variant="overlay">Botão Overlay</PertecButton>
<PertecButton variant="overlay-inverted">Overlay Invertido</PertecButton>

Tamanhos

Default

Tamanho padrão (48px de altura).

<PertecButton size="default">Botão Padrão</PertecButton>

Mini

Tamanho reduzido (28px de altura).

<PertecButton size="mini">Botão Mini</PertecButton>

Estados

Loading

Exibe um spinner de carregamento.

<PertecButton :isLoading="true">Carregando...</PertecButton>

Active

Estado ativo/selecionado.

<PertecButton :isActive="true">Botão Ativo</PertecButton>

Disabled

Estado desabilitado.

<PertecButton :disabled="true">Botão Desabilitado</PertecButton>

Botões com Ícones

Ícone + Texto

<PertecButton>
  <i class="ri-download-line"></i>
  Download
</PertecButton>

Apenas Ícone

O componente detecta automaticamente quando há apenas um ícone e aplica o estilo circular.

<PertecButton>
  <i class="ri-heart-line"></i>
</PertecButton>

<!-- Ou force o estilo icon-only -->
<PertecButton :iconOnly="true">
  <svg>...</svg>
</PertecButton>

Alturas Personalizadas

Use classes de altura personalizadas via className:

<PertecButton className="h-9">Altura 36px</PertecButton>
<PertecButton className="h-12">Altura 48px</PertecButton>
<PertecButton className="h-14">Altura 56px</PertecButton>

Eventos

O componente aceita todos os eventos nativos de button:

<PertecButton @click="handleClick">Clique</PertecButton>
<PertecButton @mouseenter="handleHover">Hover</PertecButton>

Exemplos Completos

Botão de Ação Principal

<PertecButton 
  variant="primary" 
  :isLoading="submitting"
  @click="submitForm"
>
  Salvar Dados
</PertecButton>

Botão de Navegação

<PertecButton 
  variant="tertiary"
  size="mini"
  @click="goBack"
>
  <i class="ri-arrow-left-line"></i>
  Voltar
</PertecButton>

Botão de Curtir

<PertecButton 
  variant="tertiary"
  :isActive="liked"
  :iconOnly="true"
  @click="toggleLike"
>
  <i :class="liked ? 'ri-heart-fill' : 'ri-heart-line'"></i>
</PertecButton>

Modo Escuro

O componente suporta automaticamente modo escuro através de:

• Media query @media (prefers-color-scheme: dark)
• Classe dark no elemento html

Variáveis CSS

O componente utiliza um sistema de design tokens com variáveis CSS para cores:

• --primary-*: Cores principais (azul)
• --neutral-*: Cores neutras (cinza)
• Suporte automático para modo escuro

Acessibilidade

• Suporte completo a navegação por teclado
• Estados de foco visíveis
• Semântica HTML adequada
• Compatível com leitores de tela

Compatibilidade

• Vue 3.x
• Browsers modernos (ES6+)
• Suporte a SSR/SSG