Buttons Fancy Stable
RainbowButton
Animated button with a rainbow gradient border; on hover or focus a rainbow beam rides around the border with a soft halo
Preview
svelte
<script lang="ts">
import { RainbowButton } from 'fancy-ui-svelte';
</script>
<RainbowButton />Installation
pnpm add fancy-ui-svelte
import { RainbowButton } from 'fancy-ui-svelte'
Usage
svelte
<script lang="ts">
import { RainbowButton } from 'fancy-ui-svelte';
</script>
<RainbowButton />Examples
Basic Usage
svelte
<script lang="ts">
import { RainbowButton } from "$lib/fancy-ui/rainbow-button";
</script>
<RainbowButton sound>Get Started</RainbowButton>Animation Speed
Control the animation speed.
svelte
<script lang="ts">
import { RainbowButton } from "$lib/fancy-ui/rainbow-button";
</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 "$lib/fancy-ui/rainbow-button";
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 "$lib/fancy-ui/rainbow-button";
</script>
<RainbowButton disabled>Disabled Button</RainbowButton>As Link
Render as an anchor element.
svelte
<script lang="ts">
import { RainbowButton } from "$lib/fancy-ui/rainbow-button";
</script>
<RainbowButton sound href="/docs">Go to Docs</RainbowButton>Custom Styling
Override styles with the class prop.
svelte
<script lang="ts">
import { RainbowButton } from "$lib/fancy-ui/rainbow-button";
</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>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 |
Slots
| Slot | Description |
|---|---|
children | Button label content |
Links
Related components
Gr
GradientButton
Dark button with a beam of light that travels around its border and casts a soft coloured glow inside the face; the glow brightens on hover
Buttons Stable
In
InteractiveHoverButton
Button whose dot opens into a circle that fills it on hover, while the label rolls up and out and returns with an arrow
Buttons Stable
Pr
Pressable
A wrapper that gives any interactive child a consistent, cross-browser press animation — scale down on pointerdown/keydown, back to rest on release, with a static opacity fallback under reduced motion
Buttons Stable