Button

A versatile, accessible button component

A flexible button component designed for all user interactions. It supports multiple variants, sizes, loading states, and comes with full accessibility support out of the box.

Overview

The Button component is the foundation of interactive elements in your app. It handles touch feedback, accessibility, and visual feedback automatically.

Use it for:

Primary and secondary actions
Form submissions
Navigation triggers
Any interactive element requiring user feedback

Basic Usage

import { Button } from 'prizmux'

export default function App() {
  return (
    <Button 
      title="Press Me" 
      onPress={() => console.log('Pressed!')}
    />
  )
}

import { Button } from 'prizmux'

export default function App() {
  return (
    <Button 
      title="Press Me" 
      onPress={() => console.log('Pressed!')}
    />
  )
}

Variants

The Button component supports two visual variants:

Filled (Default)

<Button 
  title="Filled Button" 
  variant="filled"
  onPress={() => {}}
/>

<Button 
  title="Filled Button" 
  variant="filled"
  onPress={() => {}}
/>

Outline

<Button 
  title="Outline Button" 
  variant="outline"
  onPress={() => {}}
/>

<Button 
  title="Outline Button" 
  variant="outline"
  onPress={() => {}}
/>

Sizes

Choose the right size for your layout:

Small

<Button 
  title="Small" 
  size="small"
  onPress={() => {}}
/>

<Button 
  title="Small" 
  size="small"
  onPress={() => {}}
/>

Medium (Default)

<Button 
  title="Medium" 
  size="medium"
  onPress={() => {}}
/>

<Button 
  title="Medium" 
  size="medium"
  onPress={() => {}}
/>

Large

<Button 
  title="Large" 
  size="large"
  onPress={() => {}}
/>

<Button 
  title="Large" 
  size="large"
  onPress={() => {}}
/>

With Icons

Add icons to buttons for better visual communication:

import { Button } from 'prizmux'
import { Settings } from 'lucide-react-native'

export default function App() {
  return (
    <>
      {/* Icon on the left */}
      <Button 
        title="Settings"
        icon={<Settings size={20} />}
        iconPosition="left"
        onPress={() => {}}
      />
      
      {/* Icon on the right */}
      <Button 
        title="Next"
        icon={<ChevronRight size={20} />}
        iconPosition="right"
        onPress={() => {}}
      />
      
      {/* Icon only */}
      <Button 
        icon={<Menu size={24} />}
        onPress={() => {}}
      />
    </>
  )
}

import { Button } from 'prizmux'
import { Settings } from 'lucide-react-native'

export default function App() {
  return (
    <>
      {/* Icon on the left */}
      <Button 
        title="Settings"
        icon={<Settings size={20} />}
        iconPosition="left"
        onPress={() => {}}
      />
      
      {/* Icon on the right */}
      <Button 
        title="Next"
        icon={<ChevronRight size={20} />}
        iconPosition="right"
        onPress={() => {}}
      />
      
      {/* Icon only */}
      <Button 
        icon={<Menu size={24} />}
        onPress={() => {}}
      />
    </>
  )
}

Loading State

Show loading feedback during async operations:

import { Button } from 'prizmux'
import { useState } from 'react'

export default function App() {
  const [isLoading, setIsLoading] = useState(false)

  const handleSubmit = async () => {
    setIsLoading(true)
    try {
      await submitForm()
    } finally {
      setIsLoading(false)
    }
  }

  return (
    <Button 
      title="Submit"
      isLoading={isLoading}
      onPress={handleSubmit}
    />
  )
}

import { Button } from 'prizmux'
import { useState } from 'react'

export default function App() {
  const [isLoading, setIsLoading] = useState(false)

  const handleSubmit = async () => {
    setIsLoading(true)
    try {
      await submitForm()
    } finally {
      setIsLoading(false)
    }
  }

  return (
    <Button 
      title="Submit"
      isLoading={isLoading}
      onPress={handleSubmit}
    />
  )
}

