Create Badge

Add a new trust mark. Pick a stable slug (used by code), a display label (shown on cards), a Tailwind palette color, and optionally a lucide-react icon name.

Lowercase kebab-case identifier used by the frontend. Once set, don’t change — code paths that special-case a specific badge look this up by slug.

Human-readable chip text shown on supplier cards.

Lower values render first in the supplier card badge strip. Verified/Featured typically 10–20; custom badges default 100.

Pick any hex colour. This is the chip fill on the supplier card. When only this is set, text + icon colour auto-contrast for readability.

Override the auto-contrast text colour. Click "Auto" to clear and let the frontend pick a readable colour based on the background.

Override the icon colour. If left on Auto, the icon inherits the text colour.

Search the full Lucide library by name (e.g. "shield-check", "crown", "sparkles"). Click an icon to use it, or clear to render a label-only chip.

Click an icon to use it. Browse lucide.dev/icons to find more names.

Live preview

PreviewPreview

Small and medium sizes shown — the frontend picks one depending on where the badge renders (supplier card vs. detail page header).