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
Prop | Type | Default |
---|---|---|
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