Badge

import { Badge } from 'yarcl';

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.

Removable tags

reacttypescriptvitecss

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

Props

Prop	Type	Default	Description
color	Colorconfig	config.defaults.color	Semantic color, from the colors config.
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	'Remove'	Accessible label of the remove button.
size	Sizeconfig	config.defaults.size	Scales with the size's font size, from the sizes config.
variant	Variantconfig	config.defaults.softVariant	Style recipe, from the variants config.