Badge with a dismiss button
For AI Agents
Hand your agent this brief or the ReUI MCP, not a screenshot. Free to install.
Best for: An outline tag ending in an X inside a ghost icon button shrunk to 12px, for removable filters
When to use
- Status and severity labels in solid, light and outline tones for success, warning, info and errors
- Counts and short tags such as an unread number or a New marker, sized to the text around them
- Compact chips pairing a label with an icon, a dot, an avatar, a flag or a remove control, or acting as a link
When not to use
- A removable tag that also shows whose it is with a photo: use the Badge With Avatar example
- An action that saves, opens or submits a form when pressed: use the Button component
- Helper text revealed when a control is hovered or focused: use the Tooltip component
- A finished KPI or profile tile with a trend or status chip as one detail: use the Card blocks
Agent notes
- The X
Buttonhas no click handler and no accessible name; wire the removal and give it an aria-label such as Remove - Import
Badgefrom@/components/reui/badge; the shadcnBadgeof the same name lackssize,radiusand the success, info and warning variants - The default
radiusfollows the style, square in lyra and sera and a pill in maia, luma and rhea;radiusfull gives a pill in every style
https://reui.io/components/badge/c-badge-21.mdget_example("c-badge-21")npx shadcn@latest add @reui/c-badge-21About Shadcn Badge Dismiss Button
Badge with a dismiss button. Built by composing Badge, Button. A free, open source shadcn badge example you can install with npx shadcn@latest add @reui/c-badge-21 and edit as your own code.
What You Can Build With Shadcn Badge Dismiss Button
- Composes Badge, Button, so it drops into any project already using those components.
- Install it with the shadcn CLI: npx shadcn@latest add @reui/c-badge-21
- Open source and free, with the full source on this page to copy or adapt.
More Shadcn Badge Examples
- Default Default badge
- Secondary Secondary badge
- Destructive Destructive badge
- Success Success badge
- Info Info badge
- Warning Warning badge
- Outline Outline badge
- Primary Outline Primary outline badge
- Destructive Outline Destructive outline badge
- Info Outline Info outline badge
- Success Outline Success outline badge
- Warning Outline Warning outline badge
Related Shadcn Component Categories
Open-source shadcn breadcrumb components for navigation trails, docs hierarchy, and app wayfinding.
Open-source shadcn bubble components for chat threads, assistant replies, and message reactions.
Open-source shadcn button components for primary actions, form submissions, and toolbar controls.
Open-source shadcn button group components for segmented controls, toolbar actions, and view switchers.
Open-source shadcn calendar components for date picking, scheduling flows, and booking interfaces.
Open-source shadcn card components for content previews, dashboard widgets, and product summaries.
Frequently Asked Questions
When should I use Shadcn Badge Dismiss Button?
Use it for an outline tag ending in an X inside a ghost icon button shrunk to 12px, for removable filters.
Shadcn Badge as a whole fits:
- Status and severity labels in solid, light and outline tones for success, warning, info and errors
- Counts and short tags such as an unread number or a New marker, sized to the text around them
- Compact chips pairing a label with an icon, a dot, an avatar, a flag or a remove control, or acting as a link
For a removable tag that also shows whose it is with a photo, use the Badge With Avatar example. For an action that saves, opens or submits a form when pressed, use the Button component. For helper text revealed when a control is hovered or focused, use the Tooltip component. For a finished KPI or profile tile with a trend or status chip as one detail, use the Card blocks.
How do I install Shadcn Badge Dismiss Button?
Is Shadcn Badge Dismiss Button free to use?
Which components does Shadcn Badge Dismiss Button use?
Start building with ReUI Pro today.
Every Pro block, every style, and every future addition, with one license for unlimited projects.
From $249, once. Lifetime updates.