Visão geral

O Button é o componente de ação central do sistema. 6 variantes, 8 tamanhos e suporte nativo a ícones.

Todas as variantes

Import

import { Button } from "@/components/ui/button"

Variantes

Cada variante comunica uma intenção diferente. Use a variante certa para o contexto.

Default

Ação principal. Usa a cor primária do sistema.

Secondary

Ação secundária com fundo neutro.

Outline

Ação de baixo contraste com borda visível.

Ghost

Mínima interferência visual. Fundo aparece apenas no hover.

Destructive

Ação de risco: deletar, remover, encerrar.

Link

Aparência de link. Para navegação inline.

Tamanhos

O Button tem 8 tamanhos: 4 para texto e 4 para ícone isolado.

Com texto

default

Ícone isolado (icon)

icon-xs

icon-sm

icon

icon-lg

Com ícones

O Button suporta ícones antes ou depois do texto com espaçamento automático.

Botão com ícone à esquerda

import { PlusIcon } from "lucide-react"

<Button>
  <PlusIcon />
  Criar novo
</Button>

Estados

O Button tem estados de hover, foco, desabilitado e ativo.

Estado desabilitado

<Button disabled>Salvar</Button>

Padrão de implementação

Snippets dos contextos mais comuns.

Botão padrão

<Button>Salvar alterações</Button>

Dupla de ações (confirm / cancel)

<div className="flex gap-3">
  <Button variant="outline">Cancelar</Button>
  <Button>Confirmar</Button>
</div>

Botão de ícone

import { TrashIcon } from "lucide-react"

<Button size="icon" variant="ghost" aria-label="Excluir item">
  <TrashIcon />
</Button>

Como link (render prop)

import Link from "next/link"

<Button render={<Link href="/dashboard" />}>
  Ir para o painel
</Button>

Props e uso

API do Button disponível no projeto.

Props principais

variant

Define o estilo visual e a intenção do botão.

size

Controla a altura e padding do botão.

disabled

boolean

Desabilita interação e aplica opacidade reduzida.

render

ReactElement

Substitui o elemento raiz. Use render={<Link href='...' />} para navegação.

Acessibilidade

O componente tem foco visível completo via focus-visible:ring para navegação por teclado.

Para botões de ícone (sem texto), use aria-label descritivo para que leitores de tela possam identificar a ação.

Use disabled apenas quando a ação está temporariamente indisponível. Para ações permanentemente inacessíveis, remova o botão da interface.

MN Design System · Primary #5FC318 · Brand Green #AFF000 · Font: Inter