Disabled State

Disable buttons when they shouldn't be interactive:

<Button 
  title="Disabled" 
  disabled={true}
  onPress={() => {}}
/>

<Button 
  title="Disabled" 
  disabled={true}
  onPress={() => {}}
/>

Full Width

Make buttons stretch to fill their container:

<Button 
  title="Full Width Button"
  fullWidth={true}
  onPress={() => {}}
/>

<Button 
  title="Full Width Button"
  fullWidth={true}
  onPress={() => {}}
/>

Custom Styling

Customize the button appearance with style props:

<Button 
  title="Custom"
  borderRadius={20}
  style={{ backgroundColor: '#FF6B6B' }}
  textStyle={{ fontSize: 18, fontWeight: '700' }}
  onPress={() => {}}
/>

<Button 
  title="Custom"
  borderRadius={20}
  style={{ backgroundColor: '#FF6B6B' }}
  textStyle={{ fontSize: 18, fontWeight: '700' }}
  onPress={() => {}}
/>

Accessibility

The Button component is fully accessible:

<Button 
  title="Like"
  accessibilityLabel="Like this post"
  onPress={() => {}}
/>

<Button 
  title="Like"
  accessibilityLabel="Like this post"
  onPress={() => {}}
/>

Props Reference

Prop	Type	Default	Description
`title`	`string`	-	Button label text (optional for icon-only buttons)
`onPress`	`() => void`	Required	Callback when button is pressed
`variant`	`'filled' \| 'outline'`	`'filled'`	Visual variant
`size`	`'small' \| 'medium' \| 'large'`	`'medium'`	Button size
`disabled`	`boolean`	`false`	Disables interactions and shows disabled state
`isLoading`	`boolean`	`false`	Shows loading indicator
`icon`	`ReactNode`	-	Icon to display
`iconPosition`	`'left' \| 'right'`	`'left'`	Position of icon relative to title
`fullWidth`	`boolean`	`false`	Stretch button to full width
`borderRadius`	`number`	`0`	Border radius in pixels
`hitSlop`	`number`	-	Increase tap target area (mobile accessibility)
`accessibilityLabel`	`string`	-	Screen reader label
`style`	`ViewStyle`	-	Custom button container styles
`contentStyle`	`ViewStyle`	-	Custom inner content wrapper styles
`textStyle`	`TextStyle`	-	Custom button text styles
`onLongPress`	`() => void`	-	Callback for long press gestures

<Button title="Primary" variant="primary" />
<Button title="Secondary" variant="secondary" />
<Button title="Outline" variant="outline" />

<Button title="Primary" variant="primary" />
<Button title="Secondary" variant="secondary" />
<Button title="Outline" variant="outline" />

Sizes

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

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

With Icon

import { Button } from 'prizmux'
import { ChevronRight } from 'lucide-react-native'

export default function App() {
  return (
    <Button 
      title="Next" 
      icon={<ChevronRight size={18} />}
      iconPosition="right"
    />
  )
}

import { Button } from 'prizmux'
import { ChevronRight } from 'lucide-react-native'

export default function App() {
  return (
    <Button 
      title="Next" 
      icon={<ChevronRight size={18} />}
      iconPosition="right"
    />
  )
}

Loading State

const [loading, setLoading] = useState(false)

const handleSubmit = async () => {
  setLoading(true)
  await submitForm()
  setLoading(false)
}

<Button 
  title="Submit" 
  loading={loading}
  onPress={handleSubmit}
/>

const [loading, setLoading] = useState(false)

const handleSubmit = async () => {
  setLoading(true)
  await submitForm()
  setLoading(false)
}

<Button 
  title="Submit" 
  loading={loading}
  onPress={handleSubmit}
/>

Notes

The button automatically handles opacity changes on press
Loading state disables user interaction automatically
Accessibility features are built-in (press states, labels)
Works with custom icon libraries (Lucide, Font Awesome, etc.)
Full TypeScript support with IntelliSense