RippleButton

Preview

Installation

pnpm add fancy-ui-svelte

import { RippleButton } from 'fancy-ui-svelte'

Usage

svelte

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

<RippleButton />

Examples

Basic Usage

Custom Ripple Colors

Customize the ripple color.

svelte

<script lang="ts">
	import { RippleButton } from "$lib/fancy-ui/ripple-button";
</script>

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

Animation Duration

Control the ripple speed.

svelte

<script lang="ts">
	import { RippleButton } from "$lib/fancy-ui/ripple-button";
</script>

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

Custom Styling

Override styles with the class prop.

svelte

<script lang="ts">
	import { RippleButton } from "$lib/fancy-ui/ripple-button";
</script>

<div class="flex flex-wrap justify-center gap-4">
	<RippleButton class="bg-primary text-primary-foreground border-primary" rippleColor="#ffffff">
		Primary
	</RippleButton>
	<RippleButton class="bg-destructive border-destructive text-white" rippleColor="#ffffff">
		Destructive
	</RippleButton>
	<RippleButton 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 "$lib/fancy-ui/ripple-button";
</script>

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