Text

Labels or other single-line text adjacent to other components on the same row.

#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:

#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
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.