Alert
A message in the page that stays while it's true: about the record, the form or the setting it sits with. Specification: docs/components/alert.md
Basics
A <div class="canon-alert"> with a .canon-alert-title, a .canon-alert-description, or both. data-intent says what it means, in the same words as a Button's or a Toast's: info, success, warning, danger. The theme draws the icon, and screen readers hear the intent's word first ("Warning: This invoice is overdue"). With no intent it's a plain note.
Changes apply to new invoices only
Invoices already sent keep the terms they were sent with.
Payment received
Globex paid €12,400 on 14 October.
This invoice is overdue
It was due on 3 October. Globex hasn't paid yet.
The bank rejected this payment
The account number doesn't match the one on file.
Exports run overnight
Large exports arrive by email the next morning.
Parts
Actions that deal with it go after the text: small high neutral Buttons, or Links. Under 20rem they go under the text. A title alone, or a description alone, is enough for one sentence. The description can be a <div> holding paragraphs or a list.
Sync is slow right now
Only owners can change billing details. Ask one of the owners of this workspace.
3 invoices couldn't be imported
Fix these rows in the file and import it again:
- Row 12: the date isn't a date
- Row 31: the customer doesn't exist
- Row 58: the amount is empty
Emphasis
data-emphasis="high" fills it with the intent's color, in Button's words, for the alert that must not be missed: the page can't be used until it's dealt with. Keep it rare; one per page at most.
This workspace is read-only
The last payment failed. Update the card to make changes again.
You're editing the live configuration
Changes reach every customer as soon as they're saved.
Viewing as Ana Duarte
You see what she sees. Nothing you do is saved as her.
Dismissing
A close button (.canon-alert-close, empty and last) for an alert that can be put away without fixing anything: a tip, news. canon.js names it ("Dismiss"), fires canon-dismiss on the alert (cancelable) and hides it; focus that was in it moves on. An alert that reports a problem has none: it goes when the problem does.
Invoices can now be paid by card
Customers see a Pay button in the email; you get the money in two days.
Tip: press ⌘K to find any invoice by its number.
In context
Right before what it's about. Above a form after a submit that failed: an error summary, its title a heading, its description links to each field; the app shows it with role="alert" and moves focus to it (tabindex="-1"). Each field keeps its own message.
Edge cases
Right to left, the icon and the intent's mark are on the right, and the intent's word is the page's language. Long words wrap; in a narrow place the actions wrap under each other.
هذه الفاتورة متأخرة
كان موعد استحقاقها في ٣ أكتوبر.
Couldn't reach accounts-receivable-reconciliation.internal.example