🎯 SwishButton Component

An interactive button with smooth text sliding animation and an expanding background dot effect. Perfect for CTAs, navigation buttons, or any interactive element that needs visual flair.

Basic Example

Hover Me

Hover over the button to see the swishing text animation and expanding background effect. The button smoothly transitions from a compact state to an active state with an arrow icon.

View Code Example

<script>
  import SwishButton from '$lib/components/SwishButton.svelte';
</script>

<SwishButton text="Get Started" />

Interactive Example

The button supports all standard button events. Click to increment the counter below.

Clicked 0 times

View Code Example

<script>
  import SwishButton from '$lib/components/SwishButton.svelte';

  let count = $state(0);
</script>

<SwishButton
  text="Click Me"
  onclick={() => count++}
/>
<p>Clicked {count} times</p>

Different Labels

Customise the button text for different use cases and contexts.

Information

E-commerce

Registration

Support

File Action

Navigation

View Code Example

<SwishButton text="Learn More" />
<SwishButton text="Buy Now" />
<SwishButton text="Sign Up" />

Custom Styling

Use the class prop to apply custom Tailwind classes or your own CSS.

Standard colours

Wider button

Larger size

Custom border

View Code Example

<SwishButton text="Wide" class="w-40" />

<SwishButton
  text="Larger"
  class="w-36 p-3 text-lg"
/>

<SwishButton
  text="Custom"
  class="border-2 border-purple-500"
/>

Button States

The component supports all native button attributes via $$restProps, including disabled state and button types.

Cannot interact

Form submission

Form reset

View Code Example

<SwishButton text="Disabled" disabled />

<SwishButton text="Submit" type="submit" />

<SwishButton text="Reset" type="reset" />

Component Features

🎬

Smooth Animations

Coordinated text slide and background expansion with perfect timing.

🎨

Customisable

Apply custom classes, adjust sizing, and style with Tailwind utilities.

🚀

Zero Dependencies

No icon libraries required - uses inline SVG for the arrow.

⚡

Native Events

Full support for all button events: onclick, onmouseenter, etc.

♿

Accessible

Maintains semantic button element with proper focus states.

📱

Responsive

Works perfectly on touch devices with hover state animations.

Quick Start Guide

Copy the Component

Copy SwishButton.svelte from src/lib/components/ to your project. Ensure you have the cn utility from src/lib/utils.ts.

Import and Use

Import the component and use it like a standard button. The text prop controls the button label.

Add Interactions

Attach event handlers using standard Svelte syntax. All button attributes are supported via $$restProps.

Props Reference

Prop	Type	Default	Description
`text`	string	'Button'	Button text to display
`class`	string	''	Additional CSS classes for customisation
`...$$restProps`	any	-	All standard button attributes (onclick, disabled, type, etc.)