Overview
Components
Text Animations
Badge
A badge component with multiple color variants and sizes.
tailwind-variants
Default Secondary Outline Destructive
Installation
pnpm dlx shadcn-svelte@latest add https://sv-animations.vercel.app/s/badge.json
Install dependencies
Install the required packages for this component:
pnpm add tailwind-variants
Copy the Source Code
Copy and paste the following code into your project:
badge.svelte
index.ts
Folder Structure
Folder Structure
Examples
Color
Red Blue Green Yellow Purple Pink Orange Cyan Indigo Violet Rose Amber Lime Emerald Sky Fuchsia
Sizes
Small Default
Props
| Name | Type | Default | Description |
|---|---|---|---|
children | Snippet | required | |
href | string | undefined | undefined | |
variant | "default" | "secondary" | "outline" | "destructive" | "red" | "blue" | "green" | "yellow" | "purple" | "pink" | "orange" | "cyan" | "indigo" | "violet" | "rose" | "amber" | "lime" | "emerald" | "sky" | "slate" | "fuchsia" | "default" | |
size | "default" | "sm" | "default" | |
class | string | undefined | undefined | |