Status Message

Overview

Status messages are a visual and textual representation of the current state of a page or feature. They are used to inform users about the status of their actions, such as success, error, or warning messages. Status messages can also be used to provide additional next steps by providing relevant actions.

When to use:

  • Use Status messages to indicate the current status of a page or section (e.g. 401, 404 or 500 errors as well as empty states, connection failures and success screens).

Implementation

Edit the code below to see your changes live!

<StatusMessage
  actions={<Button variant="secondary">Clear search</Button>}
  heading='No results for search "yellow hat"'
  message="Try adjusting your search or filter to find what you are looking for."
  variant="search"
/>

Props

Prop name
Type
Default
Description
headingstring

The heading message to display. This is optional and can be omitted if not needed.

messagestring

The main message to display. This is required.

variant404 | info | search | error | server-error | success | unauthorized | warninginfo

The variant of the status message. This determines the icon and background pattern used.

sizepanel | pagepanel

The size of the status message. This determines the layout and spacing of the message.

actionsReact.ReactNode

Component to render custom actions. This can be a buttons, links, etc.

Props ending with * are required

Do's and Don'ts

Do
Use the page size for full page warnings and errors.
Provide meaningful actions that are relevant to the status message.
Don't
Don’t use the page size within contained elments like panels, modals, etc.
Avoid more than two actions, as this can overwhelm the user.