Revel
GitHub
GitHub
  • Overview

    • Getting started
    • FAQ
    • Release notes
  • Foundations

    • Meet the standard
    • Accessibility
    • Internationalization
    • Information hierarchy
    • Speed
  • Design

    • Visual principles
    • Colors
    • Space
    • Icons
    • Typography
  • Design tokens
  • Style helpers
  • Content

    • Express your ideas
    • Actionable language
    • Inclusive and accessible language
    • Alternative text
    • Grammar and mechanics
      • Basics
      • Capitalization
      • Dates and units of measurement
      • Punctuation
  • Components

    • Alert
    • Avatar
    • Badge
    • Button
    • Button group
    • Checkbox
    • Date Input
      • dates
      • datetimes
      • ranges
    • Field group
    • File upload
    • Flex
    • Grid
    • Icon
    • Image
    • Input
    • Loader
    • Modal
    • Month picker
    • Pagination
    • Popper
    • Radio
    • Repeater
    • Select
    • Tabs
    • Tile
    • Toast
    • Toggle
  • Directives

    • Click outside
    • Tooltip

Actionable language

Simple words and concise sentences

Make every word count. Concise sentences are easy to understand. Use simple words with precise meanings, and remove words that don't add substance.

Simple words and concise sentences

Make every word count. Concise sentences are easy to understand. Use simple words with precise meanings, and remove words that don't add substance.

Simple words

Choose simple verbs without modifiers. Where possible, avoid weak or vague verbs, such as: "be", "have", "make", and "do".

DoDon't
UseUtilize/Make use of
RemoveExtract/Take away/Eliminate
TellInform/Let know

Less is more

Don't use two or three words when one will suffice.

DoDon't
ToIn order to/As a means to
AlsoIn addition
ConnectEstablish connectivity

Clear meanings

Use words that have one clear meaning.

DoDon't
"Because" you created the table, you can change it."Since" you created the table, you can change it.

Use words that can be both nouns and verbs carefully, such as: "file", "post", "mark", "screen", "record", and "report". Use the sentence structure and context to remove ambiguity.

Imperative verbs

Use imperative verbs to encourage action in labels, lists, buttons, and headings.

Examples
Add new item
Delete customer
Add your first product
Edit customer details
Configure settings
Save

Titles and subtitles

Use these guidelines for titles and subtitles:

  • Use one sentence headings.
  • Avoid using punctuation such as periods, commas, semicolons, questions, or exclamations.
  • Use sentence case capitalization.
  • Avoid articles. This helps keep content short and actionable.

Buttons

Always start button text with an imperative verb. To provide context, use the {imperative verb} + {noun} format, except for common actions such as: “Done,” “Close,”, “Cancel,” "Delete", or “OK.”

  • Use sentence case capitalization.
  • Avoid unnecessary words and articles such as “the,” “an,” or “a.”

Links

Provide meaningful link names. The user should understand where the link will direct them before they click it.

Links in sentences

When adding a link in a sentence, apply the link to text that describes where user will be directed. Don't apply links to full sentences.

DoDon't
Use email notifications to stay informed.Use email notifications to stay informed.

Links to more information

For links to more information that are not in a sentence, use the {Learn about ‘subject’} format.

Example
When this event is triggered, tags are added automatically. Learn about events.

Stand-alone links

For links that are not with, or in, a sentence:

  • Use the {verb + noun} format.
  • Don't use punctuation.
Examples
Learn about events
Reset password
Create a credit memo

Confirmations

Use confirmation messages to confirm that the user wants to complete a specific task. Only use confirmations for actions that can’t be undone or are difficult to undo. Give users the option to confirm or cancel their action.

Confirmation titles:

  • Use a concise {verb}+{noun} question.
  • Use one sentence and avoid using punctuation other than question marks.
  • Use sentence case capitalization.
  • Avoid unnecessary words and articles such as “the,” “an,” or “a.”
DoDon't
Delete items?Are you sure you want to delete items?
Discard unsaved changes?Are you sure you want to discard unsaved changes?

Confirmation bodies:

  • Use simple words and concise sentences to clearly explain if the action is irreversible or difficult to undo.
  • Avoid using more than one line of text.
  • Don't use more than two buttons.
Examples
This can't be undone.
This will delete all changes since your last save.

Primary and secondary actions:

  • Users must understand what will happen when they click a button.
  • Learn more about buttons.

Messages

Provide meaningful and actionable messages.

Info messages

Use info messages to provide non-intrusive information that does not require the user to take action.

Success messages

Use success message to celebrate success and make the user feel empowered, motivated, and satisfied with their effort.

Success messages are displayed after the user completes and action or task. The message is an opportunity to confirm the action or congratulate them. Success messages also inform the user that a task has been completed. Learn more about confirmations.

