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.

#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 (…).

#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
isMonospace	false	boolean Use monospace font.
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.