Tag group

Design a tag group component for a product settings or content-organizing UI. This is a compact grouping pattern, not a full tag manager: it should show a group name, optional color, tag count, and a way to open the group for details.

The default state should read clearly in a list or sidebar. Users need to understand what the group contains, how many tags are inside, and what happens when they click it. Keep the primary action obvious and the secondary actions tucked behind a menu or inline affordance.

Show the expanded state with the tags inside the group, plus controls for adding a tag, renaming the group, and removing a tag from the group. Include handling for long group names, empty groups, and counts that get large enough to test spacing and truncation.

Design for quick scanning and quick editing. The component should work when there are many groups on screen, and the selected group should stay distinguishable from the rest without relying on color alone.

Jazz up the UI with vibrant color-coding or icons to represent different tag groups, enhancing the visual appeal and the usability of your mock!