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!");
      }}
      inline={true}
    >
      Success
    </Tag>
  );
};

​

Props

​

Variants

• default (default): for general tagging and labeling.
• success: for indicating or confirming the success of an action.
• warning: for indicating something that might be time-sensitive or of importance.
• error: for indicating error or failure.
• info: for conveying general information.

​

Alignment

<Text>Some text over here</Text>;

<Text>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ac rhoncus velit, non tincidunt tortor. Aliquam nec
  ligula quis risus vehicula mattis id vitae orci. Suspendisse sed mattis metus, id iaculis enim.
</Text>;

<Text>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ac rhoncus velit, non tincidunt tortor. Aliquam nec
  ligula quis risus vehicula mattis id vitae orci. Suspendisse sed mattis metus, id iaculis enim. Cras nisl erat,
  pulvinar sit amet nisl sit amet, feugiat pharetra urna.
</Text>;

​

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

• Toggle
• Alert
• ProgressBar