Titles:

  • Titles are optional depending on the component.
  • Avoid using ‘Success!’ or ‘successfully’ in a title.
  • Where possible, limit titles to no more than four words.
  • Where possible, exclude “an”, “a”, or “the”.
  • Use sentence case capitalization and don't use periods.
  • Avoid using exclamation marks (!) for commonly occurring tasks. Learn more about exclamation marks.

Bodies:

  • Avoid repeating content from the title.
  • Where possible, limit content to no more than 2 sentences.
  • Describe the reason for the success and offer some words of praise, followed by no more than two sentences of informative insight.

Buttons:

  • Only include buttons in success messages when the user must complete an action.
  • Use imperative verbs.
  • Provide an option to dismiss or cancel the message.
  • Use no more than 2 words in each button.
  • If the user has created something, give them an opportunity to view it.

Warning messages

Use warning messages to provide advanced notice of a potential change that may result in the loss of data or an error state. Warning messages may require the user to take action. Warning messages may often relate to serious situations. Ensure that the user understands the severity of the warning and feels supported and reassured.

Title:

  • Avoid explaining what to do in the title.
  • Titles are optional depending on the component.
  • Where possible, limit titles to no more than four words.
  • Where possible, exclude “an”, “a”, or “the”.

Bodies:

  • Avoid repeating content from the title.
  • Where possible, limit content to no more than 2 sentences.
  • Describe the reason for the error and what the user should do to resolve it.

Button:

  • Use imperative verbs.
  • Provide an option to dismiss or cancel the message.
  • Use no more than 2 words in each button.

Error messages

Use error messages to inform the user that a problem has occurred and to tell them what to do next. Errors may often relate to serious situations. Ensure that the user understands the severity of the error and feels supported and reassured.

Titles:

  • Avoid explaining what to do in the title.
  • Titles are optional depending on the component.
  • Where possible, limit titles to no more than four words.
  • Where possible, exclude “an”, “a”, or “the”.

Bodies:

  • Avoid repeating content from the title.
  • Where possible, limit content to no more than 2 sentences.
  • Describe the reason for the error and what the user should do to resolve it.

Buttons:

  • Use imperative verbs.
  • Provide an option to dismiss or cancel the message.
  • Use no more than 2 words in each button.

Dropdown menu lists

Use dropdown menu lists to display a vertical set of options. This is useful when space is limited.

Action menus

Actions should use a {verb + noun} format. In most cases, only a verb is required.

DoDon't
  • Add
  • Edit
  • Rename
  • Add a new item
  • Editing items
  • Renaming items

Noun menus

Use concise language and supporting labels to ensure the user has enough information.

Example
Filter by:
  • Date
  • Amount
  • Name

Empty state

To provide the option to clear a selection from a dropdown menu list, use the word Clear followed by the item type.

Example
Clear tax ID number

Directional language

Avoid using language that directs the user to a certain part of the screen. For example, "above/below" or “right/left.” This use of language is problematic for screen reading software, languages that read from right to left, and also for responsive or mobile design patterns.

Vocabulary

Use the right words in the right place.

Save or done

Use “Save” when a change is saved to a database as the button is pressed. Use “Done” for deferred saves, or changes that are applied as unsaved changes to the current page and are saved to a database at a later point in time. For example, in a datepicker in a modal or sheet.

When a save action doesn’t have the context of a modal or context bar, use the {Save + noun} format. Do for save actions that are at the bottom of pages.

Accept or OK

Use "OK" to confirm that the user has read something. Use "Accept" when the user must accept legal terms of service and agreements.

Cancel or close

Use “Cancel” to provide an option for users to discard any changes made to a page, modal, or sheet. “Cancel” is often paired with “Save” and “Done” actions, and is always placed to the left.

Don’t use “Close” when the user has the option to make changes, or to confirm they’ve read something.

Edit or manage

Use “Edit” when the action changes the input of a field.

Use "Manage" to convey that multiple actions can be performed, or sections and settings can be updated. Pair this verb with a noun if it’s in a button, or if it’s unclear what is being managed.

Create or add

Use "Create" when the action creates something new that does not already exist in your system or outside your system.

Examples
"Create product" — creates a new product within your system.
"Create discount" — creates a new discount within your system.

Use "Add" when the action adds something that already exists in your system or outside your system.

Examples
"Add product" — adds a product to a subscription
"Add discount" — adds a discount to a subscription

View or see

Use "View" when the action encourages the user to go to another page or section to view something. Use “view” in buttons and calls to action.

Use “see” in conversational descriptions that don't have a specific call to action.

Export or download

Use “Export” when the action is used to transfer data from your product and convert it into a different format.

Use "Download" when the action downloads content in the data in the same format.

Import or upload

Use “Import” when the action is used to transfer data and convert it into a format that can be used in your product.

Use "Upload" when the action is used to transfer data in the same format.

Edit this page
Last Updated: 9/5/25, 12:24 PM
Contributors: noon-dawg, Cesar Level, mehicalen, John Hannagan, Weetbix, Lukasz Owsiak
Prev
Express your ideas
Next
Inclusive and accessible language