Homecomponentsinformational

StatusTag

A visual cue aid by colors to convey statuses.

Use StatusTag to show statuses on appointments or calendar.

Pending

Confirmed

Cancelled

Completed

Invited

Paid

Unpaid

Refunded

Open in Playroom

With Icons

Use the icon property to add an icon to the tag.

Pending

Confirmed

Cancelled

Completed

Invited

Paid

Unpaid

Refunded

Open in Playroom

With Tooltip

Use the tip property to add a tooltip to the tag.

Pending

Open in Playroom

Examples

StatusTag are usually used side-by-side with headings or text to display status.

Invited

James Oak

Nutritionist

Paid

€25/consultation

Open in Playroom

API

status

Required

The status of the tag.

Status

label

Required

The label of the tag.

string

tip

The tip to display.

string

icon

An optional icon to show before the label.

IconComponent

data

An object with the data keys and values.

DataAttributeMap