Tag | UI components (BETA)

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

The Tag component renders a tag to label or categorize information or other components. Tags can be static or clickable for invoking functions.

design-guidelines-tag

  1. Variant: the color of the tag.
  2. Tag text: the text that communicates the tag's purpose.
import { Tag } from '@hubspot/ui-extensions'; const Extension = () => { return ( <Tag variant='success' onClick={() => { console.log('Tag clicked!'); }} > Success </Tag> ); }
Prop Type Description
variant 'default' (default) | 'warning' | 'success' | 'error' The color of the alert. See the variants section for more information.
onClick () => void A function that will be invoked when the tag is clicked. The function receives no arguments and its return value is ignored.

Variants

Using the variant prop, you can choose from one of four tag colors:

  • default (default): for general tagging and labeling.
    design-guidelines-tags_1
  • success: for indicating or confirming the success of an action.
    design-guidelines-tags_2
  • warning: for indicating something that might be time-sensitive or of importance.
    design-guidelines-tags_3
  • error: for indicating error or failure.
    design-guidelines-tags_4

Usage examples

  • Use a default tag to indicate that a customer is active
  • Use a success 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 an error 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.