tag

29 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

Tag component purpose and use cases

Tags are components used to label, categorize, or organize items using keywords that describe them. They are often used to label different items, create categorization, filter data, select or deselect options, and include functionality to disclose several related tags in another view.

Tag variants

Tags come in four variants. Read-only tags have no interactive functionality and are commonly used for categorizing and labeling. Dismissible tags can be dismissed, closed, or removed and are typically used for filtering and creating user-generated content. Selectable tags can be selected or deselected and are frequently used as selections that filter data in the context of a page or in chat flows to make decisions to advance the chat. Operational tags can disclose additional or overflow tags when interacted with, like in a popover, modal, or breadcrumb detail view.

When to use tags

Use tags when content is mapped to multiple categories and the user needs a way to differentiate between them. Use for categorizing, labeling, or read-only situations. Use as a method of filtering data on a page, within a component, or in conjunction with search capabilities. Use in a chat flow to make decisions and advance the chat. Use for creating user-generated custom labeling and when needing to remove created labels. Use to view an overflow of multiple tags, like in a popover, modal, or detail view.

When not to use tags

Do not use tags as links that direct you to an entirely different page or launch you from a current experience to a separate tab. Avoid using tags with multiple functions to prevent confusion and reduce accidental clicks.

Tag anatomy

Read-only, dismissible, selectable, and operational tags are comprised of a container, a text title, and the option to add a decorative icon. Dismissible tags include an additional close icon to filter or dismiss a tag. Selectable and operational tags include a container border to indicate at a glance that these variants have increased interactivity and function differently.

Tag sizes

There are three different tag sizes: small, medium, and large. Use small tags in condensed or inline spaces. The medium tag size is the default size and is most commonly used. Use large tags when they are used as a primary task of the page or focal point, when you have more screen real estate at your disposal, or if the tag lives near other components that are also 32px in height.

Tag placement and spacing

Vertically align the tag's container to the other components or text near it. Do not hang tag containers into grid gutters to vertically align the tag's titles with other text on the page. When tags are placed in groups, it is recommended to have 8px of space between them on the top, bottom, left, and right.

Tag title guidelines

Tag titles should be concise and informative. Tag titles should describe the tag in a few words or be under 20 characters when possible. Only include long title content in tags when necessary, for instance when there are user-defined names of categories or system-generated strings of text.

Tag title overflow and truncation

When the tag's title is too long to fit within the available space of the tag container, the title can be truncated with an ellipsis. By mouse, the full title is disclosed in a browser tooltip on hover. By keyboard, the full title is disclosed on focus in a tooltip. Truncation should be set at the title's start, middle, or end depending on what is best for the given use case. Avoid having long tag titles wrap to multiple lines within the tag container as this can construe the shape of the tag and integrity of a traditional tag shape and can create misalignment with other tags if they are placed within a group.

Tag states

Read-only tags have states: enabled, disabled, and skeleton. Dismissible tags and operational tags have states: enabled, hover, focus, on click, disabled, and skeleton. Selectable tags have states: enabled, hover, focus, selected, disabled, and skeleton.

Tag state definitions

Enabled: When a tag is live but a user is not directly interacting with it, commonly referred to as the default or normal state. Hover: When a user is hovering over the tag with the mouse cursor to interact with it (except read-only tags). Focus: When a user presses tab or clicks on the tag, it becomes focused, indicating the user has successfully navigated to the component (except read-only tags). On click: When a user presses enter, space, or clicks on the tag to either dismiss it or disclose a list of additional tags. Selected: When a user presses enter, space, or clicks on the tag to select it or deselect it. Disabled: When a user is not allowed to interact with the tag due to either permissions, dependencies, or pre-requisites. The disabled state completely removes the interactive function from a component. The styling is not subject to WCAG contrast compliance.

Read-only tag mouse interactions

Read-only tags do not get mouse functionality besides a mouse cursor on hover and do not have interactive functionality.

Dismissible tag mouse interactions

Dismissible tags receive a mouse cursor when hovering over the title area of the tag. When hovering over the close icon, the icon gets a background color change and a mouse pointer. Once the close icon area is clicked, the tag will be dismissed, closed, or removed.

