COMPONENT
button
Implemented on both platforms.
Platform coverage
Generated from the source tree.
WEB
WEB: YES- Source
- apps/web/components/ui/button.tsx
- Imported by
- 86 files
- Lines
- 66
- Exports
- Button, buttonVariants
MOBILE
MOBILE: YES- Source
- apps/mobile/components/ui/button.tsx
- Imported by
- 28 files
- Lines
- 97
- Exports
- Button, buttonTextVariants, buttonVariants
Variants
Parsed from the component's CVA config. A red option exists on web but not on mobile.
VARIANT
defaultdestructiveoutlinesecondaryghostlinkinverseactionSIZE
defaultxssmlgiconicon-xsicon-smicon-lgExamples
Live components. Switch themes in the header to see them re-render.
VARIANTS
`action` is Checkpoints' own emphasis variant, separate from `default`. It marks the two writes that drive the product: log a checkpoint, log a review.
SIZES
Sizes are responsive by design: `default` is h-11 on touch and h-9 from the `sm` breakpoint up, so the same markup meets touch-target minimums on phones without looking oversized on desktop.
WITH ICONS
Icon sizing is handled by the button itself — no per-instance size classes.