Badge

A styled badge.

Start using via importing:

import { Badge } from "@perceptui/ui";

Badge

<Badge>Badge</Badge>

API References

Prop	Type	Description	Default
variant	`"solid" \| "outline" \| "soft"`	Form of the Badge	solid
color	`string`	Color of the Badge	blue
radius	`"none"\|"sm"\|"md"\|"lg"\|"xl"\|"full"`	Radius of the Badge	none
size	`"xs"\|"sm"\|"md"\|"lg"\|"xl"`	Size of the Badge	xs
className	`string`	className	_

Use the variant prop to control the visual style of the Badge.

Badge

<Badge variant="solid">Badge</Badge>

<Badge variant="outline">Badge</Badge>

<Badge variant="soft">Badge</Badge>

Use the color prop to control the color of the Badge.

Badge

<Badge color="blue">Badge</Badge>

<Badge color="emerald">Badge</Badge>

<Badge color="gray">Badge</Badge>

<Badge color="rose">Badge</Badge>

<Badge color="cyan">Badge</Badge>

<Badge color="yellow">Badge</Badge>

There are more color properties. Take your time to explore

Use the radius prop to assign a specific radius value.

Badge

<Badge radius="none">Badge</Badge>

<Badge radius="sm">Badge</Badge>

<Badge radius="md">Badge</Badge>

<Badge radius="lg">Badge</Badge>

<Badge radius="xl">Badge</Badge>

<Badge radius="full">Badge</Badge>

Use the size prop to assign a specific size value.

Badge

<Badge size="xs">Badge</Badge>

<Badge size="sm">Badge</Badge>

<Badge size="md">Badge</Badge>

<Badge size="lg">Badge</Badge>

<Badge size="xl">Badge</Badge>