Achievement Badge

Pro

Award medallion that shows progress while locked and its tier metal once earned. Unlocking closes the ring, fills the face and pops with a glow in its colour and a haptic. Tile, row and medal layouts.

Preview

Installation

npx @lumioui/cli add pro/achievement-badge

Usage

import { AchievementBadge } from "@/components/ui/achievement-badge/achievement-badge";
<AchievementBadge />

Examples

Collection

A fitness app's awards shelf.

Rows

A running app's achievements list.

Unlock

The end-of-lesson moment in a language app.

API reference

Prop Type Default
title* string

Award name — "Early bird", "Perfect week".

 —
unlocked* boolean

Earned. Flipping false → true plays the unlock moment.

 —
description string

What it is for, or what is left — row layout shows it under the title.

 —
icon IconName

Icon on the medal face.

 —
glyph React.ReactNode

Custom face glyph — overrides icon. Render it white.

 —
progress number

0–1 progress toward the award while locked. Draws the rim arc.

 0
progressLabel string

Progress caption — "7 of 10 workouts".

 —
earnedLabel string

Earned caption — "Earned Oct 3".

 —
tier AchievementTier

Metal. Omit to use the current accent (primary).

 —
colors [string, string]

Custom [rim, face] hex pair — overrides tier.

 —
layout "tile" | "row" | "medal"

"tile" — medal over a centred caption (award grids). "row" — list row with a progress bar. "medal" — just the medallion. Default "tile".

 "tile"
size keyof typeof DIAMETER

Medal diameter — sm 48 · md 72 · lg 104. Default "md" ("sm" in rows).

 —
onPress () => void

Makes the badge pressable (open award detail).

 —
haptic boolean

Success haptic on unlock. Default true.

 true
onSettled () => void

Fires after an unlock has been held (~700ms) — tick a shelf count, resolve surrounding copy. Not called for medals earned on first paint.

 —
className string —