EmptyState | UI components (BETA)

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.

design-guidelines-empty-state-primary-button


  1. Image: the default image that comes with the component.
  2. Title: the title that describes why the component is in an empty state.
  3. Additional text: an additional Text component to provide further guidance. This does not come with the component by default.
  4. Additional button: an additional Button component to can help users take action. This does not come with the component by default.
import { EmptyState, Text } from '@hubspot/ui-extensions'; const Extension = ({ data }) => { if (!data || !data.length) { return ( <EmptyState title="Nothing here yet" layout="vertical" reverseOrder={true}> <Text>Go out there and get some leads!</Text> </EmptyState> ) } return ( {data.map(...)} ); }
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' (default) | 'vertical'  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.

Usage examples

  • Display when it's the first use of a feature.
  • Show when the user is required to take action in order to populate the card with information.

Guidelines

  • 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.

Related components

Was this article helpful?
This form is used for documentation feedback only. Learn how to get help with HubSpot.