Tags

Tags are read-only components used to inform customers of the status of an object eg. a rejected rider candidate’s application.

Colors#

There are a variety of styles available with no strict rules, although for best practice:

• Grey - default tag suited to non-critical statuses
• Red - use to callout critical information like errors, destructive actions (eg. removed), negative eg. cancelled order
• Orange - use to call attention to something that is also non-critical such as ‘new’ or a warning
• Green - use to call out something is either in a successful, completed or positive state
• Teal and Berry - these have no particular use but are available in TCL

When used inside a Tag Input, they can be removed by clicking the Close icon.

Best practice#

• Reference well known representations of colors patterns eg. not using green tag when something is in a critical state
• Is clearly positioned beside the page element that they are informing or in cases of repeated data such as a table or list it should have it’s own column/row.
• Concise text that is best kept to a single word.