Outline badge
For AI Agents
Hand your agent this brief or the ReUI MCP, not a screenshot. Free to install.
Best for: A neutral border around inherited text color, transparent in light mode and lightly filled in dark
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
- 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-7.mdget_example("c-badge-7")npx shadcn@latest add @reui/c-badge-7Shadcn Components in Badge Outline
About Shadcn Badge Outline
Outline badge. Built with the Badge component. A free, open source shadcn badge example you can install with npx shadcn@latest add @reui/c-badge-7 and edit as your own code.
What You Can Build With Shadcn Badge Outline
- 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-7
- 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
- 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
- Primary Light Primary light 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 Outline?
Use it for a neutral border around inherited text color, transparent in light mode and lightly filled in dark.
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 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 Outline?
Is Shadcn Badge Outline free to use?
Which components does Shadcn Badge Outline 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.