║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║

---

title: Badge description: The component that looks like a button but isn't clickable! lastUpdated: 30 Oct, 2024 links: source: https://github.com/Logging-Stuff/RetroUI/blob/main/components/retroui/Badge.tsx

<ComponentShowcase name="badge-style-default" /> <br /> <br /> <ComponentInstall> <ComponentInstall.Cli npmCommand="npx shadcn@latest add @retroui/badge" /> <ComponentInstall.Manual> #### 1. Install dependencies:

npm install class-variance-authority

<br />

2. Copy the code 👇 into your project:

<ComponentSource name="badge" />

</ComponentInstall.Manual> </ComponentInstall>

<br /> <br />

Examples

Default

<hr /> <br /> <ComponentShowcase name="badge-style-default" /> <br /> <br />

Variants

<hr /> <br /> <ComponentShowcase name="badge-style-variants" /> <br /> <br />

Rounded

<ComponentShowcase name="badge-style-rounded" /> <br /> <br />

Sizes

<ComponentShowcase name="badge-style-sizes" />

║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║