Notice
A notice within the page: what the person needs to know now, with the status told by color, icon and word.
On this page
Playground
The first one goes out tomorrow at 9.
<div class="feitio-notice"><svg class="feitio-icon" aria-hidden="true"><use href="/feitio/icons/sprite.svg#feitio-info"></use></svg><strong>Reminder saved</strong><p>The first one goes out tomorrow at 9.</p></div>When to use
- After an action, right above its container, to say the result: "Schedule created".
- For something that affects the whole page: a service down, a deadline coming.
When not to use
- Field error: ErrorMessage and ErrorSummary.
- An item’s status: Tag.
- In a corner of the screen, as a toast: never.
Examples
The docs gained the form guides.
The first notice goes out tomorrow at 9.
It runs again today at 3.
The connection dropped. What you wrote is still here; try again.
The four
All with the line around them, in the status color; information uses the soft line, with no status color. None is orange.
Show code
<div class="feitio-notice" data-status="ok" role="status">
<svg class="feitio-icon" aria-hidden="true">…</svg>
<strong>Agendamento criado</strong>
<p>O primeiro aviso sai amanhã às 9h.</p>
</div>Close and time
The docs gained the form guides.
With close
The X in the corner: the notice stays until the person closes it. Without the X, it stays until the screen changes.
Show code
<div class="feitio-notice">
…
<span class="tools">
<button type="button" class="close" aria-label="Fechar o aviso">…</button>
</span>
</div>The first one goes out tomorrow at 9.
With time
With data-timeout, the notice goes away on its own, and the thread around the X comes undone as time passes. Hover over it: the time stops.
Show code
<div class="feitio-notice" data-status="ok" role="status" data-timeout="8000">
…
<span class="tools">
<button type="button" class="close" aria-label="Fechar o aviso">
<svg class="ring" viewBox="0 0 24 24" aria-hidden="true"><path pathLength="100" d="…"/></svg>…
</button>
</span>
</div>
<script>feitioNotice.show(aviso) // depois da ação</script>- Time is off by default. When on, the close button comes with it, so the person can close it sooner.
- Only for success and information. Warnings and errors never go away on their own: the person needs to see them.
- The time stops while the mouse or focus is on the notice. A notice already on the page only starts counting when it shows in the window.
- Already on screen, it does not land again: if the same action happens again, the notice swaps its text and restarts the time, without the paper animation. When leaving, it fades and the space closes, sliding.
Anatomy
The first one goes out tomorrow at 9.
- Status icon.
- Title: what happened, short.
- Close, optional. With time, the thread around the X comes undone until the notice goes away.
- Text, optional: what to do or what comes next.
- Box: the background and line in the status color.
Do and don’t
Do
The button’s own word, in two words.
Don’t
Your request was processed successfully.
"Success" does not say what worked, and the text repeats the title.
Writing
- Title: what happened, with the action’s word ("Schedule created").
- Text: only if it says what to do or what comes next.
Where it goes
- Right above the container where the action happened, with the StatusOverlay.
- At the top of the content, when it is about the whole page.
- Inside a block, when it is only about it.
Accessibility
- After an action,
role="status"(orrole="alert"for errors), so screen readers announce it. - Status never by color alone: icon and word in the title.
Attributes
| Attribute | Values | What for |
|---|---|---|
class="feitio-notice" | required | The notice box. |
data-status | none, "ok", "warn", "error" | Information (no attribute), success, warning or error. |
role | "status", "alert" | When it appears after an action. |
class="tools" + class="close" | optional | The close button, top right. |
data-timeout | milliseconds | Goes away after this time; only with success and information. Carries the thread around the X. |
feitioNotice.show(el) | JS | Shows the notice after an action: it lands as paper, or only restarts the time if already on screen. |