> ## 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: 1a9e25dc-7347-4921-b304-564bb5ae17ab
---

# StatusTag | UI components

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

The `StatusTag` component renders a visual indicator to display the current status of an item. Status tags can be static or clickable for invoking functions with the `onClick` prop.

<Frame>
  <img src="https://www.hubspot.com/hubfs/Knowledge_Base_2023_2024/ui-extension-component-statustag.png" alt="ui-extension-component-statustag" />
</Frame>

```jsx theme={null}
import { Flex, Heading, StatusTag, Text, hubspot } from "@hubspot/ui-extensions";

const Extension = () => {
  return (
    <Flex direction="column" gap="sm">
      <Heading>Account status</Heading>
      <Flex direction="column" gap="sm">
        <Text format={{ fontWeight: "bold" }}>
          Billing: <StatusTag variant="success">Good standing</StatusTag>
        </Text>
        <Text format={{ fontWeight: "bold" }}>
          Outreach: <StatusTag variant="warning">> 2 weeks since last check-in</StatusTag>
        </Text>
        <Text format={{ fontWeight: "bold" }}>
          Support: <StatusTag variant="danger">1 escalated support ticket</StatusTag>
        </Text>
        <Text format={{ fontWeight: "bold" }}>
          Upgrades: <StatusTag>No upgrades</StatusTag>
        </Text>
        <Text format={{ fontWeight: "bold" }}>
          Referrals: <StatusTag variant="info">1 recent referral</StatusTag>
        </Text>
      </Flex>
    </Flex>
  );
};
```

## Props

| Prop             | Type                                                                          | Description                                                                                                               |
| ---------------- | ----------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------- |
| `hollow`         | Boolean                                                                       | When set to `true`, the status tag's dot will be a ring instead of a filled-in circle.                                    |
| `onClick`        | `() => void;`                                                                 | A function that will be invoked when the status tag is clicked. It receives no arguments and its return value is ignored. |
| `onRemoveClick`  | `() => void;`                                                                 | A function that will be invoked when the remove icon is clicked.                                                          |
| `showRemoveIcon` | Boolean                                                                       | When set to `true`, the status tag will include a small, clickable x icon to remove it. Default is `false`.               |
| `variant`        | `'default'` (default) \| `'info'` \| `'danger'` \| `'warning'` \| `'success'` | The color of the dot indicator. See the [variants section](#variants) for more information.                               |

## Variants

* Using the `variant` prop, you can configure the indicator severity color:
  * `'danger'`: a red dot indicating a negative state, such as error or failure.
  * `'default'` (default): a grey dot indicating a neutral state.
  * `'info'`: a blue dot indicating a general or informative state.
  * `'success'`: a green dot indicating a positive state, such as confirming success or completion.
  * `'warning'`: a yellow dot indicating a cautionary state, for when something needs attention or is time-sensitive.

<Frame>
  <img src="https://www.hubspot.com/hubfs/Knowledge_Base_2023_2024/ui-extension-component-statustag-variants.png" alt="ui-extension-component-statustag-variants" />
</Frame>

* Using the `hollow` prop, you can configure the dot to be a filled circle or a ring:

<Frame>
  <img src="https://www.hubspot.com/hubfs/Knowledge_Base_2023_2024/ui-extension-component-statustag-hollow.png" alt="ui-extension-component-statustag-hollow" />
</Frame>

* Using the `showRemoveIcon` prop, you can include a clickable icon to remove the status indicator.

<Frame>
  <img src="https://www.hubspot.com/hubfs/Knowledge_Base_2023_2024/ui-extension-component-statustag-removeicon.png" alt="ui-extension-component-statustag-removeicon" />
</Frame>

## Usage examples

* Use an `'info'` status tag to indicate that a customer is active.
* Use a `'success'` status tag to indicate that an item in a to-do list has been completed.
* Use a `'warning'` tag to indicate that a deal is expiring soon.
* Use a `'danger'` tag to indicate that an error happened when trying to sync a specific property in a table.

## Guidelines

* **DO:** make tag text concise and clear.
* **DO:** ensure that tag variants are used consistently across the extension.
* **DON'T:** use tags in place of buttons or links.
* **DON'T:** rely on color alone to communicate the tag's meaning. Ensure that tag text is clear and helpful.

## Related components

* [Tag](/apps/developer-platform/add-features/ui-extensions/ui-components/standard-components/tag)
* [Alert](/apps/developer-platform/add-features/ui-extensions/ui-components/standard-components/alert)
* [Icon](/apps/developer-platform/add-features/ui-extensions/ui-components/standard-components/icon)
* [ProgressBar](/apps/developer-platform/add-features/ui-extensions/ui-components/standard-components/progress-bar)