StatusTag | UI components (BETA)

APPLICABLE PRODUCTS
  • Sales Hub
    • Enterprise
  • Service Hub
    • Enterprise

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'>&gt; 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> ); };
Prop Type Description
variant 'default' (default) | 'info' | 'danger' | 'warning' | 'success' The color of the dot indicator. See the variants section for more information.
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.
showRemoveIcon Boolean When 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.

Related components

Was this article helpful?
This form is used for documentation feedback only. Learn how to get help with HubSpot.