Badge

This component requires the FyskProvider. See Quick Start →

Preview

Badge

TypeScript

Badge Content

bash

1npx shadcn@latest add https://fysk.dev/r/badge.json

tsx

1import { Badge } from "@/components/ui"
2
3<Badge variant="outline">Badge Content</Badge>

Showcasing the various variants and styles available.

Component

TypeScript

Native Variants

Default

Secondary

Outline

Success

Error

Warning

Info

Modern Variants

Primary Modern

Success Modern

Error Modern

Warning Modern

Info Modern

Sizes

Small

Medium

Large

Icons & Dots

Status

Live

Featured

Fast

Modern Styling: Includes a modern style variant that uses semi-transparent backgrounds for a softer look.
Status Indicators: Built-in dot support with optional dotBlink animation for live statuses.
State Aware: Supports loading, success, and error states with automatic icon switching.
Icon Support: Easily add icons to the start or end of the badge.

The Badge component accepts the following props:

Prop	Type	Default	Description
`variant`	`string`	`"default"`	The color theme of the badge.
`size`	`"xs" \| "sm" \| "md" \| "lg" \| "xl"`	`"md"`	The visual size.
`badgeStyle`	`"native" \| "modern"`	`"native"`	Controls the opacity and border style.
`dot`	`boolean`	`false`	Shows a small dot indicator (only if no icon is present).
`dotBlink`	`boolean`	`true`	Enables a heartbeat animation on the dot.
`state`	`string`	`"idle"`	Async state to show corresponding icons.
`icon`	`React.Node`	-	Icon to display (you can also update the icon based on the state, FyskProvider).
`iconPosition`	`"start" \| "end"`	`"start"`	Position of the icon relative to text.

Supports all standard HTML div attributes.