> ## Documentation Index
> Fetch the complete documentation index at: https://developers.hubspot.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

---
id: 05f643cc-1518-4b09-966b-705714f56f3a
---

# Error state | UI components

> Learn about the ErrorState component for use in UI extensions.

The `ErrorState` component sets the content of an erroring extension. Use this component to guide users through resolving errors that your extension might encounter.

<Frame>
  <img src="https://www.hubspot.com/hubfs/Knowledge_Base_2023_2024/design-guidelines-error-state-primary-button.png" alt="design-guidelines-error-state-primary-button" />
</Frame>

1. **Illustration:** one of three error-themed illustrations.
2. **Title:** the main error message to explain the root cause if known.
3. **Additional text:** an additional [`Text` component](/apps/developer-platform/add-features/ui-extensions/ui-components/standard-components/text) to provide further guidance. This does not come with the component by default. Error text should use the following formats:
   * **Known cause:** \[what failed] + \[why it failed] + \[next steps]. For example, *Failed to load extension due to outage, please wait a few minutes and try again.*
   * **Unknown cause:** \[what failed] + \[next steps]. For example, *Couldn't load data, try refreshing the page or contacting IT.*
4. **Additional button:** an additional [`Button` component](/apps/developer-platform/add-features/ui-extensions/ui-components/standard-components/button) to can help users take action. This does not come with the component by default.

```jsx theme={null}
import { ErrorState, Text, Button } from '@hubspot/ui-extensions';

const Extension = ({ data, error, fetchData }) => {
  if (error) {
   return (
    <ErrorState title="Trouble fetching properties.">
     <Text>
      Please try again in a few moments.
     </Text>
     <Button onClick={fetchData}>
      Try again
     </Button>
   </ErrorState>
   )
 }
  return (
   {data.map(...)}
  );
}
```

## Props

| **Prop** | **Type**                                       | **Description**                           |
| -------- | ---------------------------------------------- | ----------------------------------------- |
| `title`  | String                                         | The text of the component header.         |
| `type`   | `'support'` \| `'lock'` \| `'error'` (default) | The type of image that will be displayed. |

## Variants

Using the `type` prop, you can set one of three illustrations.

<Frame>
  <img src="https://developers.hubspot.com/hs-fs/hubfs/design-guidelines-error-states_3.png?width=512&height=293&name=design-guidelines-error-states_3.png" alt="design-guidelines-error-states_3" />
</Frame>

```jsx theme={null}
const Extension = ({ data, error, fetchData }) => {
  if (error) {
   return (
    <ErrorState
     title="Trouble fetching properties."
     type="error"
    >
   </ErrorState>
   )
 }
  return (
   {data.map(...)}
  );
}
```

<Frame>
  <img src="https://developers.hubspot.com/hs-fs/hubfs/design-guidelines-error-states_1.png?width=512&height=257&name=design-guidelines-error-states_1.png" alt="design-guidelines-error-states_1" />
</Frame>

```jsx theme={null}
const Extension = ({ data, error, fetchData }) => {
  if (error) {
   return (
    <ErrorState
     title="Something went wrong."
     type="support"
    >
   </ErrorState>
   )
 }
  return (
   {data.map(...)}
  );
}
```

<Frame>
  <img src="https://developers.hubspot.com/hs-fs/hubfs/Knowledge_Base_2023/design-guidelines-lock.png?width=449&height=289&name=design-guidelines-lock.png" alt="design-guidelines-lock" />
</Frame>

```jsx theme={null}
const Extension = ({ data, error, fetchData }) => {
  if (error) {
   return (
    <ErrorState
     title="You must log in to view this data."
     type="lock"
    >
   </ErrorState>
   )
 }
  return (
   {data.map(...)}
  );
}
```

## Usage examples

* Use the `default` error type when a card encounters an error when fetching data.
* Use the `support` error type when the user should contact internal or external support to resolve an error.
* Use the `lock` error type when the user needs to log in or doesn't have permission to access the card's data.

## Guidelines

* **DO:** use text that's clear, direct, brief, and helpful.
* **DON'T:** use technical jargon.
* **DON'T:** say "sorry" or use frivolous language such as "oops," "uh-oh," and "it's us, not you."
* **DON'T:** use exclamation points.

## Related components

* [Alert](/apps/developer-platform/add-features/ui-extensions/ui-components/standard-components/alert)
* [EmptyState](/apps/developer-platform/add-features/ui-extensions/ui-components/standard-components/empty-state)
* [LoadingSpinner](/apps/developer-platform/add-features/ui-extensions/ui-components/standard-components/loading-spinner)