IconButton

Botão quadrado, só ícone — para ações compactas em toolbars, tabelas e cabeçalhos, onde um botão com texto não cabe. Compartilha o sistema de cor do Button (variant × tone), mas sem rótulo visível. Consome o DNA dos Fundamentos.

Playground

Importação

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

Uso básico

O ícone vem pela prop icon (nome do Icon do Arrow). label é obrigatório — é o nome acessível (aria-label).

<IconButton icon="edit-01" label="Editar" />
<IconButton icon="trash-01" tone="danger" label="Excluir" />
<IconButton icon="download" label="Baixar" />

Ênfase · variant

<IconButton icon="settings" variant="primary" label="Configurações" />
<IconButton icon="settings" variant="secondary" label="Configurações" />
<IconButton icon="settings" variant="ghost" label="Configurações" />  <!-- padrão -->

Intenção · tone

<IconButton icon="check-01" tone="accent" variant="primary" label="Confirmar" />
<IconButton icon="edit-01" tone="neutral" variant="primary" label="Editar" />
<IconButton icon="trash-01" tone="danger" variant="primary" label="Excluir" />

Tamanho · size

sm 32 · md 44 · lg 48 px. O md atinge o alvo de toque de 44px (Fund. 08).

<IconButton icon="settings" size="sm" label="Pequeno" />
<IconButton icon="settings" size="md" label="Médio" />  <!-- padrão, alvo 44px -->
<IconButton icon="settings" size="lg" label="Grande" />

Como link · href

Com href, renderiza um <a> (mantém a semântica de link). Atributos extras (target, rel) caem no elemento.

<IconButton
  icon="file-eye-01"
  href="/protos/exemplo/"
  target="_blank"
  rel="noopener"
  label="Visualizar protótipo"
/>

Estados

<IconButton icon="download" :loading="true" label="Baixando" />
<IconButton icon="edit-01" :disabled="true" label="Editar" />

API

Props

Prop	Tipo	Padrão	Descrição
icon	string	—	Nome do ícone Arrow (kebab-case). Obrigatório.
label	string	—	Nome acessível (aria-label + title). Obrigatório (icon-only).
variant	'primary' | 'secondary' | 'ghost'	'ghost'	Ênfase visual.
tone	'accent' | 'neutral' | 'danger'	'neutral'	Intenção semântica (cor via token).
size	'sm' | 'md' | 'lg'	'md'	Quadrado: 32 / 44 / 48 px (ícone 16 / 20 / 24).
href	string	—	Se definido, renderiza <a href> (ação-link).
type	'button' | 'submit' | 'reset'	'button'	type nativo (ignorado quando href).
disabled	boolean	false	Desabilita.
loading	boolean	false	Spinner + bloqueia.

Acessibilidade

• label é obrigatório — um botão só com ícone precisa de nome acessível (aria-label), senão é invisível pra leitores de tela.
• :focus-visible com anel de 3px (color.state.focus-ring); nunca removido.
• O md (44×44px) atende o alvo de toque mínimo do WCAG 2.5.5 / Fund. 08.
• Com href desabilitado, o href é removido e aria-disabled aplicado.

IconButton vs Button

Use IconButton quando a ação é reconhecível só pelo ícone e o espaço é curto (toolbar, linha de tabela, header). Use Button quando há texto — inclusive com ícone via slot #leading/#trailing.