Titles consist of up to three words to name the content of a page or a specific section within it. This pattern is commonly used in components like Modals or Tabs.
General
Use sentence case but capitalize proper nouns.
Do ✅ | Don't ❌ |
---|---|
|
|
Don't use punctuation, such as question marks or periods.
Do ✅ | Don't ❌ |
---|---|
|
|
Avoid using articles.
Do ✅ | Don't ❌ |
---|---|
Add new seller | Add a new seller |
Don't use personal pronouns.
Do ✅ | Don't ❌ |
---|---|
Application keys | My application keys |
Keep it as short as possible while still being descriptive enough.
Do ✅ | Don't ❌ |
---|---|
|
|
Avoid redundancy, such as by omitting context present elsewhere.
Do ✅ | Don't ❌ |
---|---|
|
|
Don't use a marketing tone of voice.
Do ✅ | Don't ❌ |
---|---|
|
|
Specific
Page
Reuse the same page title whenever possible, such as in the URL, title meta tag, and, when it applies, in a navigation entry.
Do ✅ | Don't ❌ |
---|---|
|
|
In a form page, when an item is being edited, use the name of the item as the page title. When a new item is being created, use the word New
followed by the item type.
Do ✅ | Don't ❌ |
---|---|
|
|
In a listing page, use the type of item being listed as the page title. Include only nouns in the plural form and avoid adding an unnecessary prefix or suffix.
Do ✅ | Don't ❌ |
---|---|
|
|
Modal
In a modal with a form or actions, use an action label as the title. If the modal was triggered by action, prefer to repeat the verb of the action that triggered the modal.
Do ✅ | Don't ❌ |
---|---|
|
|