Badge with full radius (radius="full")
For AI Agents
Hand your agent this brief or the ReUI MCP, not a screenshot. Free to install.
Best for: Pill counts and New tags at 3 sizes, then the pill on outline, secondary and success light
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
- Labels that keep the corner radius of the active style: use the Badge Sizes 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
- 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-19.mdget_example("c-badge-19")npx shadcn@latest add @reui/c-badge-19Shadcn Components in Badge Full Radius
About Shadcn Badge Full Radius
Badge with full radius (radius="full"). Built with the Badge component. A free, open source shadcn badge example you can install with npx shadcn@latest add @reui/c-badge-19 and edit as your own code.
What You Can Build With Shadcn Badge Full Radius
- Composes Badge, so it drops into any project already using those components.
- Install it with the shadcn CLI: npx shadcn@latest add @reui/c-badge-19
- 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 Full Radius?
Use it for pill counts and New tags at 3 sizes, then the pill on outline, secondary and success light.
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 labels that keep the corner radius of the active style, use the Badge Sizes 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 Full Radius?
Is Shadcn Badge Full Radius free to use?
Which components does Shadcn Badge Full Radius 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.