Button

Primitives

Feature-rich button with 6 variants, icon-only mode, button groups, rounded pill shape, custom colors, haptic feedback, and spring animation.

GitHub

Installation

bash

npx native-mate add button

Examples

#FAFAFA

Radius100%

Usage

tsx

import { Button, ButtonGroup } from '~/components/ui/button'

// Variants
<Button variant="default">Default</Button>
<Button variant="outline">Outline</Button>
<Button variant="ghost">Ghost</Button>
<Button variant="destructive">Delete</Button>
<Button variant="secondary">Secondary</Button>
<Button variant="link">Learn more</Button>

// Sizes
<Button size="sm">Small</Button>
<Button size="md">Medium</Button>
<Button size="lg">Large</Button>

// Rounded pill
<Button rounded>Rounded</Button>

// Icon only (square or circle)
<Button iconOnly iconLeft={<PlusIcon />} />
<Button iconOnly rounded iconLeft={<HeartIcon />} />

// With icons
<Button iconLeft={<PlusIcon />}>Add Item</Button>
<Button iconRight={<ArrowIcon />} variant="outline">Next</Button>

// Custom color
<Button color="#6366f1">Indigo</Button>
<Button color="#10b981" variant="outline">Emerald</Button>

// Full width
<Button fullWidth>Save Changes</Button>

// Haptic feedback
<Button haptic="light">Light tap</Button>
<Button haptic="heavy">Strong tap</Button>
<Button haptic="none">No haptic</Button>

// Button group (segmented control)
<ButtonGroup fullWidth>
  <Button>Day</Button>
  <Button>Week</Button>
  <Button>Month</Button>
</ButtonGroup>

<ButtonGroup fullWidth>
  <Button variant="outline">Cancel</Button>
  <Button variant="default">Confirm</Button>
</ButtonGroup>

// Loading & disabled
<Button loading>Saving…</Button>
<Button disabled>Disabled</Button>

Props

Prop	Type	Default	Description
variant	"default" \| "outline" \| "ghost" \| "destructive" \| "secondary" \| "link"	"default"	Visual style of the button.
size	"sm" \| "md" \| "lg"	"md"	Controls height and padding.
loading	boolean	false	Shows an ActivityIndicator and disables press.
disabled	boolean	false	Reduces opacity and disables press.
fullWidth	boolean	false	Stretches button to fill container width.
rounded	boolean	false	Applies fully rounded pill shape (borderRadius: 9999).
iconOnly	boolean	false	Square/circle button with only an icon, no text.
haptic	"light" \| "medium" \| "heavy" \| "none"	"light"	Haptic feedback intensity on press. Requires expo-haptics (optional).
color	string	—	Custom color override. Sets background for default, border for outline.
iconLeft	React.ReactNode	—	Element rendered before the label.
iconRight	React.ReactNode	—	Element rendered after the label.
onPress	() => void	—	Press handler.

Example

tsx

import { Button, ButtonGroup } from '~/components/ui/button'
import { View } from 'react-native'

export function ButtonExamples() {
  return (
    <View style={{ gap: 16, padding: 16 }}>
      {/* All variants */}
      <Button variant="default">Default</Button>
      <Button variant="outline">Outline</Button>
      <Button variant="ghost">Ghost</Button>
      <Button variant="destructive">Destructive</Button>
      <Button variant="secondary">Secondary</Button>
      <Button variant="link">Link</Button>

      {/* Rounded pill */}
      <Button rounded>Rounded</Button>
      <Button rounded variant="outline">Pill Outline</Button>

      {/* Icon only */}
      <View style={{ flexDirection: 'row', gap: 12 }}>
        <Button iconOnly iconLeft={<PlusIcon />} />
        <Button iconOnly rounded iconLeft={<HeartIcon />} />
      </View>

      {/* With icons */}
      <Button iconLeft={<PlusIcon />}>Add Item</Button>

      {/* Custom colors */}
      <Button color="#6366f1">Indigo</Button>
      <Button color="#10b981">Emerald</Button>

      {/* Button group */}
      <ButtonGroup fullWidth variant="outline">
        <Button>Day</Button>
        <Button>Week</Button>
        <Button>Month</Button>
        <Button>Year</Button>
      </ButtonGroup>

      <ButtonGroup fullWidth>
        <Button variant="outline">Cancel</Button>
        <Button variant="default">Confirm</Button>
      </ButtonGroup>

      {/* Full width */}
      <Button fullWidth>Full Width</Button>

      {/* States */}
      <Button loading>Loading…</Button>
      <Button disabled>Disabled</Button>
    </View>
  )
}

Accessibility

Feature	Detail
Role	accessibilityRole="button" is set automatically.
Label	accessibilityLabel is auto-derived from text children, or pass a custom one.
Disabled state	accessibilityState={{ disabled }} is set when disabled or loading.
Busy state	accessibilityState={{ busy: true }} is set when loading.
Keyboard	Fully pressable via assistive technology. Disabled buttons prevent interaction.

Separator

Card