Skip to main content
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.
ui-extension-component-statustag
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

PropTypeDescription
variant'default' (default) | 'info' | 'danger' | 'warning' | 'success'The color of the dot indicator. See the variants section for more information.
hollowBooleanWhen 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.
showRemoveIconBooleanWhen set to true, the status tag will include a small, clickable x icon to remove it. Default is false.
onRemoveClick() => void;A function that will be invoked when the remove icon is clicked.

​
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.
ui-extension-component-statustag-variants
  • Using the hollow prop, you can configure the dot to be a filled circle or a ring:
ui-extension-component-statustag-hollow
  • Using the showRemoveIcon prop, you can include a clickable icon to remove the status indicator.
ui-extension-component-statustag-removeicon

​
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.
Last modified on December 10, 2025