EmptyState | UI components (BETA)
APPLICABLE PRODUCTS
-
Sales Hub
- Enterprise
-
Service Hub
- Enterprise
The EmptyState
component sets the content that appears when the extension is in an empty state. Use this component when there's no content or data to help guide users.
- Image: the default image that comes with the component.
- Title: the title that describes why the component is in an empty state.
- Additional text: an additional
Text
component to provide further guidance. This does not come with the component by default. - Additional button: an additional
Button
component to can help users take action. This does not come with the component by default.
Prop | Type | Description |
---|---|---|
flush |
Boolean | When set to true , removes the default vertical margins for the component. By default, set to false . |
imageWidth |
Number | The max-width for the image container. By default, set to 250 . |
layout |
'horizontal' | 'vertical' (default) |
The layout direction of the content. |
reverseOrder |
Boolean | When set to true , swaps out the visual order of the text (primary) and image (secondary) content. This ensures that the primary content is presented first to screen readers. By default, set to false . |
title |
String | The text for the title header. |
- DO: make empty states informative so that users understand what will appear when the extension is not empty.
- DO: make empty states actionable. If relevant, explain the benefits of this area and how to add content or data.
- DON'T: make empty states too long.
Thank you for your feedback, it means a lot to us.
This form is used for documentation feedback only. Learn how to get help with HubSpot.