# RippleButton

> Button that answers each click with a ripple of light from the click point, a soft glow and two fine rings spreading out like a wave; on hover a glow follows the pointer with a faint ring pulsing from it.

- Package: `fancy-ui-svelte` (Svelte 5 + Tailwind CSS v4)
- Category: Buttons
- Tags: button, ripple, click, animation, material
- Docs: https://fancy-ui.rama.app/docs/components/ripple-button
- Source: https://github.com/RamaHerbin/fancy-ui/tree/main/src/lib/fancy-ui/ripple-button

## Import

```svelte
<script lang="ts">
  import { RippleButton } from 'fancy-ui-svelte';
</script>
```

Setup (once per project): `npm install fancy-ui-svelte`, then add `@import "fancy-ui-svelte/tailwind.css";` after `@import "tailwindcss";` in your main CSS file. Full guide: https://fancy-ui.rama.app/llms.txt

React: `import { RippleButton } from 'fancy-ui-react';` (same prop names; `class` becomes `className`, snippets become `ReactNode`).

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `rippleColor` | `string` | `"#60a5fa"` | Colour of the ripple: its glow, its rings and the border tint |
| `duration` | `number` | `900` | Animation duration in milliseconds |
| `sound` | `boolean` | `false` | Plays the press cue on activation, once the user has enabled sound |

## Snippets

| Snippet | Description |
| --- | --- |
| `children` | Button content |

## Examples

### Basic Usage

```svelte
<script lang="ts">
	import { RippleButton } from "fancy-ui-svelte";
</script>

<RippleButton sound>Click me</RippleButton>
```

### Custom Ripple Colors

Customize the ripple color.

```svelte
<script lang="ts">
	import { RippleButton } from "fancy-ui-svelte";
</script>

<div class="flex flex-wrap justify-center gap-4">
	<RippleButton sound rippleColor="#ADD8E6">Light Blue</RippleButton>
	<RippleButton sound rippleColor="#90EE90">Light Green</RippleButton>
	<RippleButton sound rippleColor="#FFB6C1">Light Pink</RippleButton>
	<RippleButton sound rippleColor="#FFD700">Gold</RippleButton>
</div>
```

### Animation Duration

Control the ripple speed.

```svelte
<script lang="ts">
	import { RippleButton } from "fancy-ui-svelte";
</script>

<div class="flex flex-wrap justify-center gap-4">
	<RippleButton sound duration={300}>Fast (300ms)</RippleButton>
	<RippleButton sound duration={600}>Default (600ms)</RippleButton>
	<RippleButton sound duration={1000}>Slow (1000ms)</RippleButton>
</div>
```

### Custom Styling

Override styles with the class prop.

```svelte
<script lang="ts">
	import { RippleButton } from "fancy-ui-svelte";
</script>

<div class="flex flex-wrap justify-center gap-4">
	<RippleButton
		sound
		class="bg-primary text-primary-foreground border-primary"
		rippleColor="#ffffff"
	>
		Primary
	</RippleButton>
	<RippleButton sound class="bg-destructive border-destructive text-white" rippleColor="#ffffff">
		Destructive
	</RippleButton>
	<RippleButton sound class="rounded-full px-6" rippleColor="#9333ea">Rounded</RippleButton>
</div>
```

### Multiple Ripples

Click rapidly to see multiple ripples.

```svelte
<script lang="ts">
	import { RippleButton } from "fancy-ui-svelte";
</script>

<RippleButton sound class="px-12 py-4 text-lg" rippleColor="#8B5CF6" duration={800}>
	Click rapidly!
</RippleButton>
```