Empty states are used to communicate when a component has no content to display.
The “Inline Onboarding” empty state introduces the user to a product feature they haven’t used yet and helps them get started. It’s displayed on a full page while keeping the existing UI (heading and button), or inside a specific content area on a page.
Anatomy
Anatomy summary lists and describes all the elements that exist within a component (including other components nested within).
|
Element |
Description |
Optional? |
|---|---|---|
|
1. Image |
Default image that appears when none is defined by the content creator. |
No |
|
2. Heading |
Default heading informs the user that no ‘ENTITIES’ are present. |
No |
|
3. Description |
Provides the user with encouragement to perform an action. |
No |
|
4. Primary action |
Allows the user to add their first entity. |
Yes |
|
5. Secondary action |
For example: Certificates has a secondary View Archive button. |
Yes |
|
6. Documentation link |
Directs the user to the relevant Octopus documentation. |
Yes |
Variants
Variants contain different versions of the component depending on specific properties, such as state, size, colour, optional iconography, etc.
| Property | Values | Default |
|---|---|---|
| ↳ showHideSecondary Boolean | true | false | true |
| ↳ showHideLink Boolean | true | false | true |
| hasActions Boolean | true | false | true |
| illustration InstanceSwap | ||
| ✏️ heading Text | string | You don’t have any _ENTITIES_ yet |
| ✏️ description Text | string | Start creating by clicking on ‘Add _ENTITY_`. |
Component dependencies
This component is internally dependent on the following components:
Product illustrations
We use illustrations to help the user understand processes, features and new concepts.
Button
Buttons allow users to take actions that will trigger a response.
Link
Links navigate users to a different page, section, or external page.
Help and support