The error state component repurposes the EmptyState component to display an error to users. To further customize this component, you can also utilize all properties of the empty state component, with the exception of children.
Examples
Basic error state
To provide users with error details, a basic error state should contain an appropriate and informative titleText and bodyText. Error state provides a default action to navigate back to the previous page, or the home page in the empty state's footer.
Sample error title
Sample error description
Customizations using EmptyState props
All properties of the empty state component are spread to the error state component group. Passing status='none' to the error state will cause the icon color to be grey.
Sample error title
Sample error description
Props
ErrorState
| Name | Type | Default | Description |
|---|---|---|---|
| bodyText | React.ReactNode | A description of the error, if no body text is provided then it will be set to the defaultBodyText. | |
| customFooter | React.ReactNode | Custom footer content | |
| defaultBodyText | React.ReactNode | A default description of the error used if no errorDescription is provided. | |
| headingLevel | No type info | "h4" | |
| ouiaId | string | number | "ErrorState" | ErrorState OUIA ID |
| status | 'danger' | 'warning' | 'success' | 'info' | 'custom' | 'none' | EmptyStateStatus.danger | Status of the error message. |
| titleText | string | 'Something went wrong' | Title of the error. |
| variant | No type info | EmptyStateVariant.lg |
