Tag

Tags are used to highlight the status of an item or make it easier to recognize certain items in data-dense content. Be wary of using multiple tags on one item, as it could cause visual noise.

Design documented

React documented

Design

Up to date

React

Up to date

Flutter

Up to date

Introduction

Tags are commonly used in tables, cards and lists. They are short keywords or phrases that describe attributes or topics associated with the tagged item. Tags serve purposes such as categorization and organization.They enhance the organization, searchability, and navigation of content in our UI.

When to use

Categorization and organization: Tags allow users to group and classify content based on specific criteria or topics. Tags can be used to categorize information topics like "approved," "info," "online" ,"warning" or "declined" statuses.

Metadata and information display: Tags can convey additional information about an item without cluttering the UI. For example, tags can indicate the status, priority, or specific attributes of an item, making it easier for users to understand and interact with the content.

Chip

Tag

Component Status

Introduction

When to use

Related Components & Guidelines