Button

Ação tocável. Primário em superfície invertida, secundário em container, ghost em texto.

Variantes

import Button from "@components/Button/Button.astro";

<Button variant="primary">Confirmar</Button>
<Button variant="secondary">Cancelar</Button>
<Button variant="ghost">Pular</Button>
<Button variant="secondary" size="sm">Pequeno</Button>

Largura total

Com block, ocupa toda a largura (padrão dos CTAs do protótipo).

<Button variant="primary" block>Confirmar Pix</Button>

Props

PropTipoPadrão
variant "primary" | "secondary" | "ghost" "primary"
size "md" | "sm" "md"
block boolean (largura total) false
onClick string (handler global) —
type string "button"

Tokens usados

  • primary: bg-inverse-surface + text-inverse-on-surface
  • secondary: bg-surface-container-high + border-outline-variant
  • ghost: text-on-surface-variant
  • Forma: rounded-large (16px) · Tipo: text-section / font-semibold