Badge
Badges are visual elements that convey information to users in a subtle way, often used to draw attention to certain elements such as new, beta, free or premium features.
Usage
import { Badge } from "@newfold/ui-component-library";
<Badge>Badge Text</Badge>
Variants
There are 3 variants of the badge component, each with a different color scheme and usage purpose.
1. Info (default)
The info badge is used to provide additional information or context about a feature or section.
<Badge>
Info (default)
</Badge>
2. Upsell
The upsell badge is used to show premium users which features are part of their premium or paid plan.
<Badge variant="upsell">
Upsell
</Badge>
3. Plain
The plain badge is used to represent a variable or value.
<Badge variant="plain">
Plain
</Badge>
Sizes
The badge variants can be used in three different sizes.
1. Large
The large badge size is used in combination with a section heading.
<div className="nfd-flex nfd-gap-3">
<Badge size="large">Info Large</Badge>
<Badge size="large" variant="upsell">Upsell Large</Badge>
<Badge size="large" variant="plain">Plain Large</Badge>
</div>
2. Default
The default badge size is typically used in the top right corner of a card or in combination with a setting label.
<div className="nfd-flex nfd-gap-2.5">
<Badge>Info Default</Badge>
<Badge variant="upsell">Upsell Default</Badge>
<Badge variant="plain">Plain Default</Badge>
</div>
3. Small
The small badge size is typically used in combination with small labels or in smaller spaces, such as sidebar menus.
<div className="nfd-flex nfd-gap-2">
<Badge size="small">Info Small</Badge>
<Badge size="small" variant="upsell">Upsell Small</Badge>
<Badge size="small" variant="plain">Plain Small</Badge>
</div>
Props
| Attribute | Type | Description | Default |
|---|---|---|---|
| children* | node | | The content of the badge. | - |
| variant | info | upsell | plain | | The variant of the badge. | info |
| size | default | small | large | | The size of the badge. | default |
| className | string | | - | - |