Impact Badge

Installation

pnpm dlx shadcn@latest add @ffg/impact-badge

Usage

import { ImpactBadge } from "@/components/ui/impact-badge";

<ImpactBadge>Environment</ImpactBadge>     {/* category icon + accent */}
<ImpactBadge>Boise, ID</ImpactBadge>       {/* plain outline pill */}
<ImpactBadge solid>Featured</ImpactBadge>  {/* solid pill */}

When the label matches a known impact category (Nutrition & Food Security, Education, Livelihoods, Protection & Rights, Environment, Community, Humanitarian, Culture, Animal Welfare, Health) it shows that category's icon. Otherwise it renders a plain pill — outlined by default, or solid.

This is the FFG impact badge, distinct from the shadcn Badge. The solid variant maps to --primary, so it inverts in dark mode; category accents are fixed brand hues.