Selectable tag mouse interactions

Selectable tags receive a full background color change and mouse pointer on hover. Clicking anywhere on the tag will put it in a selected state. Once in the selected state, clicking anywhere on the tag again will deselect it.

Operational tag mouse interactions

Operational tags receive a background color change and mouse pointer on hover. Clicking anywhere on the tag will disclose a way of viewing more related tags in either a popover, modal, or breadcrumb view.

Read-only tag keyboard interactions

Read-only tags can not be operated by a keyboard and have no interactive functionality.

Dismissible tag keyboard interactions

Dismissible tags receive focus on the close icon area by pressing the Tab key. Pressing the Enter or Space keys will dismiss, close, or remove the tag.

Selectable tag keyboard interactions

Selectable tag container receives focus by pressing the Tab key. Pressing the Enter or Space keys will select or deselect the tag. If navigating in a group of tags, use the Tab key to move focus to different tags in the group.

Operational tag keyboard interactions

Operational tag container receives focus by pressing the Tab key. Pressing the Enter or Space keys will disclose additional related tags in a popover, modal, or breadcrumb view.

Tag clickable areas

Read-only tags are not clickable and can not be interacted with. Dismissible tags have a clickable area around the close icon to dismiss or close the tag. Selectable and operational tags containers are clickable to either select the tag or view more tags.

Read-only tag usage

Read-only tags are used to categorize, are used for labeling, and do not have interactive functionality. Read-only tags come in several color choices and can use optional decorative icons to delineate between multiple categories. If your design intends to use tags as labels or for categorization, use modifiers like colors or icons to help indicate this differentiation.

Read-only tag color usage guidance

Do use colors to help distinguish between different tag labels or categories for easier scanning. Do not use the same color for every tag if they are supposed to be used as labels or categories.

Dismissible tag usage

Dismissible tags allow users to dismiss, close, or remove a tag. Dismissible tags are commonly used with the search component to search or filter keywords on a page or within sections of a page. Dismissible tags can also be used as user-generated labels that are applied to instances and can be removed later if needed. Do not use a dismissible tag if the intention for it is to remain persistent at all times since they can be closed or dismissed by the user.

Selectable tag usage

Selectable tags give users the ability to select or deselect them. They can be used in a form containing only tags as the selection method, in a chat to make decisions and forward the chat, and can be used as selections to filter content on a page or within a component. In some cases, selectable tags can be an alternative to traditional form components when the entire form consistently uses tags as its form selection style. Selectable tags can be used for multi-selection or single-selection use cases. These tags should always remain in high contrast to ensure a noticeable difference between selected and unselected tags.

Selectable tag grouping and wrapping

When selectable tags are in groups, horizontal alignment is recommended for easier scanning when there are only a few tags. Keep groups of tags horizontally on one line when there are six tags or less. Horizontal alignment is not recommended when there are many tags to select from in a group. Tags should wrap to form another line if there are too many to arrange horizontally on one line. If the number of tags exceeds five lines of wrapping, consider using a different component for your use case, like a multi-select dropdown.

Operational tag usage

Operational tags enable the user to see a more comprehensive view of all tags disclosed in a popover or breadcrumb detail view. Do not use tags as links that direct you to an entirely different page or launch you from a current experience to a separate tab.

Decorative icons in tags

Decorative icons lead before the tag title. Decorative icons are optional and are often used to support the tag title visually. It is recommended not to use decorative icons in the small tag size where there is compact spacing, which could create possible visual tension between some icon shapes and tags with borders.

Tag color tokens

Read-only, dismissible, and operational tags come in a variety of different colors, with values from the IBM Design Language color palette using component tokens. It is recommended to use multiple colors to denote different categories or labels. Selectable tags are unavailable in these colors; instead, they use core tokens.

Tag with AI label feature

Tag has a modification that embeds the AI label when AI is present in the component. The AI variants function the same as the normal versions except with the addition of the inline AI label which is both a visual indicator and the trigger for the explainability popover. Read-only and dismissible tags are the only tag variants that allow for the interactive AI label.

Give your agent this brain