RainbowButton

Preview

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

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 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 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 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>
		<Sparkles class="mr-2 h-4 w-4" />
		Magic Button
	</RainbowButton>
	<RainbowButton>
		Continue
		<ChevronRight class="ml-2 h-4 w-4" />
	</RainbowButton>
</div>

Disabled State

As Link

Render as an anchor element.

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 class="h-9 px-4 text-sm">Small</RainbowButton>
	<RainbowButton>Default</RainbowButton>
	<RainbowButton class="h-14 px-10 text-lg">Large</RainbowButton>
</div>