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.

Human-readable chip text shown on supplier cards.

Auto-filled from the Label as you type. Editable, but once created it becomes the permanent machine identifier — code paths that special-case a specific badge look this up by slug.

Auto-filled from the Label above as you type. Edit only if you need a specific code name.

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).