Badge

import { Badge } from '@yarcl/react';

Certified Wonderful Enrichment Educator GraduateCertified Wonderful Enrichment Educator Graduate

primaryneutralsuccesswarningdangerinfosolid

primaryneutralsuccesswarningdangerinfosoft

primaryneutralsuccesswarningdangerinfooutline

primaryneutralsuccesswarningdangerinfoghost

<Badge color="success">Active</Badge>
<Badge color="danger" variant="solid">Overdue</Badge>

Badges use the same variant recipes as buttons. The default is defaults.softVariant.

Use startIcon or endIcon for a decorative status icon. The icon size and the gap from the label follow the badge’s size token.

<Badge color="success" startIcon={<CheckIcon />}>Completed</Badge>

Removable tags

reacttypescriptvitecss

<Badge radius="rounded" color="neutral" onRemove={() => remove(tag)} removeLabel={`Remove ${tag}`}>
  {tag}
</Badge>

Long labels

Labels truncate with an ellipsis to stay within their container. The full label remains in the accessible text, and icons and remove buttons keep their space. Use wrap for a multiline label, including long words.

<Badge>Certified Wonderful Enrichment Educator Graduate</Badge>
<Badge wrap>Certified Wonderful Enrichment Educator Graduate</Badge>

Props

Prop	Type	Default	Description
color	Colorconfig	config.defaults.color	Semantic color, from the colors config.
endIcon	ReactNode		Decorative icon after the label, sized from the badge size.
onRemove	() => void		Shows a remove button, making the badge a removable tag. Called when it is pressed.
radius	'size' | Radiusconfig	config.defaults.radius	Corner radius, from the radii config.
removeLabel	string	config.labels.remove	Accessible label of the remove button.
size	'lg' | 'xs' | 'sm' | 'md' | 'xl'	config.defaults.size	Scales with the size's font size, from the sizes config.
startIcon	ReactNode		Decorative icon before the label, sized from the badge size.
variant	Variantconfig	config.defaults.softVariant	Style recipe, from this component's variant map or shared variants.
wrap	boolean		Allows the label to wrap onto multiple lines instead of truncating with an ellipsis.