Tag
Tags help organize and differentiate between different categories of content. In the Appwrite console, tags may be interactive or static.
| Class | Type | |
|---|---|---|
tags
|
Tag | A class representing a tag |
Informative Tags
Informative tags are used to visually label information for easy understanding and/or navigation. In the Appwrite console, we use our system colours for each type of tag (gray, blue, green, orange, red) depending on context.
| Class | Type | |
|---|---|---|
| - | Default | Use this tag to provide general details to the user. In the Appwrite console this style is typically used for ‘disabled’ state tags. |
is-info
|
Info | Use this tag to provide additional information or ‘tips’ to the user. |
is-success
|
Success | Use this tag to inform the user of a task that has been completed or verified successfully. |
is-warning
|
Warning | Use this tag to warn the user that action may be required, or a task is currently processing, depending on the context. |
is-danger
|
Danger / Error | Use this tag to warn the user about an error that may have occured or a task has failed. |
default
info
success
warning
error
Beta
Best Practice
We recommend the use of icons within informative tags only when necessary to convey context.
Do
Keep tag text short and simple so as not to distract the user who may be scanning for information.
Don't
If you choose to use icons, don’t mix and match their placement.
Interactive Tags
Interactive tags are clickable or tappable. In the Appwrite console these are typically used to allow users to copy or edit an element’s ID. Use an icon to clarify the action (e.g. the ‘duplicate’ icon for copy and ‘pencil’ icon for edit).
Best Practice
We recommend the use of icons within informative tags only when necessary to convey context.
Do
Keep tag text short and simple so as not to distract the user who may be scanning for information.
Don't
If you choose to use icons, don’t mix and match their placement.