Anatomy
Anatomy summary lists and describes all the elements within a component (including nested components).
- Tag container: Primary container that holds the label and optional Icon and Avatar.
- Tag label: User-generated text describing the tag.
- Avatar (optional): Leading Avatar that helps differentiate an entity, such as a Space or a Tenant.
- Icon (optional): Leading icon that helps differentiate between what objects tags are associated with.
- Dismiss Button (optional): Indicates the tag can be dismissed.
Variants
Variants contain different versions of the component depending on specific properties, such as state, size, color, optional iconography, etc.
Type
There are three types of Tags depending on which components are nested within:
| Property | Values | Default |
|---|---|---|
| hasIcon Boolean | true | false | false |
| hasAvatar Boolean | true | false | false |
| ✏️ label Text | string | Read-only tag |
| isDismissible Boolean | true | false | false |
Dismissible Tags
Each type of Tag can be made dismissible, meaning that it can be dismissed by a user.
Component dependencies
This component is internally dependent on the following components:
Avatar
Avatar is a visual representation of a user (person) or entity (such as Spaces, Projects, or Tenants).
System Icons
Help and support