Badge

A small status indicator that displays text or numbers in a compact format.

Usage

The Badge component is used to display small pieces of information like counts, status, or labels.

Basic Example

4

Long Badge

47836487647264827

Color Examples

Here are examples of the Badge with different colors:

Red
Green
Blue
Yellow
Purple
Orange
Pink
Gray

Size Examples

Here are examples of the Badge with different sizes:

Small
Medium
Large

Badge with Icon

Props

PropTypeDefault
layout?
LayoutOptions
-
size?
"2xs" | "xs" | "sm" | "3xs" | Partial<Record<"xs" | "sm" | "md" | "lg" | "xl" | "default", "2xs" | "xs" | "sm" | "3xs">>
-
variant?
"solid" | "soft" | "muted"
-
bleedY?
boolean
true
bleedX?
boolean
false
Edit on GitHub

Last updated on