Skip to main content

Tag group

Tag groups display a collection of tags.

Code documentation

Web

Anatomy

The tag group is made up of a default slot that accommodates any number of tags.

  1. Default slot
  2. Tag
Anatomy diagram numbering two elements of a tag group.

Variants

Alignment

The alignment property determines how the tags are positioned within the group. Tags may be aligned either to the start or the end of the tag group.

Start

A series of tags wrapping to two rows aligned along the left side.

End

A series of tags wrapping to two rows aligned along the right side.

Behavior

Overflow

The tag group vertically expands and contracts to fit all tags present. Horizontally, tags wrap to fit the width of the tag group.

Two groups of tags demonstrate overflow behaviors. The first group emphasizes how tags flow to a new row to fit within the width of the group. The second group emphasizes how the tag group vertically expands to accommodate multiple rows of tags.