Badge

PreviousNext

Status / meta badge.

import { Badge } from "@/rl-ui";

<>
<Badge color="blue">Active</Badge>
<Badge color="orange">At risk</Badge>
<Badge color="green">Done</Badge>
</>

Examples

Colors

import { Badge } from "@/rl-ui";

<>
<Badge color="blue">blue</Badge>
<Badge color="cyan">cyan</Badge>
<Badge color="teal">teal</Badge>
<Badge color="green">green</Badge>
<Badge color="purple">purple</Badge>
<Badge color="magenta">magenta</Badge>
<Badge color="red">red</Badge>
<Badge color="orange">orange</Badge>
<Badge color="yellow">yellow</Badge>
<Badge color="gray">gray</Badge>
<Badge color="cool-gray">cool-gray</Badge>
<Badge color="warm-gray">warm-gray</Badge>
</>

Dot & notification

import { Badge } from "@/rl-ui";

<>
<Badge variant="dot" />
<Badge variant="notification">3</Badge>
<Badge color="blue" disabled>Disabled</Badge>
</>

API

PropTypeDefaultDescription
variant"default" | "dot" | "notification""default"Badge shape.
color"blue" | "cyan" | "teal" | "green" | "purple" | "magenta" | "red" | "orange" | "yellow" | "gray" | "cool-gray" | "warm-gray" | …—Fill color (default variant).
disabledbooleanfalseMuted presentation.
asChildbooleanfalseMerge onto child.