Skip to main content

Actions and status

Sparkle

A tiny, animated SVG star. A sprinkle of magic for your micro-interactions.

Curated demo

Sparkles pop once upon rendering. Refresh to see them again!

Reference

A tiny, animated SVG star. A sprinkle of magic for your micro-interactions.

  • Use Sparkle to reward the user for a small success.
  • The component triggers a pop animation immediately upon rendering.
  • It is a 'fire and forget' component that fades out automatically.

Props

Name Type Default Description
size 'sm' | 'md' | 'lg' 'md' The size of the sparkle.
color string var(--snurble-palette-yellow) The color of the sparkle.
class string — Additional CSS classes.

Example snippet

<Sparkle size="md" color="var(--snurble-palette-yellow)" />