forms contract
Button
Primary interactive control for triggering actions. Use whenever a user must commit a decision (save, submit, confirm, cancel, navigate to a destructive flow).
Variants
- primary
- secondary
- ghost
- outline
- destructive
- link
Sizes
- sm
- md
- lg
- xl
Slots
- children
- leading
- trailing
Example
Primary CTA with leading icon, follows the variant + size + slot pattern.
<Button variant="primary" size="md" leading={<PlusIcon />}>New project</Button>Usage rule
Exactly one primary button per visual scope. If two are needed, demote one to secondary.
The full Button contract has 9 more rules and 3 more examples, plus the do-not patterns. Get the full recipe.