Text

Text renders inline copy (a <span>) for labels, values, and other short text — use it instead of a raw <span>.

#Example

#Usage

#Small size

Used for displaying counts and small body copy. Avoid unless explicitly used in a design, since it's harder to read than a default medium size.

#Medium size

This is a default size, that's used for most copy on the page.

#Large size

Used on onboarding pages, where larger fonts and component sizes are used. There may be other limited use cases beyond onboarding pages. Try to stick to a default medium size when possible.

#Monospace

Use the monospace variant for displaying monospaced text. This may be used for data references.

#Numeric

Use the numeric variant for displaying numerical data. If you need to show a code example, use code instead.

#Truncated

When text content comes from users, it's often too long to fit in the UI. To avoid breaking the layout, truncate the overflowing text with an ellipsis (…).

#Shimmer

Use the shimmer prop to add an animated shimmer effect to text. This is useful for drawing attention to new features or important updates. The shimmer automatically uses the 900 shade of the text color (e.g., purple.500 → purple.900).

You can also provide a custom shimmerColor to override the default:

#Highlighting

Use the highlight when text should stand out against other text.

• success and danger may be used to display diffs
• warning may be used to highlight warnings
• danger may be used to highlight errors
• primary may be used to highlight specific pieces of text

#Guidelines

#When to use

• When displaying a single-line text or a label near the relevant component.

#When not to use

• If text can span multiple lines, use a paragraph instead.

#Font size

• Avoid overriding font size, unless it's absolutely necessary and requested by design team.

#Font family

• Enable isMonospace prop for displaying numerical data. If you need to show a code example, use code instead.

#Font weight

• Use medium for a primary column in the table.
• Use semibold to highlight small amounts of text inside a paragraph. Avoid highlighting entire sentences or paragraphs.

#Text transform and letter spacing

• uppercase text transform and wide letter spacing are reserved for use in table headers. You shouldn't use them directly.

#Content

• Use sentence case.

#Props

Name	Default	Description
isTruncated	false	boolean Truncate overflowing text with an ellipsis if needed.
children	—	ReactNode Text.
size	"md"	"sm" | "md" | "lg" Font size.
fontWeight	"normal"	"normal" | "medium" | "semibold" Font weight
highlight	—	"primary" | "success" | "warning" | "danger" Highlight color.
letterSpacing	"normal"	"normal" | "wide" Letter spacing.
variant	undefined	undefined | "numeric" | "monospace" Variant
shimmer	false	boolean Enable animated shimmer effect on the text.
shimmerColor	—	ColorProps["color"] Color for the shimmer effect. Defaults to the 900 shade of the text color (e.g., "purple.500" → "purple.900"). Override for custom shimmer colors.
display	—	LayoutProps["display"]
color	—	Color The CSS `color` property.