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	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
`"auiErrorPage.401.summary"`	Summary for 401 error.	We'd love to welcome you back
`"auiErrorPage.401.description"`	Description for 401 error.	This account may be inactive or need updating.
`"auiErrorPage.401.suggestion"`	Suggestion text for 401 error.	Suggestions to get up and running
`"auiErrorPage.401.step1"`	Step 1 for 401 error.	Check for email from Avalara about the account status. If you aren't the account owner, ask the person who set up the account to check.
`"auiErrorPage.401.step3"`	Step 3 for 401 error.	Clear cookies for this site, and then sign in again.
`"auiErrorPage.403.summary"`	Summary for 403 error.	Get access
`"auiErrorPage.403.description"`	Description for 403 error.	You stumbled upon a restricted zone.
`"auiErrorPage.403.suggestion"`	Suggestion text for 403 error.	Suggestions to get access
`"auiErrorPage.403.step1"`	Step 1 for 403 error.	Ask the person who set up the account for access.
`"auiErrorPage.403.step2"`	Step 2 for 403 error.	Check that your business has a subscription for the product or service.
`"auiErrorPage.403.step4"`	Step 4 for 403 error.	Clear cookies for this site, and then sign in again.
`"auiErrorPage.404.summary"`	Summary for 404 error.	The page isn't showing up
`"auiErrorPage.404.description"`	Description for 404 error.	It may have been moved, renamed, or deleted.
`"auiErrorPage.404.suggestion"`	Suggestion text for 404 error.	Suggestions to find where you want to go
`"auiErrorPage.404.step1"`	Step 1 for 404 error.	Use the site menu to navigate.
`"auiErrorPage.404.step3"`	Step 3 for 404 error.	Double-check the URL.
`"auiErrorPage.404.step4"`	Step 4 for 404 error.	Update bookmarks for this page.
`"auiErrorPage.404.step5"`	Step 5 for 404 error.	Clear cookies for this site, and then try to access the page again.
`"auiErrorPage.500.summary"`	Summary for 404 error.	Something isn't quite right
`"auiErrorPage.500.description"`	Description for 500 error.	We're not sure what's causing the server issue but are actively working to resolve it.
`"auiErrorPage.500.suggestion"`	Suggestion text for 500 error.	Suggestions to try in the meantime
`"auiErrorPage.500.step1"`	Step 1 for 500 error.	Sign out, wait a few minutes, and then sign back in. Most issues resolve within a few minutes.
`"auiErrorPage.links.home"`	Home page link text.	Home
`"auiErrorPage.links.support"`	Support page link text.	Avalara Support
`"auiErrorPage.links.status"`	Status page link text.	status of Avalara services
`"auiErrorPage.links.signIn"`	Sign-in page link text.	sign in

Guidelines

Design

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