Tag

Tags reference resources in the app in a more visual way than a plain label.

#

#

Tag can show an image (usually a logo) before the label.

#

Tag can indicate the status of the referenced resource by showing a colorful border around image. This is useful for indicating the status of a sync, for example.

#

#

  • Represent an entity with a status. For example, a tag can be used to show a sync with its destination and status.

#

NameDefaultDescription
imageUrl

string

URL to an image displayed before label.

children

ReactNode

Tag label.

status

"success" | "error" | "processing" | "warning" | "inactive"

Indicate status of resource mentioned in the tag by showing a colorful border around image. Only visible when `imageUrl` is set.

On this page

  • Usage
  • With image
  • With image and status
  • Guidelines
  • When to use
  • Props