Skip to main content
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

Using the format prop, you can style text with a number of options:
  • {fontWeight: 'bold'}: sets the text to bold.
  • {fontWeight: 'demibold'}: sets the text to a lighter bold.
  • {italic: true}: sets the text to italics.
  • {lineDecoration: 'strikethrough'}: adds a strikethrough to the text.
  • {lineDecoration: 'underline'}: underlines the text.
  • {textTransform: 'none'}: no capitalization changes (default)
  • {textTransform: 'uppercase'}: transforms all characters to uppercase
  • {textTransform: 'lowercase'}: transforms all characters to lowercase
  • {textTransform: 'capitalize'}: capitalizes the first letter of each word
  • {textTransform: 'sentenceCase'}: capitalizes the first letter of the text and makes the rest lowercase
  • <Text inline={true}>: enables you to set text styling within the same line by adding more text without breaking the line if possible. Line will still break when text content would extend past the boundaries of its container. For example: <Text>Text <Text inline={true} format={{fontWeight: 'bold'}}> with inner bold.</Text>.
design-guidelines-text
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.