🏷️

Badges & Stickers

Status indicators and decorative stickers with rotation utilities for playful layouts. Badges feature 2px themed borders, 3px hard shadows, and bold fonts.

Color Variants

Expected: 2px themed border, 3px hard shadow, bold font

Primary Secondary Accent Info Success Warning Error Neutral

Size Variants

From extra small to extra large

Extra Small Small Medium Large

Style Variants

Solid, outline, ghost styles

Solid Outline Ghost

Sticker Rotations

4 rotation variations for playful sticker aesthetic

ROTATE-1 (-8deg) ROTATE-2 (5deg) ROTATE-3 (-3deg) ROTATE-4 (12deg)

Sticker Positioning

Absolute positioning utilities for decorative stickers

Container with positioned stickers

Top Left Top Right Bottom Left Bottom Right Top Center Bottom Center Middle Left Middle Right

Badges in Text & Buttons

Using badges inline and in other components

This text has NEW inline badges and BETA markers.

Sticker Utilities

Use rotate-sticker-1 through rotate-sticker-4 for rotations. Use sticker-top-left, sticker-bottom-right, etc. for positioning.