AwardBadge
award-badgeDisplays a laurel emblem beside a prefixed award title in outline, solid, or soft styles.
Usage
Basic usage
Laurel circle ranking + small prefix + bold main title, affixed to README honor plate at the top / official website homepage.
<AwardBadge
rank={1}
kicker="GitHub Trending"
title="#1 Repository Of The Day"
href="https://github.com/trending"
/>Skin
outline Stroke (default) / solid / soft, select according to floor background.
<>
<AwardBadge rank={1} kicker="Product Hunt" title="#1 Product of the Day" />
<AwardBadge rank={1} kicker="Product Hunt" title="#1 Product of the Day" variant="solid" />
<AwardBadge rank={1} kicker="Product Hunt" title="#1 Product of the Day" variant="soft" />
</>Tone · Size
5 tone + color escape cabin (any CSS color / chart-1..6); sm/md/lg third gear.
<>
<AwardBadge size="sm" rank={2} kicker="Weekly List" title="The Fastest Growing Open Source Project of the Year" tone="success" />
<AwardBadge rank="A+" kicker="Safety Rating" title="Supply Chain Security" tone="neutral" />
<AwardBadge size="lg" rank={1} kicker="Nuggets" title="The most popular component library of the year" color="chart-5" />
</>Custom Emblem · No Laurel
emblem slot replaces the entire emblem (trophy/platform logo); wreath={false} only retains the ranking.
<>
<AwardBadge emblem={<TrophyMark />} kicker="2026" title="Best Developer Tools" tone="warning" />
<AwardBadge wreath={false} rank="03" kicker="Awwwards" title="Site of the Day" variant="soft" />
</>When to use
Use AwardBadge for one prominent honor in a README, homepage, or release announcement: a ranking, award, or rating.
ShieldBadge is dense project metadata designed for rows. AwardBadge is larger, visually singular, and includes an emblem. The SVG laurel is generated by exported laurelLeaves and laurelStemPath helpers, uses currentColor, and remains sharp without image requests.
Import
import { AwardBadge, laurelLeaves, laurelStemPath } from "@hulianui/ui"Props
| Name | Type | Default | Description |
|---|---|---|---|
| title* | ReactNode | — | Primary award title, such as #1 Repository Of The Day. |
| kicker | ReactNode | — | Uppercase, tracked secondary line such as GitHub Trending. |
| rank | ReactNode | — | Content centered in the laurel, such as 1 or A+. |
| emblem | ReactNode | — | Replaces the laurel and rank with a trophy or platform mark. |
| wreath | boolean | true | Shows the laurel. |
| variant | "outline" | "solid" | "soft" | "outline" | Outlined, filled, or quiet skin. |
| tone | "brand" | "neutral" | "success" | "warning" | "danger" | "brand" | Border, laurel, and text tone. |
| color | string | — | CSS color or semantic name such as chart-5, overriding tone. |
| size | "sm" | "md" | "lg" | "md" | Component size. |
| href | string | — | Makes the whole award a focusable link. |
| target | string | — | Link target; _blank adds safe rel values. |
| className | string | — | Custom class plus forwarded native attributes. |
laurelLeaves(options?) / laurelStemPath(options?)
These pure geometry helpers accept count, cx, cy, radius, from, to, rx, ry, tilt, and taper. Defaults are exported as laurelDefaults.
Pitfalls
- Supply platform logos through
emblem; third-party brand assets are not bundled. - Keep awards rare. Use ShieldBadge and ShieldBadgeGroup for rows of metadata.
- The emblem region is
aria-hidden; include rank information intitleor add anaria-labelso it is not lost. - Solid custom colors use
--color-primary-foreground; verify contrast or select the soft skin.
Related
ShieldBadge · Badge · Tag · ScoreRing · Stat
Playground
<AwardBadge
rank={1}
kicker="GitHub Trending"
title="#1 Repository Of The Day"
/>