Simple Badges

A few examples of simple badges with different styles and sizes.

Pumki UI

Default

Secondary

Error

Outline

Shiny Default

Shiny Secondary

Shiny Error

Shiny Outline

Fast Shine

Slow Shine

Large SimpleBadge

Installation

import { SimpleBadge } from '@/components/pumki-ui/badges/simple';

<SimpleBadge>Pumki UI</SimpleBadge>

Prop	Type	Default	Description
`variant?`	`‘default’ \| ‘secondary’ \| ‘destructive’ \| ‘outline‘`	`“default”`	Style variant for the badge.
`shiny?`	`boolean`	`false`	If true, adds a shine animation to the badge.
`shinySpeed?`	`number`	`5`	Speed of the shine animation (in seconds).
`className?`	`string`	-	Additional CSS classes for the badge.
`children?`	`React.ReactNode`	-	Badge content.
`…props`	`HTMLDivElement attributes`	-	Any other props for the badge container.