Pill generator
Multi-select values, applied filters and selected lookups render as removable pills via lightning-pill-container. Style background, radius and the remove icon so pills stay light and easy to scan in groups.
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-pill-container items={items} class="studio-pill-container" onitemremove={handleRemove}></lightning-pill-container>
</template>Design tips for pills
- Keep pill backgrounds low-contrast; a page full of solid-color pills becomes visually noisy fast.
- Only show the remove icon on pills that are actually removable — it is a strong affordance promise.
- Truncate long pill labels rather than letting one pill stretch the whole row.