UI
  • Home
  • Components
  • Blocks
Getting Started
  • Introduction
  • Installation
  • Layout
  • Colors
  • Spacing
  • Radius
  • Typography
Layout
  • Aspect Ratio
  • Card
  • Empty
  • Item
  • Separator
  • Tabs
  • Marquee
Input
  • Checkbox
  • Combobox
  • Date Picker
  • Field
  • Filters
  • Input
  • Input Group
  • InputOTP
  • Label
  • Number Input
  • Phone Input
  • Radio Group
  • Select
  • Slider
  • Switch
  • Toggle
  • Toggle Group
  • Textarea
Forms
  • React Hook Form
Navigation and actionables
  • Button
  • Breadcrumb
  • Collapsible
  • ContextMenu
  • Command
  • Dropdown Menu
  • Navigation Menu
  • Pagination
  • Sidebar
Data Display
  • Accordion
  • Alert
  • Alert Dialog
  • Avatar
  • Badge
  • Calendar
  • Card
  • Chart
  • Dialog
  • Drawer
  • Empty
  • Kbd
  • Popover
  • Progress
  • Sheet
  • Spinner
  • Toast
  • Tooltip
Utility
  • Aspect Ratio
  • Scroll Area
  • Separator
  • Skeleton

Badge

Displays a badge or a component that looks like a badge.

View on GitHub
Badge
Muted
Outline
Destructive
Success
Warning
Info

With Icon

Ghost
Solid
muted
outline
Ghost
Solid
muted
outline
Ghost
Solid
muted
outline
Ghost
Solid
muted
outline
Ghost
Solid
muted
outline
Ghost
Solid
muted
outline

Size

Xsmall
Small
Medium
Large
5
5
5
5

With Dot

Ghost
Default
Muted
Outline
Ghost
Default
Muted
Outline
Ghost
Default
Muted
Outline
Ghost
Default
Muted
Outline
Ghost
Default
Muted
Outline

Remove Button

Ghost
Solid
Light
Outline
Ghost
Solid
muted
Outline
Ghost
Solid
muted
Outline
Ghost
Solid
muted
Outline
Ghost
Solid
muted
Outline
Ghost
Solid
muted
Outline

Disabled

Ghost
Solid
muted
outline
Ghost
Solid
muted
outline
Ghost
Solid
muted
outline
Ghost
Solid
muted
outline
Ghost
Solid
muted
outline
Ghost
Solid
muted
outline

© Copyright 2025. All rights reserved.

Follow us on TwitterFollow us on GitHub