Anatomy
Anatomy summary lists and describes all the elements within a component (including nested components).
|
Element |
Description |
Optional? |
|---|---|---|
|
1. Tag container |
Primary container that holds the label and optional Icon and Avatar. |
No |
|
2. Tag label |
User-generated text describing the tag. |
No |
|
3. Avatar |
Leading Avatar that helps differentiate an entity, such as a Space or a Tenant. |
Yes |
|
4. Icon |
Leading icon that helps differentiate between what objects tags are associated with. |
Yes |
|
5. Dismiss button |
Indicates the tag can be dismissed. |
Yes |
Variants
Variants contain different versions of the component depending on specific properties, such as state, size, color, optional iconography, etc.
| Property | Values | Default |
|---|---|---|
| hasIcon Boolean | true | false | false |
| hasAvatar Boolean | true | false | false |
| ✏️ label Text | string | Read-only tag |
| isDismissible Boolean | true | false | false |
Type
There are three types of Tags depending on which components are nested within:
Dismissible Tags
Each type of Tag can be made dismissible, meaning that it can be dismissed by a user.
The dismiss button has the following states:
- Rest
- Hover
- Focus
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