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

Interactive Preview

9:41

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`	`8`	Corner radius in pixels
`backgroundColor`	`string`	-	Override base background color
`textColor`	`string`	-	Override text color
`borderColor`	`string`	-	Override border color (outline mode)
`showShadow`	`boolean`	`true`	Toggle elevation/shadow
`shadowColor`	`string`	-	Custom color for the shadow
`pressedBackgroundColor`	`string`	-	Feedback color when held
`onLongPress`	`() => void`	-	Callback for long press gestures
`hitSlop`	`number`	-	Increase tap target area
`accessibilityLabel`	`string`	-	Screen reader label
`style`	`ViewStyle`	-	Custom button container styles
`contentStyle`	`ViewStyle`	-	Custom inner content wrapper styles
`textStyle`	`TextStyle`	-	Custom button text styles

<Button title="Filled" variant="filled" />
<Button title="Outline" variant="outline" />

<Button title="Filled" variant="filled" />
<Button title="Outline" variant="outline" />

Sizes#

<Button title="Small" size="small" />
<Button title="Medium" size="medium" />
<Button title="Large" size="large" />

<Button title="Small" size="small" />
<Button title="Medium" size="medium" />
<Button title="Large" size="large" />

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"
    />
  )
}

Shadow & Feedback#

<Button 
  title="Press Me" 
  showShadow={true}
  shadowColor="#6366F1"
  pressedBackgroundColor="#4F46E5"
  onPress={() => {}}
/>

<Button 
  title="Press Me" 
  showShadow={true}
  shadowColor="#6366F1"
  pressedBackgroundColor="#4F46E5"
  onPress={() => {}}
/>

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