Flag
A flag is used for confirmations, alerts, and acknowledgments that require minimal user interaction.
When to use
- Confirmation of something the reader just did, such as a copy made or an invite sent.
- Something that happened in the background and is worth knowing but not worth stopping for.
- A message that can be missed without cost, because a flag goes away.
When not to use
- Anything that must be read. A flag can be missed, so a real consequence belongs in a modal or a section message.
- A validation error. Put it on the field that is wrong.
- A product wide condition. That is a banner.
- The only route to an action. If the action matters, it must exist somewhere that does not expire.
Guidance
Do
Conversation moved
It is now in the billing queue.
Say what happened and offer the reversal. Undo is the one action that belongs on a flag, because it is only useful now.
Don't
Error
Your changes were not saved.
Do not report a failure on something that vanishes. If the work was lost the reader must be told in a way they cannot miss.
Intensity
What each of this component's grounds spends, measured against the ladder in both themes.
| Appearance | Ground | Light | Dark |
|---|---|---|---|
| flag | surface-overlay | 0.000Substrate | 0.070Ambient |
| flag--error | danger-bold | 0.443Marked | 0.617Marked |
| flag--info | neutral-boldest | 0.714Marked | 0.809Marked |
| flag--success | green-bold | 0.454Marked | 0.691Marked |
| flag--warning | warning-bold | 0.448Marked | 0.601Marked |
Substrate, Ambient and Marked are measured. Directed depends on what else is in the region, and Demanded is declared and rationed, so neither is a property this component carries by itself. See intensity.
Content
What to write, and what to leave out.
- The title is the message. Conversation moved, not Success.
- Past tense for something done, because the flag appears after it happened.
- Do not thank the reader or apologise. Say what happened.
- Name an action by what it does. Undo is the exception, because everyone knows it.