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
<div class="tag">
  <span class="icon-info" aria-hidden="true"></span>
  <span class="text">default</span>
</div>
<div class="tag is-info">
  <span class="icon-info" aria-hidden="true"></span>
  <span class="text">info</span>
</div>
<div class="tag is-success">
  <span class="icon-check-circle" aria-hidden="true"></span>
  <span class="text">success</span>
</div>
<div class="tag is-warning">
  <span class="icon-exclamation" aria-hidden="true"></span>
  <span class="text">warning</span>
</div>
<div class="tag is-danger">
  <span class="icon-exclamation-circle" aria-hidden="true"></span>
  <span class="text">error</span>
</div>

Best Practice

We recommend the use of icons within informative tags only when necessary to convey context.

 2 tags with inner text
 2 tags with inner text

Do

Keep tag text short and simple so as not to distract the user who may be scanning for information.

 tags with inner text and icons
 tags with inner text and icons

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).

Interactive
<button class="tag">
  <span class="icon-duplicate" aria-hidden="true"></span>
  <span class="text">Interactive</span>
</button>
<a href="#" class="tag is-selected">
  <span class="icon-duplicate" aria-hidden="true"></span>
  <span class="text">Interactive</span>
</a>
<button class="tag" disabled>
  <span class="icon-duplicate" aria-hidden="true"></span>
  <span class="text">Interactive</span>
</button>

Best Practice

We recommend the use of icons within informative tags only when necessary to convey context.

 2 tags with inner text
 2 tags with inner text

Do

Keep tag text short and simple so as not to distract the user who may be scanning for information.

 tags with inner text and icons
 tags with inner text and icons

Don't

If you choose to use icons, don’t mix and match their placement.