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.

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

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.

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.