ComponentsBlocksDocsExamples

Accordion
Field
Accordion Menu
Alert Dialog
Avatar
Badge
Breadcrumb
Button
Carousel
Checkbox
Collapsible
Command
Combobox
Context Menu
Date Picker
Dialog
Dropdown Menu
Form
Filters
New
Hover Card
Input
Update
Label
Menubar
Navigation Menu
Popover
Progress
Radio Group
Scroll Area
Select
Separator
Sheet
Slider
Sortable
Switch
Table
Tabs
Tooltip
Toggle
Toggle Group
Tree

Components

Badge (unified)

UI Library:

A Badge is a small, visually distinct element used to display contextual metadata, such as status, category, or notifications, enhancing the clarity and organization of your design.

Open in
Loading

Installation

pnpm dlx shadcn@latest add @toui/badge

Examples

Light

Open in
Loading

Outline

Open in
Loading

Circle

Open in
Loading

Shapes

Open in
Loading

With Dot

Open in
Loading

With Icon

Open in
Loading

Remove Button

Open in
Loading

Square

Open in
Loading

Sizes

Open in
Loading

asChild

Open in
Loading

Disabled

Open in
Loading

API Reference

This component provides a customizable badge system with flexible variants, sizes, and appearances.

Badge

PropTypeDefault
variant enum secondary
appearance enum default
size enum md
shape enum default
disabled booleanfalse
asChild booleanfalse
className string

BadgeButton

PropTypeDefault
variant enum default
asChild booleanfalse
className string

BadgeDot

PropTypeDefault
className string

Credits

  • Built with Radix UI Slot.
PreviouseAvatarNextBreadcrumb

On This Page

  • Installation
  • Examples
    • Light
    • Outline
    • Circle
    • Shapes
    • With Dot
    • With Icon
    • Remove Button
    • Square
    • Sizes
    • asChild
    • Disabled
  • API Reference
    • Badge
    • BadgeButton
    • BadgeDot
  • Credits

We use cookies

We use cookies to ensure you get the best experience on our website. For more information on how we use cookies, please see our cookie policy.

By clicking Accept, you agree to our use of cookies.
Learn more.

Token UI

Components

  • Overview
  • Pricing
  • Marketplace
  • Features
  • Integrations
  • Pricing

Blocks

  • Charts
  • Team
  • Blog
  • Careers
  • Contact
  • Privacy

Examples

  • Help
  • Sales
  • Advertise

Docs

  • Twitter
  • Instagram
  • LinkedIn

© 2025 TOUI.dev. All rights reserved.

  • Terms and Conditions
  • Privacy Policy