Button Variants
All variants × all sizes from app/components/ui/Buttons.tsx
Preset Components
| Variant | size="default" | size="sm" | size="lg" | size="icon" | size="noSpacing" |
|---|
| Primary (default) | | | | | |
| Secondary | | | | | |
| Tertiary | | | | | |
| Outline | | | | | |
| Round | | | | | |
| Destructive | | | | | |
| Ghost | | | | | |
| Link | | | | | |
Disabled State
With Icons
Icon + label
Icon only (size="icon")
Label + trailing icon
Loading state (spinning icon)
With App SVG Icons
Icon + label (currentColor icons inherit button text color)
Icon-only with app SVGs (size="icon")
Large decorative SVG (e.g. card action button)
BookmarkButton
All three variants × both bookmark states × loading & disabled. Click any button to toggle its state.
variant="default"
not bookmarked (click to toggle) variant="round"
not bookmarked (click to toggle) variant="text"
not bookmarked (click to toggle) not bookmarked bookmarked disabled + bookmarked