Content patterns
Content patterns provide standardized microcopy for error messages, button labels, empty states, and other UI text. Using consistent, well-crafted copy helps users understand your interface and builds trust.
Category Purpose Examples Error Explain what went wrong Validation errors, API errors, permission denied Empty Guide when no content No results, first-time user, inbox zero Button Label actions clearly Save, Delete, Create, Cancel Confirm Verify destructive actions Delete confirmation, unsaved changes Success Confirm completion Saved, Created, Sent Hint Help users fill forms Placeholders, helper text
Tone rules
Be helpful, not blaming : never blame the user; focus on the problem and solution
Explain what happened : don't just say "error"; describe the issue
Suggest a fix : tell users how to resolve the problem
Avoid technical jargon : use plain language, not error codes
Error patterns
Pattern Template Use case error-required-field{field} is requiredRequired field validation error-invalid-emailPlease enter a valid email addressEmail format validation error-password-too-shortPassword must be at least {minLength} charactersPassword length error-network-connectionWe couldn't connect to the server...Network failures error-server-errorWe're having trouble processing your request...500 errors error-not-foundThe {item} you're looking for doesn't exist...404 errors error-permission-deniedYou don't have permission to {action}...403 errors
Examples
// Good error messages
fill_content_template({ pattern: 'error-required-field', values: { field: 'Email' } })
// → "Email is required"
fill_content_template({ pattern: 'error-password-too-short', values: { minLength: 8 } })
// → "Password must be at least 8 characters"
// Bad error messages (don't use)
// "Invalid input"
// "Error occurred"
// "Something went wrong"
// "You entered an invalid email"
CopyCopied!
Types
Type When to use Key elements First-time User has no items yet Encouraging title, create CTA No results Search returned nothing Show query, suggest alternatives No matches Filters exclude everything Clear filters CTA Inbox zero All items processed Positive, encouraging tone
Empty state patterns
Pattern Title Message empty-first-timeNo {items} yetCreate your first {item} to get started.empty-no-search-resultsNo results foundWe couldn't find anything matching "{query}".empty-no-filter-resultsNo matchesNo {items} match your current filters.empty-inbox-zeroAll caught up!You have no new {items} to review.
Examples
// First-time empty state
fill_content_template({
pattern: 'empty-first-time',
values: { items: 'projects', item: 'project' }
})
// → { title: "No projects yet", message: "Create your first project to get started.", action: "Create project" }
// Search with no results
fill_content_template({
pattern: 'empty-no-search-results',
values: { query: 'dashboard' }
})
// → { title: "No results found", message: "We couldn't find anything matching \"dashboard\".", action: "Clear search" }
CopyCopied!
Rules
Use action verbs : describe what will happen: "Save", "Delete", "Create"
Be specific : "Delete Project" is better than "Delete"
Avoid generic labels : "OK", "Yes", "Submit" are unclear
Match the context : "Save Draft" vs "Publish" vs "Send"
Button patterns
Pattern Label Secondary Context button-saveSaveCancelGeneral save button-save-changesSave changesDiscardEditing existing button-createCreate {item}CancelCreating new button-deleteDeleteCancelDestructive button-delete-itemDelete {item}CancelDestructive with context button-cancelCancel: Dismiss / abort button-backBack: Navigation
When to confirm
Permanent deletions
Actions that can't be undone
Navigating away with unsaved changes
Bulk operations affecting multiple items
Confirmation patterns
Pattern Title Message confirm-deleteDelete {item}?This action cannot be undone. All data...confirm-delete-with-countDelete {count} {items}?This action cannot be undone. All selected...confirm-unsaved-changesUnsaved changesYou have unsaved changes that will be lost...confirm-discard-changesDiscard changes?Your changes have not been saved...
Rules
Be specific : confirm exactly what happened
Keep it brief : success should be obvious
Include the item : "Project created" not just "Created"
Success patterns
Pattern Message Context success-savedChanges savedGeneral save success-created{item} createdItem creation success-deleted{item} deletedItem deletion success-sent{item} sentMessages, emails
// Get all error patterns
get_content_pattern({ category: 'error' })
// Get specific pattern
get_content_pattern({ name: 'confirm-delete' })
// Include tone rules
get_content_pattern({ category: 'button', includeRules: true })
// Fill a template
fill_content_template({
pattern: 'error-required-field',
values: { field: 'Email' }
})
// Use variants
fill_content_template({
pattern: 'error-required-field',
values: { field: 'Email' },
variant: 'short'
})
// → "Required"
CopyCopied!
Placeholders use {curly braces} syntax:
Placeholder Type Description {field}string Field name (Email, Password) {item}string Singular item (project, user) {items}string Plural items (projects, users) {count}number Number of items {query}string Search query {minLength}number Minimum length {action}string Action being attempted
Blaming the user
// Bad — blames user
"You entered an invalid email"
// Good — focuses on the input
"Please enter a valid email address"
CopyCopied!
Generic messages
// Bad — unhelpful
"Something went wrong"
// Good — explains and suggests fix
"We couldn't save your changes. Please try again."
CopyCopied!
Technical jargon
// Bad — confusing
"HTTP 500 Internal Server Error"
// Good — plain language
"We're having trouble processing your request. Please try again in a moment."
CopyCopied!
Generic button labels
// Bad — unclear
OK
Yes
Submit
// Good — descriptive
Save Project
Delete Account
Send Message
CopyCopied! Last reviewed May 12, 2026 by @jschuyler