Greenhouse Design System

Tag

Tags represent user-applied labels or filters. Unlike badges, tags are interactive — they can be dismissed and typically represent something the user has actively added.

Variants

Five variants are available, matching the same semantic meanings as Badge. Use the variant that best reflects the nature of the tag.

NeutralSuccessWarningErrorInfo

Sizes

Two sizes are available. Use sm for compact contexts like input fields and md as the default.

SmallMedium

With icon

Pass an icon via the icon prop to add a leading visual that helps identify the type of tag at a glance.

EstablishedRoot rotTropical

Dismissible

Pass onDismiss to show a remove button. The parent component is responsible for removing the tag from its list when dismissed. Try removing tags below.

MonsteraTropicalEstablishedNeeds waterRoot rot

Greenhouse examples

Tags work well for plant attributes, applied filters, and care labels that users can add and remove.

Plant labels

TropicalLow lightPet safeToxic

Applied filters

Zone: TropicalStage: SeedlingNeeds water

Usage

Pass a label and optional variant to control appearance. Add onDismiss to show a remove button — the parent is responsible for updating the list. Use icon for a leading visual and size to switch between sm and md.