4.46.4

Toggle direction

Error Page

An error page

Demo

Responsive Demo Pages

Standard Width	401	403	404	500
Top Nav	401 Top Nav	403 Top Nav	404 Top Nav	500 Top Nav
Side Nav	401 Side Nav	403 Side Nav	404 Side Nav	500 Side Nav
Narrow Width	401	403	404	500
Top Nav	401 Top Nav Narrow	403 Top Nav Narrow	404 Top Nav Narrow	500 Top Nav Narrow
Side Nav	401 Side Nav Narrow	403 Side Nav Narrow	404 Side Nav Narrow	500 Side Nav Narrow

API

Tag

Name	Description
`<aui-error-page>`	Custom Element to show a full-page error dialog with summary, details, and steps to take.

Slots

Name	Required	Description
`steps`		Alternative steps
`actions`		`button`s or `a`nchors to display as action buttons

Attributes

Name	Value	Required	Description
`status`	`401` \| `403` \| `404` \| `500`		If set, the predefined error page for the status code is displayed. If not set, a custom error page is displayed.
`correlationid`	string		Correlation-id usually in the form of `aaaaaaaa-bbbb-cccc-dddd-eeeeeeeeeeee`
`summary`	string		Sets the summary text of a custom error page.
`description`	string		Sets the description text of a custom error page.
`imagename`	enum: `humans-30` \| `humans-31` \| `objects-02`		Sets the image of a custom error page.
`narrowwidth`	boolean		When true, sets the error box to a narrower width on large and extra-large screen widths.
`i18n`	string		A stringified JSON object which defines a list of localized strings. The keys must be one of the string IDs defined below.

Properties

Name	Value	Required	Description
`status`	`401` \| `403` \| `404` \| `500`		If set, the predefined error page for the status code is displayed. If not set, a custom error page is displayed.
`correlationId`	string		Correlation-id usually in the form of `aaaaaaaa-bbbb-cccc-dddd-eeeeeeeeeeee`
`summary`	string		Sets the summary text of a custom error page.
`description`	string		Sets the description text of a custom error page.
`imageName`	enum: `humans-30` \| `humans-31` \| `objects-02`		Sets the image of a custom error page.
`narrowWidth`	boolean		When true, sets the error box to a narrower width on large and extra-large screen widths.
`i18n`	object		A JSON object which defines a list of localized strings. The keys must be one of the string IDs defined below.

Demo

API

Tag

Name	Description
`<AuiErrorPage>`	Custom Element to show a full-page error dialog with summary, details, and steps to take.

Slots

Name	Required	Description
`steps`		Alternative steps
`actions`		`button`s or `a`nchors to display as action buttons

Props

Name	Value	Required	Description
`status`	`401` \| `403` \| `404` \| `500`		If set, the predefined error page for the status code is displayed. If not set, a custom error page is displayed.
`correlationid`	string		Correlation-id usually in the form of `aaaaaaaa-bbbb-cccc-dddd-eeeeeeeeeeee`
`summary`	string		Sets the summary text of a custom error page.
`description`	string		Sets the description text of a custom error page.
`imagename`	enum: `humans-30` \| `humans-31` \| `objects-02`		Sets the image of a custom error page.
`i18n`	object		A JSON object which defines a list of localized strings. The keys must be one of the string IDs defined below.

Skylab React links

General information about using our React package

i18n Strings

ID	Description	Default value
`"auiErrorPage.correlationIdLabel"`	Label for correlation ID.	Correlation ID

Guidelines

Design

Design resources can be found on the Skylab design documentation site: skylab.avalara.com