Empty states are used to communicate when a component has no content to display.
The “Onboarding” empty state introduces the user to a product feature they haven’t used yet and helps them get started. It’s displayed inside Page Layout Level 1 and 2 areas, and simplifies the UI by removing any existing page heading or button.
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. Header Badge |
For example, an Enterprise badge to highlight that the feature is available for trial users. |
Yes |
|
3. Title |
Presents the user with an introduction about the page’s product feature. |
No |
|
4. Description |
Provides the user with encouragement to perform an action. |
No |
|
5. ‘Add’ action |
Allows the user to add their first entity. Should be identical to the ‘Add’ in primary header. |
Yes |
|
6. Secondary action |
For example: Certificates has a secondary View Archive button. |
Yes |
|
7. Documentation link |
Directs the user to the relevant Octopus documentation. |
Yes |
|
8. Callout |
Highlights information and action with a strong visual prominence. |
Yes |
|
9. Secondary text and divider |
Shows a secondary message that is unrelated to the main description. |
Yes |
Variants
Variants contain different versions of the component depending on specific properties, such as state, size, colour, optional iconography, etc.
| Property | Values | Default |
|---|---|---|
| hasActions Boolean | true | false | true |
| ↳ showHidePrimary Boolean | true | false | true |
| ↳ showHideSecondary Boolean | true | false | true |
| ↳ showHideLink Boolean | true | false | true |
| hasSecondaryDescription Boolean | true | false | true |
| ✏️ title Text | string | Configure workers to execute deployment tasks on behalf of the Octopus Server |
| ✏️ description Text | string | Workers let you delegate work to a machine other than the Octopus server for increased speed, scale and security. |
| ↳ ✏️ secondaryDescription Text | string | Workers are only available on Professional plans and above. To access this feature, please contact customer success. |
| illustration InstanceSwap | ||
| hasCallout Boolean | true | false | false |
| hasHeaderBadge Boolean | true | false | false |
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