Button

Botão de ação do Arrow Design System. A cor comunica intenção (não decoração) e a forma segue a âncora de 8px — consome diretamente o DNA dos Fundamentos (01 Cor, 02 Tipografia, 03 Espaçamento, 04 Forma, 06 Movimento).

Playground

Importação

import { Button } from '@arrow/components-vue'

Uso básico

O texto vem pela prop label ou pelo slot padrão.

<Button label="Salvar" />
<Button>Via slot</Button>

Ênfase · variant

Três níveis de ênfase: primary (preenchido), secondary (contorno) e ghost (só texto). É a hierarquia visual — qual ação puxa mais o olho.

<Button variant="primary">Primary</Button>
<Button variant="secondary">Secondary</Button>
<Button variant="ghost">Ghost</Button>

Intenção · tone

A cor é semântica: accent (ação padrão), neutral (secundária) e danger (destrutiva). Combina com qualquer variant.

<Button tone="accent">Accent</Button>
<Button tone="neutral">Neutral</Button>
<Button tone="danger">Danger</Button>

A matriz variant × tone é ortogonal:

<Button variant="secondary" tone="danger">Excluir</Button>
<Button variant="ghost" tone="neutral">Cancelar</Button>
<Button variant="primary" tone="danger">Apagar tudo</Button>

Tamanhos · size

Três tamanhos da escala dos Fundamentos: sm · md (padrão, âncora 8px) · lg (hero CTA, 10px).

<Button size="sm">Small</Button>
<Button size="md">Medium</Button>
<Button size="lg">Large</Button>

Com ícones · slots leading / trailing

Encaixe o Icon do Arrow nos slots. Sem prop de ícone, sem Material Icons — composição limpa.

<Button>
  <template #leading><Icon name="save-01" /></template>
  Salvar
</Button>

<Button variant="secondary">
  Avançar
  <template #trailing><Icon name="arrow-right" /></template>
</Button>

<Button variant="ghost" tone="danger">
  <template #leading><Icon name="trash-01" /></template>
  Excluir
</Button>

Apenas ícone

Sem texto, use aria-label para descrever a ação (acessibilidade).

<Button variant="ghost" aria-label="Editar">
  <template #leading><Icon name="edit-01" /></template>
</Button>

Estados

Loading

Mostra um spinner e bloqueia a interação (aria-busy).

<Button :loading="true">Salvando…</Button>
<Button variant="secondary" :loading="true">Carregando</Button>

Disabled

<Button :disabled="true">Primary</Button>
<Button variant="secondary" :disabled="true">Secondary</Button>
<Button variant="ghost" :disabled="true">Ghost</Button>

Largura total · block

<Button block>
  <template #leading><Icon name="send-01" /></template>
  Enviar proposta
</Button>

API

Props

Prop	Tipo	Padrão	Descrição
variant	'primary' | 'secondary' | 'ghost'	'primary'	Ênfase visual: preenchido / contorno / só texto.
tone	'accent' | 'neutral' | 'danger'	'accent'	Intenção semântica (decide a cor via token).
size	'sm' | 'md' | 'lg'	'md'	Tamanho. md é a âncora (8px); lg é hero CTA (10px).
type	'button' | 'submit' | 'reset'	'button'	type nativo do <button>.
disabled	boolean	false	Desabilita o botão (atributo nativo).
loading	boolean	false	Mostra spinner e bloqueia a interação.
block	boolean	false	Ocupa 100% da largura do container.
label	string	—	Texto do botão. Alternativa ao slot default.

Slots

Nome	Descrição
default	Conteúdo do botão (tem prioridade sobre label).
leading	Elemento antes do texto (ex.: <Icon>). Some durante o loading.
trailing	Elemento depois do texto.

Eventos

Atributos e listeners caem direto no <button> nativo. Use @click normalmente — o clique não dispara quando disabled ou loading (o <button> fica desabilitado).

Acessibilidade

• Elemento <button> nativo: navegação por teclado e semântica de fábrica.
• :focus-visible com anel de 3px (color.state.focus-ring) — nunca removido.
• disabled/loading aplicam o atributo disabled nativo (bloqueiam foco e clique); loading adiciona aria-busy.
• Em botões apenas ícone, forneça aria-label descrevendo a ação.

Migração do MeButton

Este Button substitui o antigo MeButton. O que mudou — e por quê:

• variant="blue|red|gray|orange|premium" → tone="accent|neutral|danger". Cor é intenção, não decoração (Fund. 01). orange/premium não são intenção de botão; premium é cor de tag/feedback.
• outlined/flat/invertedColor/custom → variant="primary|secondary|ghost". Ênfase em vez de flags soltas. custom (cores hex livres) foi removido — proibido por Fundamento.
• icon="..." (Material Icons) → slots #leading/#trailing com o Icon do Arrow. iconPosition="top|bottom" saiu (botão é horizontal).
• active/activePink/activeYellow → removidos. Estado de filtro/toggle pertence a um futuro FilterButton/Chip, não ao Button.
• notificationDot → removido. Composição com Badge.
• Novo: size (sm/md/lg), block, type nativo.