Back to components
UI component

Button

Dark-only pressable button with primary, secondary, ghost, destructive, and text variants. Loading spinner, icons via Ionicons, and full-width support.

Install

What it does

  • 5 variants: primary, secondary, ghost, destructive, text
  • 3 sizes: sm, md, lg with responsive hit areas
  • Loading state with ActivityIndicator spinner
  • Leading and trailing icon support via @expo/vector-icons (Ionicons)
  • Full-width mode with stretch alignment
  • Disabled state with reduced opacity

When to use

Use it

Any touchable action — form submission, navigation CTAs, modal triggers, list item actions.

Skip it

Inline text interactions (use a plain Pressable or a text-only variant).

Files & routes added

  • components/ui/button.tsx

Related components