Error state page
Show a special page when an API error happens
Create a special page that will be displayed when an API error happens in a specific app page.
By default, Bravo will show a generic error page (including the HTTP error code) when an API error happens. With this error page, you can customize this error page, and connect it to an app screen returning data from API, so when an API error happens, this custom error page is displayed.
There are two ways to set it up:
  • Create an error page that will be displayed when any API error happens (4XX or 5XX). For this, use the [state:error:groupname] tag.
  • Create an error page that will be displayed when a specific API error happens. For this, use the [state:error-XXX:groupname] tag, replacing XXX with the corresponding error code. For instance, [state:error-404:groupname].
You always need to connect the custom error page to a page connected to API data. This page needs to have the [state:default:groupname] tag. groupname should be replaced with a name of your choice, that connects together the page with data and the error page.
All these state tags should be added in the page-level component in the design file (1st layer).

💾 Example file

Duplicate the file below to see how to set it up!
Bravo Sample: Page States
Figma
Copy link