Last modified: August 22, 2025
The Text component renders text with formatting options.
text-component-example
import { Text } from '@hubspot/ui-extensions';

const Extension = () => {
  return (
    <>
      <Text truncate={{ tooltipText: 'string', maxWidth: 68 }}>
        Truncated text
      </Text>
      <Text>Plain text</Text>
      <Text format={{ fontWeight: 'bold' }}>Bold</Text>
      <Text format={{ italic: true }}>Italics</Text>
      <Text format={{ fontWeight: 'bold', italic: true }}>
        Bold and Italic text
      </Text>
      <Text format={{ lineDecoration: 'strikethrough' }}>
        Strikethrough Text
      </Text>
      <Text variant="microcopy">
        Microcopy text
        <Text inline={true} format={{ fontWeight: 'bold' }}>
          with inner bold
        </Text>
      </Text>
    </>
  );
};
PropTypeDescription
formatObjectText formatting options, which include:
  • { fontWeight: 'bold' }
  • { fontWeight: 'demibold' }
  • { italic: true }
  • { lineDecoration: 'strikethrough' }
  • { lineDecoration: 'underline' }
  • { textTransform: '...' } - Controls text capitalization
See the variants section for more information.
variant'bodytext' (default) | 'microcopy'The style of text to display. See the variants section for more information.
inlineBooleanWhen set to true, will insert text without breaking the line. Default is false.
truncateBoolean | objectTruncates long strings to a single line. If the full string doesn’t fit on one line, the excess text will display in a tooltip on hover.
  • false (default): text is not truncated.
  • true: truncates text to a single line. Full text will display in a tooltip on hover.
Alternatively, set this prop to one of the following objects to specify truncate options:
  • {tooltipText: 'string'}: truncates the string and sets the contents of the tooltip.
  • {maxWidth: number}: sets the width of the line in pixels.

​
Variants

You can also control text size with the variant prop.
  • variant="bodytext" (default)
design-guidelines-text-size_1
  • variant="microcopy"
design-guidelines-text-size_2

​
Usage examples

  • Use body text when you want to display a summary of the last call with a contact.
  • Use microcopy to include an explanation of a displayed status on a contact record.

​
Guidelines

  • DO: use text with clear messaging.
  • DO: use text formatting thoughtfully. For example, don’t bold all of the text that can be seen. Instead, only bold key words and phrases for easier scanning.
  • DON’T: use the text component for the primary textual information on a card. Instead, consider using the Heading component.
  • DON’T: use underline formatting for text that’s next to a hyperlink, as it will also look clickable.
  • DON’T: use microcopy for important or critical information. Instead, consider whether an Alert component would fit better.
  • DON’T: use text components in place of headers, alerts, and errors.