Last modified: August 22, 2025
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 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(...)}
  );
}
PropTypeDescription
flushBooleanWhen set to true, removes the default vertical margins for the component. By default, set to false.
imageWidthNumberThe max-width for the image container. By default, set to 250.
layout'horizontal' (default) | 'vertical'The layout direction of the content.
reverseOrderBooleanWhen 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.
titleStringThe 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.