Botão

Um botão é aquilo em que se carrega para algo acontecer. button() desenha um <button> a sério, com type="button", por isso pôr um dentro de um formulário não o submete por acidente.

Botão básico

A predefinição é um botão sólido, primary, de tamanho médio. Os filhos são a etiqueta; tudo o resto é uma prop.

stack({ direction: 'row', gap: 'md' },
  button('Um'),
  button('Dois'),
  button('Três'),
)

Variantes

Cinco níveis de ênfase, do único apelo à ação da página até algo que se lê como uma ligação.

stack({ direction: 'row', gap: 'md', wrap: true },
  button({ variant: 'solid' }, 'Solid'),
  button({ variant: 'soft' }, 'Soft'),
  button({ variant: 'outline' }, 'Outline'),
  button({ variant: 'ghost' }, 'Ghost'),
  button({ variant: 'link' }, 'Link'),
)

Cores

Todos os componentes com tema bebem das mesmas cinco paletas, por isso um botão color: 'danger' e um alerta color: 'danger' combinam sem que nenhum saiba do outro.

stack({ direction: 'row', gap: 'md', wrap: true },
  button({ color: 'primary' }, 'Primary'),
  button({ color: 'neutral' }, 'Neutral'),
  button({ color: 'success' }, 'Success'),
  button({ color: 'warning' }, 'Warning'),
  button({ color: 'danger' }, 'Danger'),
)

stack({ direction: 'row', gap: 'md', wrap: true },
  button({ variant: 'soft', color: 'primary' }, 'Primary'),
  button({ variant: 'soft', color: 'neutral' }, 'Neutral'),
  button({ variant: 'soft', color: 'success' }, 'Success'),
  button({ variant: 'soft', color: 'warning' }, 'Warning'),
  button({ variant: 'soft', color: 'danger' }, 'Danger'),
)

Tamanhos

stack({ direction: 'row', gap: 'md', align: 'center', wrap: true },
  button({ size: 'sm' }, 'Pequeno'),
  button({ size: 'md' }, 'Médio'),
  button({ size: 'lg' }, 'Grande'),
)

Ícones

Passa qualquer marcação SVG em startIcon ou endIcon. Os ícones são dimensionados em em, por isso acompanham o botão em vez de precisarem de um tamanho próprio.

stack({ direction: 'row', gap: 'md', wrap: true },
  button({
    startIcon: icon('plus'),
  }, 'Página nova'),
  button({
    variant: 'outline',
    endIcon: icon('arrow-right'),
  }, 'Continuar'),
)

Botão de ícone

iconButton() é um botão quadrado com um único ícone. O seu label é obrigatório — passa a ser o nome acessível que o ícone sozinho não consegue dar, e a dica ao passar o rato.

stack({ direction: 'row', gap: 'md' },
  iconButton({ label: 'Adicionar', icon: icon('plus') }),
  iconButton({ label: 'Editar', variant: 'soft', icon: icon('edit') }),
  iconButton({ label: 'Eliminar', variant: 'ghost', color: 'danger', icon: icon('trash') }),
)

A carregar e desativado

loading troca por um indicador giratório e define aria-busy, deixando a etiqueta no lugar para que o botão não mude de largura a meio da ação.

stack({ direction: 'row', gap: 'md', wrap: true },
  button({ loading: true }, 'A guardar'),
  button({ variant: 'outline', loading: true }, 'A verificar'),
  button({ disabled: true }, 'Desativado'),
  button({ variant: 'soft', disabled: true }, 'Desativado'),
)

Ligações

Dá a um botão um href e ele desenha um <a> — o elemento certo para algo que navega. As âncoras não têm estado desativado, por isso disabled torna-se aria-disabled e retira-a da ordem de tabulação.

Ler a documentação Componentes Ligação simples

stack({ direction: 'row', gap: 'md', wrap: true },
  button({ href: '/pt/docs' }, 'Ler a documentação'),
  button({ href: '/pt/docs/ui', variant: 'outline' }, 'Componentes'),
  button({ href: '/pt/docs', variant: 'link' }, 'Ligação simples'),
)

Largura total

button({ block: true, size: 'lg' }, 'Publicar o site')

Props

Tudo o que não estiver listado aqui cai no elemento renderizado como atributo — id, data-*, onclick, popovertarget e os restantes.

Prop	Tipo	Predefinição	Descrição
`variant`	`'solid' \| 'soft' \| 'outline' \| 'ghost' \| 'link'`	`'solid'`	Quanta ênfase o botão carrega.
`color`	`'primary' \| 'neutral' \| 'success' \| 'warning' \| 'danger'`	`'primary'`	De que paleta bebe.
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Altura, espaçamento e tamanho da etiqueta.
`href`	`string`	—	Desenha um <a> em vez de um <button>.
`startIcon`	`string`	—	Marcação colocada antes da etiqueta.
`endIcon`	`string`	—	Marcação colocada depois da etiqueta.
`loading`	`boolean`	`false`	Mostra um indicador giratório e define aria-busy.
`disabled`	`boolean`	`false`	Desativa o botão, ou marca uma ligação como aria-disabled.
`block`	`boolean`	`false`	Estica até à largura total do contentor.
`type`	`'button' \| 'submit' \| 'reset'`	`'button'`	Só para a forma <button>.

iconButton() aceita as mesmas props mais um label obrigatório e um icon.