Badge
Badges communicate status or category at a glance. They are non-interactive and should always be accompanied by a text label.
Variants
Five variants are available to match the semantic meaning of the status being communicated.
NeutralSuccessWarningErrorInfo
Sizes
Two sizes are available. Use sm for compact contexts like table cells or tags, and md as the default.
SmallMedium
Greenhouse examples
Badges work well for communicating plant health, growth stage, or care status at a glance.
SeedlingEstablishedNeeds waterRoot rotDormant
Usage
Pass a label string and a variant to control the color. Use size to switch between sm and md. The default variant is neutral and the default size is md.
Explore the Badge component by adjusting its properties below. Changes are reflected in the live preview and code snippet in real time.
Seedling
Properties
<Badge label="Seedling" />