DATA DISPLAY

Medal

Heptagonal medal SVG with a five-rank token palette. Use it to render leaderboard ranks, achievement badges, and rating tiers.

Import

import { Medal } from 'damo-ui'

All ranks

Bronze

Silver

Gold

Master

Grandmaster

1<Medal rank="bronze" value={3} label="Bronze" />
2<Medal rank="silver" value={2} label="Silver" />
3<Medal rank="gold" value={1} label="Gold" />
4<Medal rank="master" value="M" label="Master" />
5<Medal rank="grandmaster" value="GM" label="Grandmaster" />

Sizes

1<Medal rank="gold" value={1} size={48} />
2<Medal rank="gold" value={1} size={96} />
3<Medal rank="gold" value={1} size={140} />

Props

Medal props

Prop	Type	Default	Description
rank*	'bronze' \| 'silver' \| 'gold' \| 'master' \| 'grandmaster'	—	Selects the inner / outer / text token (`--medal-{rank}-{outer\|inner\|text}`).
value	ReactNode	—	Optional centred number / letters (e.g. `1`, `"M"`, `"GM"`).
label	string	—	Mono uppercase caption rendered below the medal.
size	number	96	SVG width and height in pixels.

Accessibility

The SVG renders role="img" with aria-label derived from label (or a default like "gold medal" when no label is provided).

← Stat AppShell →