Displays a large placeholder message to communicate a single information to the user and invite them to take action.
Typically includes a title, an optional icon/image, descriptive text (rich text formatting and images supported via Markdown), and a call-to-action button.
Ideal for first-use screens, empty data sets, "no results" pages, or error messages.
Introduced in SQLPage v0.35.0.
| name | required | type | description |
|---|---|---|---|
| link | REQUIRED | URL |
The URL to which the button should navigate when clicked. |
| link_icon | REQUIRED | Name of an icon to be displayed on the left side of the button. | |
| link_text | REQUIRED | TEXT |
The text displayed on the button. |
| title | REQUIRED | TEXT |
Description of the empty state. |
| class | TEXT |
Class attribute added to the container in HTML. It can be used to apply custom styling to this item through css. | |
| description | TEXT |
A short text displayed below the title. | |
| header | TEXT |
Text displayed on the top of the empty state. | |
| icon | Name of an icon to be displayed on the top of the empty state. | ||
| id | TEXT |
ID attribute added to the container in HTML. It can be used to target this item through css or for scrolling to this item through links (use "#id" in link url). | |
| image | URL |
The URL (absolute or relative) of an image to display at the top of the empty state. |
| No data |
This example shows how to create a 404-style "Not Found" empty state with
select
'empty_state' as component,
'No results found' as title,
'404' as header,
'Try adjusting your search or filter to find what you''re looking for.' as description,
'Search again' as link_text,
'search' as link_icon,
'#not-found' as link,
'not-found' as id;No results found
Try adjusting your search or filter to find what you're looking for.
It's possible to use an icon or an image to illustrate the problem.
select
'empty_state' as component,
'A critical problem has occurred' as title,
'mood-wrrr' as icon,
'SQLPage can do a lot of things, but this is not one of them.
Please restart your browser and **cross your fingers**.' as description_md,
'Close and restart' as link_text,
'rotate-clockwise' as link_icon,
'#' as link;A critical problem has occurred
SQLPage can do a lot of things, but this is not one of them.
Please restart your browser and cross your fingers.