AI label

The AI label is more than just an indicator of AI instances in the UI. It’s also a consistent pathway to AI explainability. Its behavior is flexible enough to cooperate with the behaviors and interactions within existing products.

The AI label is intended for any scenario where something is being generated by (or with) AI to reinforce AI transparency, accountability, and explainability at any interface level. This also enables more effective recognition and recall of AI instances in a way that is identifiable across any IBM product.

AI transparency is key, and the AI label is an accessible, interactive element that marks any AI instance presented in the interface.

For recognition and recall, users need a consistent, identifiable visual reference to look to when they need to understand more details about how the AI was built.

Users must clearly understand how to access more details about how an AI was built. By providing a bridge to explainability from the AI label, users are given a recognizable location to learn more about the AI model.

These are strictly intended to indicate any time a modality or component is using AI.

The AI label is intended as a pathway to explainability. Any additional behaviors can set unclear and inconsistent expectations.

The AI label is not a UI icon and should not be used with buttons or other call-to-actions to trigger an AI action like “regenerate.” Those type of AI actions will have their own UI icons.

The default AI label spans the range of UI icons and pictogram sizes. Which size to use is determined by the prominence and hierarchy of the area it is in or by its neighboring content like other buttons. When placed next to other ghost icon buttons we typically recommend going down one size from the button size so they are optically weighted the same.

placed inline with. For example, when inserting the inline AI label into a table row with 14px font size, you match it with the medium-size inline AI label that also has a 14px font.

The AI label should be placed in consistent locations (based on modality) to help users identify AI presence in the interface. Consistent placement reinforces recognition and recall for users. The instructions for these placements assume a left-to-right reading order. If right-to-left then these instructions should be reversed.

The AI label should be placed in the upper right of the container with appropriate margin. Never place the AI label flush to the edges of a container.

Place AI labels on the right side and in the middle of any form inputs (dropdowns, text or number input, etc.).

If other icons are present along side the AI label, then the AI label should be placed in the far left position of the icon group.

The exception is when the icon has an interaction state that alters its size or position, like an expandable search or toggle-able sort. In these instances, the AI label is placed to the right of these exceptions but still to the left of other icon types.

Where the AI label goes inside of a data table depends on which parts of the data are AI generated.

Where the AI label is placed in a form can vary depending on if the AI presence is across the whole form or just in certain parts of the form.

The AI label might appear at multiple levels of a page, or it might appear only once. The content in the AI explainability popover might be focused on a single AI instance or broadly address multiple instances. All scenarios are acceptable and possible, but the level of visibility depends on the need for explainability and/or the need to distinguish AI content from human content. Use this guide to determine what works best for your use case.

The abbreviation AI in the AI label stands for the English term artificial intelligence. The abbreviation can be localized for other languages. Here are some examples of abbreviations in other languages.

AI label has three interactive states: enabled, hover, and focus. The AI label should never be disabled as part of a disabled or read-only state. Learn more about states on the Style tab.

Although it may look like an icon button, the AI label is itself a button. Therefore, the clickable area is limited to the boundaries of the AI label without any additional external coverage, such as in a ghost button.

The AI label is reachable by Tab and opens the explainability popover with Enter. Press Esc or Tab away to close the popover. When AI is present in the input an additional tab stop is added to reach the AI label.

Users can manually override AI-suggested content, but they should always be able to programmatically switch back to the initially suggested AI content. In these instances, when the content is overridden by the user, the AI presence styling is removed and the AI label is replaced by a “revert” action icon-only button. If a user activates the revert action, the AI-generated content will reappear, along with the AI presence styling and AI label.

The popover is the first layer of explainability that is accessed by clicking the AI label. This provides a consistent up-front way to access explainability with the ability to dig into more details on-demand. Use this popover any time AI needs to be explained in your experience.

The AI label is the trigger that opens explainability popover. The interaction works like a toggletip where the popover remains open until the user clicks or tabs away from the AI label.

The popover should auto-position itself to the best orientation on the screen so that it does not appear out of view for the user. It follows the same alignments as the primitive caret-tip popover.

The popover container is a configurable content area but Carbon for AI provides a recommended content template for creating your explainability content. The template is split into four main content sections:

For more information and guidance on designing the content for your explainability popover, IBMers can go to the AI explainability popover pattern on IBM Design for AI.

Help us improve this component by providing feedback, asking questions, and leaving any other comments on GitHub. For IBMers, questions and feedback can be directed to Slack in the channels #carbon-design-system or #carbon-for-ai.