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 (Social Justice, Economic Growth, Humanitarian, Environment, Community, Health, Education, Culture) it shows that category's icon in its accent colour. 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.