Section message
A section message alerts users to one section of the screen.
When to use
- Something people need to know about the section it sits in, such as why a list is empty or what a setting will affect.
- A message that should stay on screen, rather than appear briefly and disappear.
- Information people would otherwise only find out by trying something and failing.
When not to use
- A message about the whole product. That is a banner, at the top of the screen.
- Confirmation of something just done. That is a flag.
- A validation error on a field. That belongs under the field.
- Ordinary page content. A section message interrupts, so using it for normal text makes the page too loud.
Guidance
Do
Say what is happening and what to do next.
Don't
Do not use the appearance as the title, and do not warn people without saying what the problem is.
Intensity
How much attention each of this component's grounds uses, scored against the ladder in both themes.
| Appearance | Ground | Light | Dark |
|---|---|---|---|
| section-message | accent-blue-subtlest | 0.042Ambient | 0.062Substrate |
| section-message--discovery | accent-purple-subtlest | 0.038Ambient | 0.070Substrate |
| section-message--error | accent-red-subtlest | 0.042Ambient | 0.071Ambient |
| section-message--information | accent-blue-subtlest | 0.042Ambient | 0.062Substrate |
| section-message--success | accent-lime-subtlest | 0.022Ambient | 0.076Ambient |
| section-message--warning | accent-yellow-subtlest | 0.029Ambient | 0.086Ambient |
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 says the situation, not the severity. Nothing to sync, not Warning.
- Two or three sentences. For more, link to a fuller explanation.
- Label an action with what it does, so Connect a repository rather than Learn more.