COMPONENTS

Tag

Tags display a single category, dimension or property related to adjacent content.

tags-intro.png

Note: Tag is not currently available in the UI Toolkit as a component. This guidance outlines the latest research and recommendations from the Goldman Sachs Design System. Future guidance may change to support new research, methods and/or code.

Tags can be used to represent a contact or a filter. Use Tags to label, organize, or categorize objects. Tags can also serve as a label for content or display counts.

tags-anatomy.png
  1. Tag container
  2. Close icon
  3. Label

Basic tags cannot be closed. They can be read-only or link to another page.

tags-basic.png

Dismissible Tags are removable and have a close icon. Use them to display multiple selections, which also allows users to undo their selections.

tags-dismissible.png

The toggle tag allows the user to toggle between two states.

tags-toggle.png

Selectable tags can be used for filtering content on a page.

tags-filter.png

Tags can use color for visual categorization.

tags-color.png

Checkable tags behave like checkboxes and can be selected or unselected.

tags-checkable.png

Tags can be selected, hovered, or toggled.

tags-states.png

Tags can have a rounded or square appearance. The square version should be used with caution when placed next to buttons on a page.

tags-shapes.png

Tags can be displayed in medium and small sizes.

tags-sizes.png
  • Always provide a label.
  • Write labels in sentence case.
  • Keep labels short to avoid wrapping.
  • Avoid placing icons in front of or behind tags.
  • Be careful not to overload an interface with tags.