Error Messaging

When there isn’t any content to display in a table or panel, an empty treatment should be used to provide users with contextual information.

Design
No Store Performance available yet.

Once you begin to receive visitors and orders, information about your store performance will be displayed in this section.

Learn More

Usage:

The Empty Message relays status messaging to the user from the app's services. This could include negative messaging ("service not available" errors), or positive messaging ("You've completed all your orders today!") etc.

The pattern can also be accompanied by an icon or image to further describe the language of the messaging.

HTML

CSS Classes:

1. .emptyTable

  • The component's container class. Should be applied to the only td in the table or a as a child in a panel-body.

2. .emptyTable-image

  • Applied to an optional illustration that may be used to enhance the message.
  • Maximum image width is 200px; Maximum image height is 40px.

3. .emptyTable-title and .emptyTable-description

  • The default classes for the title and description of the message, respectively. Styled to default text styles.
  • .emptyTable-title is expected to be a strong, .emptyTable-description is expected to be a p.

4. .emptyTable-action

  • The only action allowed for this message. Should aid user in populating table.
  • Expected to be applied to a.