Working with theme-able empty state images
Add theme-able empty state images to customize empty states and improve the user experience. Empty states include guidance or actions for users to add or create content.
When a component or a part of your Next Experience web page doesn’t contain data, an empty state image appears. Empty state images are theme-able, and adapt to the theme colors of your instance.
No data available empty state image.
There are 12 empty state image types available, each including a small, medium, and large version. When creating a theme using Theme Builder a UX Styles Imagery record is created however, the record is empty. In this case, your theme defaults to using a base system empty state theme-able images. If you choose to override these images, see Customize theme-able empty state images for your theme.
You can insert an empty state image into your custom experience by using the Illustration component in UI Builder. The Illustration component displays all available empty state images. For more information on the Illustration component, see Horizon Design System Empty State.
You can also add custom images using the Custom Illustration component in UI Builder.
Theme-able empty state image with theme hooks
The following images represent the No Search Results empty state image along with the theme hooks required for each variation.
No Search Results empty state image, accent solid variation. For the text description, refer to the theme hook information that follows.
The theme hook required for this variation is $now-color_interactive-1.
No Search Results empty state image, accent outline variation. For the text description, refer to the theme hook information that follows.
The theme hook required for this variation is $now-color_interactive-3.
No Search Results empty state image, subtle outlines variation. For the text description, refer to the theme hook information that follows.
The theme hook required for this variation is $now-color_border-secondary.
No Search Results empty state image, subject dark detail variation. For the text description, refer to the theme hook information that follows.
The theme hook required for this variation is $now-color_border-tertiary.
No Search Results empty state image, subject light detail variation. For the text description, refer to the theme hook information that follows.
The theme hook required for this variation is $now-color_background-secondary.
No Search Results empty state image, subject fill variation. For the text description, refer to the theme hook information that follows.
The theme hook required for this variation is $now-color_background-primary.
No Search Results empty state image, subject outline variation. For the text description, refer to the theme hook information that follows.
The theme hook required for this variation is $now-color_border-secondary.
No Search Results empty state image, subject shadows variation. For the text description, refer to the theme hook information that follows.
The theme hook required for this variation is $now-color_border-secondary.
Empty state light mode tokens
Main object empty state image. For the text description, refer to the theme hook information that follows.
The theme hooks used to override the main object empty state image.
- now-illustration--empty-state--main-object--outline
- now-illustration--empty-state--main-object--fill
Primary object empty state image. For the text description, refer to the theme hook information that follows.
The theme hooks used to override the primary object empty state image.
- now-illustration--empty-state--primary-object--outline
- now-illustration--empty-state--primary-object--primary-fill
- now-illustration--empty-state--primary-object--tertiary-fill
- now-illustration--empty-state--primary-object--main-detail
- now-illustration--empty-state--primary-object--detail
- now-illustration--empty-state--primary-object--shadow
Tertiary object empty state image. For the text description, refer to the theme hook information that follows.
The theme hooks used to override the tertiary object empty state image.
- now-illustration--empty-state--tertiary-object--outline
- now-illustration--empty-state--tertiary-object--primary-fill
- now-illustration--empty-state--tertiary-object--tertiary-fill
- now-illustration--empty-state--tertiary-object--main-detail
- now-illustration--empty-state--tertiary-object--detail
- now-illustration--empty-state--tertiary-object--shadow
Background empty state image. For the text description, refer to the theme hook information that follows.
The theme hooks used to override the background empty state image.
- now-illustration--empty-state--background--lines
- now-illustration--empty-state--background--tertiary-lines
- now-illustration--empty-state--background--object-outline
- now-illustration--empty-state--background--object-detail
- now-illustration--empty-state--background--object-shadow
- now-illustration--empty-state--background--object-fill
Empty state light mode fallbacks
| Object | Style declaration |
|---|---|
| Main object | |
| |
| Primary object | |
| |
| |
| |
| |
| |
| Tertiary object | |
| |
| |
| |
| |
| |
| Background object | |
| |
| |
| |
| |
|
- Customize theme-able empty state images for your theme
Customize default theme-able empty state images for your Next Experience and Theme Builder themes using the theme's Imagery record.
Parent Topic:Working with themes in Next Experience