Section message
A section message is used to alert users to a particular section of the screen.
When to use
- Something a reader needs 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 and be read in place, rather than appear and go.
- Context that would otherwise have to be discovered by trying something and failing.
When not to use
- A product wide condition. 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.
- Content that is simply part of the page. A section message is an interruption, so using it for ordinary text makes the page shout.
Guidance
Do
Say what is true and what to do next. A message that explains the state has earned its space.
Don't
Do not title a message with its own appearance, and do not warn without saying what about. It raises an alarm and then refuses to explain it.
Intensity
What each of this component's grounds spends, measured 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, 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 says the situation, not the severity. Nothing to sync, not Warning.
- Two or three sentences. Past that, link to the explanation instead of holding it here.
- Label an action with what it does, so Connect a repository rather than Learn more.