UI text patterns
The patterns we ship most often.
Buttons
Button labels are the densest writing surface in the product: one to three words that must survive on a small screen.
- Start with a verb if the button does something. Say what.
- Be specific when context isn't obvious.
Saveis fine in a dialog titled "Edit dashboard". Standalone, writeSave changes. - Sentence case. Never Title Case.
- Match the verb to the noun in the result.
Delete dashboard, notDelete.
Dialogs
A dialog interrupts the reader, so earn the interruption: the title says what is about to happen, the body says the consequence, the primary button says the action.
Empty states
One short sentence explaining what's missing, one button moving the reader forward. See the empty state pattern for the three kinds and what each has to do.
Loading and progress
| Duration | What to say |
|---|---|
| Under 1 second | Nothing. A spinner is enough |
| 1–10 seconds | Name what's loading — "Loading dashboard…" |
| Over 10 seconds | Explain why, and show progress if you can — "Importing 12,400 events. This usually takes a minute." |
Use … — the single ellipsis character — at the end of in-progress copy, not three periods.
Confirmation messages
Confirmations close a loop. Confirm the action, name what changed, and offer a link to view detail or undo where undo is real.
Terminology
Use the canonical spelling and casing for AppSignal concepts. The distinction that catches people most often:
| form | means |
|---|---|
| AppSignal | the brand |
Appsignal | the code class or module |
appsignal | the published package name |
pm:design/ux/terminology.md holds the full A–U dictionary — Action, Agent, Allocations, Namespace, Sample, Trigger, Impact and the rest. It has no maintainer, so treat it as a starting point rather than a source; a canonical terminology page is worth authoring here.