Text | UI components (BETA)

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

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> </> ); };
Prop Type Description
format Object Text formatting options, which include:
  • { fontWeight: 'bold' }
  • { fontWeight: 'demibold' }
  • { italic: true }
  • { lineDecoration: 'strikethrough' }
  • { lineDecoration: 'underline' }

See the variants section for more information.
variant 'bodytext' (default) | 'microcopy' The style of text to display. See the variants section for more information.
inline Boolean When set to true, will insert text without breaking the line. Default is false.
truncate Boolean | object

Truncates 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.
  • <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.

Related components

Was this article helpful?
This form is used for documentation feedback only. Learn how to get help with HubSpot.