Messages

One anatomy for errors, success, warnings and info: a short title, a body, and the next step.

The anatomy

Every message has the same three parts, whatever its intent.

Title: three or four words that name the event, such as "Invoice sent". The body does not repeat it.
Body: one or two sentences. Say what happened, the cause if it helps, and how to fix it or what comes next. Write it to be skimmed.
Action: a specific verb for the next step, such as "Retry" or "View invoice". Never "OK".

Invoice sent The client gets a copy by email. View invoice

<tk-section-message tone="success">
  <span slot="title">Invoice sent</span>
  The client gets a copy by email.
  <tk-button slot="actions" size="small">View invoice</tk-button>
</tk-section-message>

The next action

The action button follows the action label rules: a verb and its object, naming the outcome. "View invoice" tells the reader where the button goes; "OK" only closes the message and leaves them to work out the rest.

Match the component to the scope

Scope	Component
A problem with one field	The field's error text, from Field
A message about one region of the page	Section message
A message about the whole app	Banner
Low-stakes feedback after an action	Toast
A decision the reader must make before going on	Dialog

Show the message after the action and next to its subject. Use more than one cue: an icon, a title and the words, never color alone. Keep each intent's color and icon the same across the product.

Success

Name what was done: "Invoice sent", "Your page is live". Not "Done".
Stay measured. Offer the next step or an undo.

Confirmations

The title is the question itself: "Delete campaign?". No "Do you want to" in front of it.
The body states the consequence in one or two sentences.
The buttons are specific verbs, such as "Delete campaign" and "Keep editing". Never "Yes" and "No".

Warnings and info

A warning leads with the reason and the consequence. Frame it as a shared problem ("we"), not an accusation, and give a timeline when the action has a deadline: "Your trial ends on Monday. Upgrade to keep your projects."
Info puts the essential point first, then a short reason, and offers one clear next step.

Loading and progress

Narrate the steps of a long wait: "Connecting…", "Building the page…".
The ellipsis marks work in progress in status text. Don't put it on buttons or menu items.

Notifications

Send a notification only when it is about the reader, timely and actionable. Never use one for promotion, and make it easy to turn off.
Put the news first; the system already shows the app name and icon.
Name the day: "on Monday", not "tomorrow", because many people read it on a different day.
Keep the title under about 30 characters and the collapsed body under about 40.