# Achievement Badge

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.

> Composed · Pro · Feedback — React Native, Expo Go compatible.

## Install

```bash
npx @lumioui/cli add pro/achievement-badge
```

## Import

```tsx
import { AchievementBadge } from "@/components/ui/achievement-badge/achievement-badge";
```

## Variants

- `collection` — Collection: `npx @lumioui/cli add pro/achievement-badge-collection`
- `rows` — Rows: `npx @lumioui/cli add pro/achievement-badge-rows`
- `unlock` — Unlock: `npx @lumioui/cli add pro/achievement-badge-unlock`

## Props

| Prop | Type | Notes |
| --- | --- | --- |
| `title` | `string` | Award name — "Early bird", "Perfect week". |
| `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. |
| `unlocked` | `boolean` | Earned. Flipping false → true plays the unlock moment. |
| `progress?` | `number` | 0–1 progress toward the award while locked. Draws the rim arc. |
| `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". |
| `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. |
| `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` | — |

## Icons rendered

- `sun` — /icons.html?i=sun
- `footprints` — /icons.html?i=footprints
- `lock` — /icons.html?i=lock

Source: https://lumioui.com/components/achievement-badge