Skip to main content
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(...)}
  );
}

​
Props

PropTypeDescription
flushBooleanWhen set to true, removes the default vertical margins for the component. By default, set to false.
imageNameStringThe name of the image. See available images. By default, set to 'emptyStateCharts'.
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.

​
Available images

add-on-reporting

addOnReporting
announcement

announcement
api

api
automated-testing

automatedTesting
beta

beta
building

building
calling-set-up

callingSetUp
companies

companies
components

components
cone

cone
contacts

contacts
content-strategy

contentStrategy
custom-objects

customObjects
customer-experience

customerExperience
customer-support

customerSupport
deals

deals
developer-security-update

developerSecurityUpdate
electronic-signature

electronicSignature
electronic-signature-empty-state

electronicSignatureEmptyState
email-confirmation

emailConfirmation
empty-state-charts

emptyStateCharts
idea

idea
integrations

integrations
leads

leads
lock

lock
meetings

meetings
missed-goal

missedGoal
multiple-objects

multipleObjects
object

object
products-shopping-cart

productsShoppingCart
registration

registration
sandbox-add-on

sandboxAddOn
social

social
store

store
store-disabled

storeDisabled
successfully-connected-email

successfullyConnectedEmail
target

target
task

task
tickets

tickets
vote-and-search

voteAndSearch

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