Badge generator
Status pills for stage, priority and record health show up everywhere in Salesforce UI. Generate a full set — success, warning, error, neutral — with one consistent shape and type scale.
Your changes autosave in this browser, and the link above reproduces this exact configuration for anyone you send it to.
Live preview
Generated code
<template>
<lightning-badge label="Active" class="studio-badge"></lightning-badge>
</template>Design tips for badges
- Pill shape reads as "status"; rounded rectangles read as "tag" or "category" — pick one meaning per app.
- Soft, tinted backgrounds (light bg + dark text of the same hue) are easier to scan in dense tables than solid fills.
- Keep badge font-weight at 600–700; badges are read at a glance, so lighter weights disappear.