Badge

Badges are used to highlight an item’s status for quick recognition.

Import

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

Usage

Editable Example

<Badge>Default</Badge>

Badge Variants

Use the variant prop to change the visual style of the Badge. You can set the value to solid, outline or subtle. Default variant is “solid”.

Editable Example

<div className="space-x-2">
		<Badge variant='solid'>Solid</Badge>
		<Badge variant='outline'>Outline</Badge>
		<Badge variant='subtle'>Subtle</Badge>
	</div>

Badge Colors

Use the color prop to change the color scheme of the Badge. You can set the value to any of the color scales from your Radix-Colors, like: ‘tomato’, ‘red’, ‘crimson’, ‘pink’, ‘plum’, ‘purple’, ‘violet’, ‘indigo’, ‘blue’, ‘cyan’, ‘teal’, ‘green’, ‘grass’, ‘orange’, ‘brown’, ‘sky’, ‘mint’, ‘lime’, ‘yellow’, ‘amber’, ‘gold’ and ‘bronze’.

There are some custom colors introduced by Recastui to represent state like: ‘error’, ‘info’, ‘success’ and ‘warning’ that point to existing radix-colors.

A color “main” has been added as “default” color to represent monochrome layout.

Editable Example

<div>
	<div className="space-y-2">Default color:</div>
	<div className="grid gap-2 grid-cols-3 lg:grid-cols-5 mb-2">
		<div><Badge>main</Badge></div>
	</div>
	<div className="space-y-2">Stateful colors:</div>
	<div className="grid gap-2 grid-cols-3 lg:grid-cols-5 mb-2">
		<div><Badge color='success'>success</Badge></div>
		<div><Badge color='info'>info</Badge></div>
		<div><Badge color='warning'>warning</Badge></div>
		<div><Badge color='error'>error</Badge></div>
	</div>
	<div className="space-y-2">All other colors:</div>
	<div className="grid gap-2 grid-cols-3 lg:grid-cols-5">
		<div><Badge color='tomato'>tomato</Badge></div>
		<div><Badge color='red'>red</Badge></div>
		<div><Badge color='crimson'>crimson</Badge></div>
		<div><Badge color='pink'>pink</Badge></div>
		<div><Badge color='plum'>plum</Badge></div>
		<div><Badge color='purple'>purple</Badge></div>
		<div><Badge color='violet'>violet</Badge></div>
		<div><Badge color='indigo'>indigo</Badge></div>
		<div><Badge color='blue'>blue</Badge></div>
		<div><Badge color='cyan'>cyan</Badge></div>
		<div><Badge color='teal'>teal</Badge></div>
		<div><Badge color='green'>green</Badge></div>
		<div><Badge color='grass'>grass</Badge></div>
		<div><Badge color='orange'>orange</Badge></div>
		<div><Badge color='brown'>brown</Badge></div>
		<div><Badge color='sky'>sky</Badge></div>
		<div><Badge color='mint'>mint</Badge></div>
		<div><Badge color='lime'>lime</Badge></div>
		<div><Badge color='yellow'>yellow</Badge></div>
		<div><Badge color='amber'>amber</Badge></div>
		<div><Badge color='gold'>gold</Badge></div>
		<div><Badge color='bronze'>bronze</Badge></div>
	</div>
</div>

Pill

Editable Example

<Badge pill>pill</Badge>

Uppercase

Default is true.

Editable Example

<div className="space-x-2">
		<Badge uppercase>Uppercase</Badge>
		<Badge uppercase={false}>Uppercase False</Badge>
	</div>