EmptyState | UI components

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

​

Available images

addOnReporting

announcement

api

automatedTesting

beta

building

callingSetUp

companies

components

cone

contacts

contentStrategy

customObjects

customerExperience

customerSupport

deals

developerSecurityUpdate

electronicSignature

electronicSignatureEmptyState

emailConfirmation

emptyStateCharts

idea

integrations

leads

lock

meetings

missedGoal

multipleObjects

object

productsShoppingCart

registration

sandboxAddOn

social

store

storeDisabled

successfullyConnectedEmail

target

task

tickets

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.

​

Related components

• Alert
• ErrorState
• LoadingSpinner