Skip to main content
Elastic UI
Elastic UI
ComponentsPatternsContentData visualization
EUI ChangelogGitHubFigma
  • Guidelines
    • Getting started
    • Accessibility
    • Writing
      • Examples
    • Testing
  • Theming
    • Theme provider
    • Color mode
    • High contrast mode
    • Borders
    • Breakpoints
    • Colors
    • Sizing
    • Typography
  • Templates
    • Page template
    • Sitewide search
  • Layout
    • Accordion
    • Bottom bar
    • Flex
    • Flyout
    • Header
    • Horizontal rule
    • Modal
    • Page components
    • Page header
    • Panel
    • Popover
    • Resizable container
    • Spacer
  • Navigation
    • Breadcrumbs
    • Buttons
    • Collapsible nav
    • Context menu
    • Facet
    • Key pad menu
    • Link
    • Pagination
    • Side nav
    • Steps
    • Tabs
    • Tree view
  • Display
    • Aspect ratio
    • Avatar
    • Badge
    • Callout
    • Card
    • Comment list
    • Description list
    • Drag and drop
    • Empty prompt
    • Health
    • Icons
    • Image
    • List group
    • Loading
    • Progress
    • Skeleton
    • Stat
    • Text
    • Timeline
    • Title
    • Toast
    • Tooltip
    • Tour
  • Forms
    • Form controls
    • Form layouts
    • Form validation
    • Text controls
    • Numeric controls
    • Selection controls
    • Search and filter controls
    • Date and time controls
    • Other controls
  • Tabular content
    • Tables
    • Data grid
  • Editors & Syntax
    • Code
    • Markdown
  • Utilities
    • Accessibility
    • Auto sizer
    • Beacon
    • Color palettes
    • Copy
    • CSS utility classes
    • Delay
    • Error boundary
    • Focus trap
    • Highlight and mark
    • HTML ID generator
    • I18n
    • Inner text
    • Mutation observer
    • Outside click detector
    • Overlay mask
    • Portal
    • Pretty duration
    • Provider
    • Resize observer
    • Scroll
    • Text diff
    • Text truncation
    • Window events
  • EUI
  • Guidelines
  • Writing
  • Examples

Writing - examples


Buttons

Label

buttons with their action. Don't use Yes, OK, or Confirm when you can use a verb phrase instead.

Search session complete

Save your session and return to it later.

Use a verb + noun for a button label.

Delete this index?

Use the same verb + noun as in the title.

Be sure to read the full button guidelines.

Callouts

Use callouts to relay informational, success, warning, or error messages related to the content on the page.

Ensure the description provides information in addition to the title.

You must have the 'create_index' privilege to write data to this index.

Ensure the description provides information in addition to the title

Your index can match two sources.

If a single sentence, end with a period.

Empty prompts

The best empty state lets users know what is happening, why it is happening, and what to do about it. Here are four types of frequently used empty prompts.

Register your first repository

Create a place where your snapshots will live.

Prompt first-time users to take action.

No queries to profile

Enter a query, click the Profile button, and see the results here.

If there is nothing to show, give instructions on what to do.

Introducing our table view

Explore your data inside Discover with our improved sorting and filtering tools.

Introduce a feature.

We couldn't log you in

Check your credentials and try again. If you still can't log in, contact your system administrator.

If using an empty prompt for an error, explain next steps.

Be sure to read the full empty prompt guidelines.

Labels

Avoid long labels, but don't sacrifice clarity. If needed, put additional information in help text and tooltips.

Use labels that say what the input does.

Enter CIDR or IP address, for example 192.168.132.6/22.

Use specific labels.

Links

Use links to point to detailed information.

Building a dashboard?

Create content directly from our Dashboard app using our new integrated workflow. Learn more

Place a 'Learn more' link after text that briefly introduces a topic or feature.

Extend your trial

To use advanced security and our other awesome , request an extension now.

Use inline links to point to a specific page that is stable.

Modals

Modals are typically used for confirmation when the user might lose data.

New dashboard already in progress

You can continue editing or start with a blank dashboard.

For the body text, use one to two short sentences that explain the consequences.

You have unsaved changes

When you exit editing mode, you can save or discard your changes. You can't recover discarded changes.

Some cases require three buttons.

Refresh field list?

This action resets the popularity counter of each field.

Use the same action verbs in the header and button text.

Remove index pattern?

Omit the body if users understand the decision from the header and button text alone.

Create separate confirmations for single and bulk actions.

Delete pipeline 'MyPipeline'?

You can't recover deleted data.

Asking users to delete a single item should include the item name in the title, if possible. Use single quotes around the name if it helps clarify meaning.

Delete 6 pipelines?

You can't recover deleted data.

For bulk actions, include the number of items in the title.

Text fields

Place hints and instruction outside a text field so it is always visible to the user.

Use shorthand notation, such as 30s, 10m, or 1h.

Help users make the right decision by clarifying what goes inside a field.

Your name will be on public display.

Use complete sentences and ending punctuation.

Use clear language for validation messages.

Name is required.

Prefer this format for a required field.

Choose a different address as this one already exists.

Tell users what happened and how to fix it.

Toasts

A common use of toasts is as a success message.

A new notification appears

User 'Casey Smith' was added

For common actions such as create, add, delete, remove, and save, include the object type, the object name if available, and the past tense of the action. Don't include "successfully". It's implied.

A new notification appears

4 visualizations were deleted

For a message about multiple objects, include the object count, but not the names of the objects.

Be sure to read the full toast guidelines.

Tooltips

Use sentence case and ending period. Sentence fragments are ok.

Available fields

Multi-lines are ok, but use 2 lines max.

Edit this page

Previous
Writing
Next
Testing
  • Buttons
  • Callouts
  • Empty prompts
  • Labels
  • Links
  • Modals
  • Text fields
  • Toasts
  • Tooltips
EUI is dual-licensed under Elastic License 2.0 and Server Side Public License, v 1 | Crafted with ❤ by Elastic