The Tag
component renders a tag to label or categorize information or other components. Tags can be static or clickable for invoking functions.
- Variant: the color of the tag.
- Tag text: the text that communicates the tag's purpose.
x
import { Tag } from '@hubspot/ui-extensions';
const Extension = () => {
return (
<Tag
variant="success"
onClick={() => {
console.log('Tag clicked!');
}}
inline={true}
>
Success
</Tag>
);
};
Prop | Type | Description |
---|---|---|
variant | 'default' (default) | 'warning' | 'success' | 'error' | 'info' | 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. |
overlay | Object | Include a Modal or Panel component in this object to open it as an overlay on click. Learn more about using overlays. |
Using the variant
prop, you can choose from one of five tag colors:
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.
Using the inline
prop, you can set a tag to align side-by-side with surrounding text. Below are examples of inline tags next to single-line text and multi-line text.
xxxxxxxxxx
3
<Text>
<Tag inline={true}>In Review</Tag>Some text over here
</Text>
xxxxxxxxxx
6
<Text>
<Tag inline={true}>In Review</Tag>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>
xxxxxxxxxx
7
<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. <Tag inline={true}>In Review</Tag> Suspendisse sed mattis metus, id
iaculis enim. Cras nisl erat, pulvinar sit amet nisl sit amet, feugiat
pharetra urna.
</Text>
- 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.
- 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.