Tag Group

This organizer keeps your tags tight and right, making sure they’re lined up and making sense, just like a librarian sorting books on a shelf.

Basic

A tag group is a focusable collection of labels, categories, keywords, filters, or other elements, equipped with keyboard navigation, selection, and removal functionalities.

Installation

With Remove Button

Tags within the group can include a removal button.

Variants

The default variant is primary. You can also use secondary, success, warning, and danger.

Controlled

Manage the values of the tag group through the value prop.

Href

Incorporate a hyperlink within the tag group using the href prop.

Shape

The tag group can be shaped to be a square or a circle. Just like the badge component, see badge documentation for more information.

Disabled

Disable tags either by setting the isDisabled prop or using disabledKeys on the TagGroup.