Button

Botão de ação para disparar eventos e submeter formulários. Compatível com `<form>` nativo via ElementInternals.

O mk-button é o componente primário de ação do Makuco UI. Suporta variantes visuais, ícones, estado de carregamento e integração nativa com formulários (type="submit" e type="reset").

Quando usar

Use o mk-button quando:

O usuário precisa confirmar uma ação, enviar um formulário ou acionar uma funcionalidade.
A ação tem resultado claro e imediato.
A hierarquia da tela precisa guiar o olhar para a ação mais importante.

Prefira alternativas quando:

A ação for apenas navegação entre páginas — use mk-link.
O espaço for muito reduzido e o contexto dispensar rótulo — considere um botão de ícone.

Anatomia

#	Parte	Obrigatório?	Função
1	Ícone esquerdo	Não	Reforça visualmente a ação. Posicionado antes do rótulo.
2	Rótulo	Sim	Texto que nomeia a ação. Deve ser curto e no imperativo.
3	Ícone direito	Não	Indica expansão, menu ou direção. Posicionado após o rótulo.

Variantes

Hierarquia

Variante	Quando usar
Filled	Ação principal da tela. Use apenas um por contexto.
Outlined	Ação secundária que precisa de visibilidade, mas não deve competir com o filled.
Ghost	Ação terciária ou em contextos com fundo colorido. Sem borda, apenas o texto.

import { MkButton } from '@db1/makuco-ui-react';

<MkButton variant="filled">Filled</MkButton>
<MkButton variant="outlined">Outlined</MkButton>
<MkButton variant="ghost">Ghost</MkButton>

<mk-button variant="filled">Filled</mk-button>
<mk-button variant="outlined">Outlined</mk-button>
<mk-button variant="ghost">Ghost</mk-button>

Tipo (kind)

Tipo	Quando usar
Default	Ações neutras ou positivas — confirmar, salvar, avançar.
Destructive	Ações irreversíveis — excluir, remover, desativar. A cor sinaliza risco.

Use kind="destructive" para ações irreversíveis ou perigosas.

<MkButton kind="destructive">Excluir</MkButton>
<MkButton kind="destructive" variant="outlined">Excluir</MkButton>

<mk-button kind="destructive">Excluir</mk-button>
<mk-button kind="destructive" variant="outlined">Excluir</mk-button>

Formato (shape)

Modo	Quando usar
Rounded	Padrão. Encaixa em interfaces com bordas quadradas ou levemente arredondadas.
Pilled	Cantos totalmente arredondados. Para interfaces com linguagem visual mais suave.

Tamanhos

Escale conforme a densidade da interface e a hierarquia do contexto: xs, sm, md, lg, xl.

<MkButton size="xs">xs</MkButton>
<MkButton size="sm">sm</MkButton>
<MkButton size="md">md</MkButton>
<MkButton size="lg">lg</MkButton>
<MkButton size="xl">xl</MkButton>

<mk-button size="xs">xs</mk-button>
<mk-button size="md">md</mk-button>
<mk-button size="xl">xl</mk-button>

Ícones

<MkButton leadingIcon="plus">Novo item</MkButton>
<MkButton trailingIcon="arrow-right">Continuar</MkButton>

<mk-button leading-icon="plus">Novo item</mk-button>
<mk-button trailing-icon="arrow-right">Continuar</mk-button>

Carregando

<MkButton loading>Salvando...</MkButton>

<mk-button [loading]="isSaving">Salvando...</mk-button>

Desabilitado

<MkButton disabled>Desabilitado</MkButton>

<mk-button [disabled]="isDisabled">Desabilitado</mk-button>

Estados

Estado	Quando aparece	O que muda visualmente
Habilitado	Estado inicial, ação disponível	Aparência padrão da variante
Hover	Cursor sobre o botão	Leve alteração de cor de fundo
Pressionado	Clique ou toque em andamento	Cor mais escura, feedback de ativação
Foco	Teclado ou acessibilidade	Anel de foco visível ao redor do botão
Desabilitado	Ação indisponível no momento	Opacidade reduzida, cursor bloqueado
Loading	Ação em processamento	Indicador de carregamento substitui o rótulo

Formulários

O mk-button é form-associated: type="submit" aciona form.requestSubmit() e type="reset" aciona form.reset().

<form onSubmit={handleSubmit}>
  <MkButton type="submit">Enviar</MkButton>
  <MkButton type="reset" variant="ghost">Limpar</MkButton>
</form>

<form (ngSubmit)="handleSubmit()">
  <mk-button type="submit">Enviar</mk-button>
  <mk-button type="reset" variant="ghost">Limpar</mk-button>
</form>

Props

Prop	Tipo	Padrão	Descrição
`variant`	`"filled" \| "outlined" \| "ghost"`	`"filled"`	Variante visual do botão.
`kind`	`"default" \| "destructive"`	`"default"`	Intenção visual — use `destructive` para ações perigosas.
`size`	`"xs" \| "sm" \| "md" \| "lg" \| "xl"`	`"md"`	Tamanho do botão.
`shape`	`"rounded" \| "pill"`	`"rounded"`	Formato das bordas.
`type`	`"button" \| "submit" \| "reset"`	`"button"`	Tipo do elemento `<button>` nativo.
`disabled`	`boolean`	`false`	Desabilita o botão.
`loading`	`boolean`	`false`	Exibe spinner e impede interação.
`fullwidth`	`boolean`	`false`	Expande para 100% da largura do contêiner.
`leadingIcon`	`IconName`	—	Ícone Lucide exibido antes do label.
`trailingIcon`	`IconName`	—	Ícone Lucide exibido após o label.
`name`	`string`	—	Atributo `name` do botão nativo (usado em formulários).
`value`	`string`	—	Atributo `value` do botão nativo (usado em formulários).

Eventos

Evento	Payload	Descrição
`mkClick`	`void`	Emitido ao clicar quando o botão não está `disabled` nem `loading`.

Slots

Slot	Descrição
(default)	Conteúdo do rótulo do botão.

Acessibilidade

Usa <button> nativo internamente — suporte a teclado (Enter / Space) e foco inclusos.
aria-busy="true" aplicado automaticamente no estado loading.
disabled reflete no atributo HTML, sendo ignorado por leitores de tela quando presente.
Rótulo obrigatório: todo botão precisa de texto legível. Botões apenas com ícone exigem aria-label descrevendo a ação — sem ele, usuários de leitores de tela não sabem o que o botão faz.
Foco visível: o anel de foco deve ser claramente perceptível ao navegar por teclado. Não remova o outline sem substituí-lo por outro indicador.
Estado desabilitado: botões desabilitados não recebem foco por padrão. Se o motivo da indisponibilidade for importante para o usuário entender, considere manter o botão focável e explicar o bloqueio com aria-describedby.
Ações destrutivas: use o tipo destructive com moderação e sempre acompanhe de confirmação — um Dialog de confirmação reduz erros irreversíveis.

Button

On this page