# RainbowButton

> Animated button with a rainbow gradient border; on hover or focus a rainbow beam rides around the border with a soft halo.

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

## Import

```svelte
<script lang="ts">
  import { RainbowButton } 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 { RainbowButton } from 'fancy-ui-react';` (same prop names; `class` becomes `className`, snippets become `ReactNode`).

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `speed` | `number` | `2` | Animation speed in seconds |
| `href` | `string` | — | Render as anchor element when provided |
| `sound` | `boolean` | `false` | Plays the press cue on activation, once the user has enabled sound |

## Snippets

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

## Examples

### Basic Usage

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

<RainbowButton sound>Get Started</RainbowButton>
```

### Animation Speed

Control the animation speed.

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

<div class="flex flex-wrap gap-4">
	<div class="flex flex-col items-center gap-2">
		<RainbowButton sound speed={1}>Fast (1s)</RainbowButton>
		<span class="text-muted-foreground text-xs">speed=1</span>
	</div>
	<div class="flex flex-col items-center gap-2">
		<RainbowButton sound speed={2}>Default (2s)</RainbowButton>
		<span class="text-muted-foreground text-xs">speed=2</span>
	</div>
	<div class="flex flex-col items-center gap-2">
		<RainbowButton sound speed={4}>Slow (4s)</RainbowButton>
		<span class="text-muted-foreground text-xs">speed=4</span>
	</div>
</div>
```

### With Icons

Add icons inside the button.

```svelte
<script lang="ts">
	import { RainbowButton } from "fancy-ui-svelte";
	import ChevronRight from "@lucide/svelte/icons/chevron-right";
	import Sparkles from "@lucide/svelte/icons/sparkles";
</script>

<div class="flex flex-wrap gap-4">
	<RainbowButton sound>
		<Sparkles class="mr-2 h-4 w-4" />
		Magic Button
	</RainbowButton>
	<RainbowButton sound>
		Continue
		<ChevronRight class="ml-2 h-4 w-4" />
	</RainbowButton>
</div>
```

### Disabled State

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

<RainbowButton disabled>Disabled Button</RainbowButton>
```

### As Link

Render as an anchor element.

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

<RainbowButton sound href="/docs">Go to Docs</RainbowButton>
```

### Custom Styling

Override styles with the class prop.

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

<div class="flex flex-wrap gap-4">
	<RainbowButton sound class="h-9 px-4 text-sm">Small</RainbowButton>
	<RainbowButton sound>Default</RainbowButton>
	<RainbowButton sound class="h-14 px-10 text-lg">Large</RainbowButton>
</div>
```