Feedback & Status
Flag
A flag is a non-interactive visual indicator used to communicate status.
Anatomy
The flag contains two required elements and one optional element.
| Item | Name | Description | Component | Optional |
|---|
Options
The flag has options that can be used to provide an appropriate experience for different use cases.
Appearance
By default, there are two styles of flag; solid and minimal, with colours set in the theme to communicate status to the user, eg. negative (red for high priority), or positive (green for active).
Size
There are three sizes of flag; small, medium, and large.
Icons (leading & trailing)
Icons can be displayed in a flag and can be positioned either before (leading) or after (trailing) the label in the flag.
Appearance
By default, there are two styles of flag; solid and minimal, with colours set in the theme to communicate status to the user, eg. negative (red for high priority), or positive (green for active).
Size
There are three sizes of flag; small, medium, and large.
Icons (leading & trailing)
Icons can be displayed in a flag and can be positioned either before (leading) or after (trailing) the label in the flag.
Usage
Here’s how and when to use the flag:
Do use flags to draw attention
Use flags to draw attention to a new feature, piece of content, or status change that may be of particular interest to a user.
Don't use flags for categorisation
Avoid using flags for categorisation other than status. Consider using a tag instead
Don't make flags interactive
Use flags as a non-interactive status indicator.
SEO considerations
Ensure icons have alt text applied.
API
The flag has a range of props that can be used to define an appropriate experience for different use cases.
| Name | Type | Default | Description | Required |
|---|