COMPONENT
Button
Primary interactive element for user actions. Available in 6 variants and 4 sizes.
Variants
<Button variant="primary">Primary</Button>
<Button variant="secondary">Secondary</Button>
<Button variant="outline">Outline</Button>
<Button variant="ghost">Ghost</Button>
<Button variant="danger">Danger</Button>
<Button variant="link">Link</Button>Sizes
<Button size="sm">Small</Button>
<Button size="md">Medium</Button>
<Button size="lg">Large</Button>States
Usage Guidelines
| Variant | When to use |
|---|---|
primary | Main action per screen (1 per view) |
secondary | Gold accent — sparingly for brand highlights |
outline | Secondary actions: Cancel, Back, Filter |
ghost | Tertiary actions, table row actions |
danger | Destructive operations: Delete, Remove |
link | Inline text actions |
Do's and Don'ts
Do
Use one primary button per view for the main CTA.
Don't
Don't use multiple primary buttons in the same view — it dilutes focus.
Do
Use outline or ghost for secondary actions alongside primary.
Don't
Don't overuse the gold (secondary) variant — reserve for special highlights.
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | "primary" | "secondary" | "outline" | "ghost" | "danger" | "link" | "primary" | Visual style of the button |
| size | "sm" | "md" | "lg" | "icon" | "md" | Size of the button |
| loading | boolean | false | Shows spinner and disables interaction |
| disabled | boolean | false | Disables the button |
| children* | ReactNode | — | Button content |
React Native
On mobile, hover states don't exist. The button uses Pressable with press opacity (0.7) instead. The loading state shows a native ActivityIndicator.
Mobile usage
import { Button } from "@/components/mobile";
<Button variant="primary" onPress={handleSubmit}>
Salvar
</Button>
<Button variant="danger" loading>
Excluindo...
</Button>