Button

import { Button } from "@t2-educacao/midas";

UsoCopy Anchor Link

<Button>Salvar</Button>
<Button variant="outline">Cancelar</Button>

PropsCopy Anchor Link

Aceita todas as props de <button> (onClick, disabled, type...) mais:

type é "button" por padrão (não envia formulários sem querer). Use type="submit" em formulários. loading não tem efeito com asChild.

VariantesCopy Anchor Link

TamanhosCopy Anchor Link

ExemplosCopy Anchor Link

Com íconeCopy Anchor Link

O ícone é dimensionado pelo size do botão. Não passe size para o ícone.

import { ArrowRight, Plus } from "@t2-educacao/midas/icons";

<Button><Plus /> Novo curso</Button>
<Button size="lg">Começar <ArrowRight /></Button>

Só íconeCopy Anchor Link

import { Trash } from "@t2-educacao/midas/icons";

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

ArredondadoCopy Anchor Link

<Button rounded>Inscrever</Button>
<Button size="icon" rounded aria-label="Adicionar"><Plus /></Button>

CarregandoCopy Anchor Link

<Button loading={isPending} type="submit">
  {isPending ? "Salvando" : "Salvar"}
</Button>

Com atalho de tecladoCopy Anchor Link

import { Button, Kbd } from "@t2-educacao/midas";

<Button variant="outline">
  Buscar <Kbd>⌘K</Kbd>
</Button>

Como link (Next.js)Copy Anchor Link

import Link from "next/link";

<Button asChild>
  <Link href="/cursos">Ver cursos</Link>
</Button>

Largura totalCopy Anchor Link

<Button className="w-full">Continuar</Button>

Para agrupar botões, veja ButtonGroup.

AcessibilidadeCopy Anchor Link

• Usa <button> nativo: foco, Enter e Espaço funcionam sem configuração.
• Anel de foco visível (focus-visible) de 3px com o token ring.
• loading marca aria-busy="true" e desabilita o botão; mantenha um texto que descreva a ação.
• disabled remove o botão da navegação por teclado. Se o usuário precisa saber por que está desabilitado, mostre o motivo em texto próximo.
• Tamanhos icon* exigem aria-label.

Não façaCopy Anchor Link

• <Link><Button /></Link>: gera <button> dentro de <a> (HTML inválido). Use asChild.
• Vários default lado a lado: só um é o principal.
• className="bg-[#009adb]": use a variante ou tokens.