Badge

Displays a small amount of information to the user. It is usually a small, circular or rounded rectangle containing numbers or text.

Import

import { Badge } from "@aeonkit/react";

Usage

Sizes

You can use the size prop to change the size of the badge.

Preview

extra smallsmall

Code

<Badge size="xs">extra small</Badge>
<Badge size="sm">small</Badge>

Pill

You can use the pill prop to make the badge pill shaped.

Preview

Technology

Code

<Badge pill>Technology</Badge>

Colors

You can use the color prop to change the color of the badge.

Preview

primarysecondaryamberbluecyanemeraldfuchsiagraygreenindigolimeneutralorangepinkpurpleredroseskyslatestonetealvioletyellowzinc

Code

<Badge color="pink">pink</Badge>

Props

Badge

color?

"primary" "secondary" "slate" "gray" "zinc" "neutral" "stone" "red" "orange" "amber" "yellow" "lime" "green" "emerald" "teal" "cyan" "sky" "blue" "indigo" "violet" "purple" "fuchsia" "pink" "rose"

The badge color.

Default: slate

pill?

boolean

Whether the badge should be pill shaped.

Default: false

size?

"xs" "sm"

The badge size.

Default: xs

API Interface: BadgeProps