Data Display

Tag

Filterable tag chips for categorizing and grouping content — three sizes, dismissible, with counts and selectable modes.

Import

import { TagGroup, Tag } from "@countryclub/ui-react";

Default

GolfTennisPoolFitnessDining

Sizes

Three sizes via the "size" prop on TagGroup: "sm", "md" (default) and "lg".

GolfTennisPoolFitness
GolfTennisPoolFitness
GolfTennisPoolFitness

Close X

Pass onRemove to TagGroup for a dismiss button on every tag.

GolfTennisPoolFitnessDining

Count

Show an item count beside the label via the count prop on Tag.

Golf14Tennis8Pool23Fitness6Dining11

Selectable

Set selectionMode to "single" or "multiple" to make tags toggleable — selected tags show a checkmark.

GolfTennisPoolFitnessDining

Selectable + Close X

Combine selectionMode with onRemove for selectable, dismissible tags.

GolfTennisPoolFitnessDining

Selectable + Count

Combine selectionMode with count for filterable tags with totals.

Golf14Tennis8Pool23Fitness6Dining11