export const title = "Badge components" export const description = "Free and open-source React badge components built for modern applications and websites. These badges are built using React Aria and styled with Tailwind CSS." export const links = { github: "https://github.com/untitleduico/react/tree/main/components/base/badges", } import * as Demos from "@/components/base/badges/badges.demo.tsx"; ```tsx import { BadgeWithDot } from "@/components/base/badges/badges"; Label Label Label ``` ## Installation You can add this badge component using our CLI or manually: ```bash npx untitledui@latest add badges ``` Copy the files below into your project: Great! Now you can start using the badge components in your project by just copy/pasting our examples below. ## Badge examples Below are examples and variations of this badge component: ### Pill color {{ tocOnly:true }} ```tsx import { Badge } from "@/components/base/badges/badges"; Label Label Label ``` ### Color {{ tocOnly:true }} ```tsx import { Badge } from "@/components/base/badges/badges"; Label Label Label ``` ### Modern {{ tocOnly:true }} ```tsx import { Badge } from "@/components/base/badges/badges"; Label Label Label ``` ### With dot {{ tocOnly:true }} ```tsx import { BadgeWithDot } from "@/components/base/badges/badges"; Label Label Label ``` ### With dot badge color {{ tocOnly:true }} ```tsx import { BadgeWithDot } from "@/components/base/badges/badges"; Label Label Label ``` ### With dot badge modern {{ tocOnly:true }} ```tsx import { BadgeWithDot } from "@/components/base/badges/badges"; Label Label Label ``` ### With flag {{ tocOnly:true }} ```tsx import { BadgeWithFlag } from "@/components/base/badges/badges"; Label Label Label ``` ### With flag badge color {{ tocOnly:true }} ```tsx import { BadgeWithFlag } from "@/components/base/badges/badges"; Label Label Label ``` ### With flag badge modern {{ tocOnly:true }} ```tsx import { BadgeWithFlag } from "@/components/base/badges/badges"; Label Label Label ``` ### With avatar {{ tocOnly:true }} ```tsx import { BadgeWithImage } from "@/components/base/badges/badges"; Label Label Label ``` ### With avatar badge color {{ tocOnly:true }} ```tsx import { BadgeWithImage } from "@/components/base/badges/badges"; Label Label Label ``` ### With avatar badge modern {{ tocOnly:true }} ```tsx import { BadgeWithImage } from "@/components/base/badges/badges"; Label Label Label ``` ### With close X {{ tocOnly:true }} ```tsx import { BadgeWithButton } from "@/components/base/badges/badges"; {}}> Label {}}> Label {}}> Label ``` ### With close X badge color {{ tocOnly:true }} ```tsx import { BadgeWithButton } from "@/components/base/badges/badges"; {}}> Label {}}> Label {}}> Label ``` ### With close X badge modern {{ tocOnly:true }} ```tsx import { BadgeWithButton } from "@/components/base/badges/badges"; {}}> Label {}}> Label {}}> Label ``` ### With icon leading {{ tocOnly:true }} ```tsx import { ArrowUp } from "@untitledui/icons"; import { BadgeWithIcon } from "@/components/base/badges/badges"; Label Label Label ``` ### Color with icon leading {{ tocOnly:true }} ```tsx import { ArrowUp } from "@untitledui/icons"; import { BadgeWithIcon } from "@/components/base/badges/badges"; Label Label Label ``` ### Modern with icon leading {{ tocOnly:true }} ```tsx import { ArrowUp } from "@untitledui/icons"; import { BadgeWithIcon } from "@/components/base/badges/badges"; Label Label Label ``` ### With icon trailing {{ tocOnly:true }} ```tsx import { ArrowRight } from "@untitledui/icons"; import { BadgeWithIcon } from "@/components/base/badges/badges"; Label Label Label ``` ### Color with icon trailing {{ tocOnly:true }} ```tsx import { ArrowRight } from "@untitledui/icons"; import { BadgeWithIcon } from "@/components/base/badges/badges"; Label Label Label ``` ### Modern with icon trailing {{ tocOnly:true }} ```tsx import { ArrowRight } from "@untitledui/icons"; import { BadgeWithIcon } from "@/components/base/badges/badges"; Label Label Label ``` ### With icon only {{ tocOnly:true }} ```tsx import { Plus } from "@untitledui/icons"; import { BadgeIcon } from "@/components/base/badges/badges"; ``` ### Color with icon only {{ tocOnly:true }} ```tsx import { Plus } from "@untitledui/icons"; import { BadgeIcon } from "@/components/base/badges/badges"; ``` ### Modern with icon only {{ tocOnly:true }} ```tsx import { Plus } from "@untitledui/icons"; import { BadgeIcon } from "@/components/base/badges/badges"; ```