Design
Web component
Is documented
Status
Healthy
Figma component
Principles
Use when
- referring to items or content that have informational and dynamic content.
- allowing users to perform actions such as filtering or sorting information.
- set categories for related content.
Don't use when
- displaying the item if content is a visual signifier. Instead use tag-semantic.
Structure
- Container
- Tag label
- Action (remove) button
Properties
States
|
Enabled |
The enabled type is used to indicate as it is default. |
|---|---|
|
Hover |
While the user hovers over the tag, the background will change. |
|
Focus |
When in the focused state (while on the tab key), pressing enter will apply the relevant action contained within the tag. |
|
Active |
The active state is for when the component is selected. |
|
Disabled |
When the tag is disabled, the user is unable to make any changes to it, such as removing it from filtering arrays or changing its label. |
Attribute
Action button (boolean)
The action button is used to remove the tag from where it is currently applied, when the user is allowed to do so.
Positioning
When the interactive tag will be used in an input field, the field can contain multiple interactive tags horizontally. If you want to use the interactive tag in the overflow menu, use tag item as a single line item property.
Behavior
Interaction
Interactive tag can be created on input fields and can be transformed to tag. These tags can be also editable on an input field.
The tags are preferred to remove by using delete key or hitting the remove icon when using the component on input field.
Also Interactive tag's label should carry one word. If the text character reaches to max inner-padding with its container truncate the text.