Flag
A flag shows confirmations, alerts and acknowledgements that need little interaction.
When to use
- Confirming something a person just did, such as making a copy or sending an invite.
- Something that happened in the background that people should know about, but do not need to stop for.
- A message that is fine to miss. A flag goes away on its own.
When not to use
- Anything people must read. A flag can be missed, so put important messages in a modal or a section message.
- A validation error. Put it on the field that is wrong.
- A message about the whole product. Use a banner.
- The only way to reach an action. If the action matters, put it somewhere that does not disappear.
Guidance
Do
Conversation moved
It is now in the billing queue.
Say what happened and offer a way to reverse it. Undo suits a flag because it is only useful right away.
Don't
Error
Your changes were not saved.
Do not report a failure in a flag. If work was lost, tell people in a way they cannot miss.
Intensity
How much attention each of this component's grounds uses, scored 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. Demanded is declared, and its use is limited. So neither of those two depends on the component alone. See intensity.
Content
What to write, and what to leave out.
- The title is the message. Conversation moved, not Success.
- Use the past tense, because the flag appears after the event.
- Do not thank people or apologise. Say what happened.
- Name an action by what it does. Undo is the exception, because everyone knows what it means.