> ## Documentation Index
> Fetch the complete documentation index at: https://docs.shipmobilefast.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Ripple Button

> Material Design inspired button with ripple effect animation

A Material Design inspired button component that features a ripple effect animation and haptic feedback.

## Installation

```bash theme={null}
npm install react-native-reanimated react-native-gesture-handler expo-haptics
```

## Import

```typescript theme={null}
import RippleButton from '@/components/common/buttons/ripple-button';
```

## Props

| Prop           | Type                | Required | Default            | Description                  |
| -------------- | ------------------- | -------- | ------------------ | ---------------------------- |
| `onPress`      | `() => void`        | Yes      | -                  | Function called when pressed |
| `color`        | `string`            | No       | theme.primary      | Ripple effect color          |
| `icon`         | `React.ReactNode`   | No       | -                  | Icon component               |
| `iconPosition` | `'left' \| 'right'` | No       | `'left'`           | Icon position                |
| `loading`      | `boolean`           | No       | `false`            | Loading state                |
| `disabled`     | `boolean`           | No       | `false`            | Disabled state               |
| `duration`     | `number`            | No       | `800`              | Animation duration           |
| `height`       | `number`            | No       | `BUTTON_HEIGHT.md` | Button height                |
| `borderRadius` | `number`            | No       | `BORDER_RADIUS.md` | Border radius                |

## Examples

```typescript theme={null}
function Example() {
  return (
    <RippleButton
      onPress={() => console.log('Pressed')}
      color="#1DB954"
      icon={<Icon name="star" />}
      iconPosition="left"
    >
      <Text>Ripple Effect</Text>
    </RippleButton>
  );
}
```