Skip to content
Apps Platform

Text

The Text component is a versatile typography tool designed to handle various textual styles and semantics within the UI. It supports multiple text tones and size variants, ensuring consistency and adaptability across your app.

Effective Practices

When using the Text component, consider the following best practices:

  • Semantic Correctness: Always choose the appropriate HTML element (as prop) to match the semantic importance of the text in your content structure.
  • Accessibility: Use the visuallyHidden prop for text that should be accessible to screen readers but not visible on the screen, such as labels for form elements.
  • Consistency: Utilize predefined tone and variant props to maintain consistent styling across your application.

Usage Guidelines

The Text component can be adapted through a combination of tone and variant properties, each tailored for different use cases:

Tones

default
The standard text style, suitable for general use.

Default Tone Text 
<Text tone="default">Default Tone Text</Text>

headline
Intended for headings and titles that require emphasis.

Headline Text 
<Text tone="headline">Headline Text</Text>

dark
Ideal for text that requires contrast, typically on light backgrounds.

Dark Tone Text 
<Text tone="dark">Dark Tone Text</Text>

light
Best used on dark backgrounds to ensure readability.

Light Tone Text 
<Text tone="light">Light Tone Text</Text>

disabled
Use this tone for text elements that are disabled or inactive.

Disabled Text 
<Text tone="disabled">Disabled Text</Text>

info
Use for informational messages or content.

Informational Text 
<Text tone="info">Informational Text</Text>

success
Indicates success, confirmation, or positive messages.

Success Text 
<Text tone="success">Success Text</Text>

warning
Signifies caution or warning.

Warning Text 
<Text tone="warning">Warning Text</Text>

critical
Used for critical warnings or errors.

Critical Text 
<Text tone="critical">Critical Text</Text>

Variants

heading-lg
Large headings for significant screen sections.

Large Heading Text 
<Text variant="heading-lg">Large Heading Text</Text>

heading-md
Medium headings for sub-sections.

Medium Heading Text 
<Text variant="heading-md">Medium Heading Text</Text>

body-md-strong
Bold medium body text.

Bold Medium Body Text 
<Text variant="body-md-strong">Bold Medium Body Text</Text>

body-md
Standard body text, medium size.

Medium Body Text 
<Text variant="body-md">Medium Body Text</Text>

body-sm
Small text for less prominent information.

Small Body Text 
<Text variant="body-sm">Small Body Text</Text>

Props

interface TextProps
as ? Element

Optional HTML element type to render as.

Defaults to span
className ? string

Optional class name to apply to the text.

children ReactNode

The text to display.

id ? string

The HTML id attribute

tone ? "default" | "headline" | "dark" | "light" | "disabled" | "critical" | "error" | "info" | "success" | "warning" | null

Optional tone of the text.

color ? "red-100" | "red-200" | "red-300" | "red-400" | "red-500" | "red-600" | "red-700" | "red-800" | "red-900" | "red-1000" | "red-1100" | "red-1200" | "red-accent" | "green-100" | ... 116 more ...

Optional custom color to apply to the text.

variant ? "heading-lg" | "heading-md" | "body-md-strong" | "body-md" | "body-sm" | null

Optional variant of the text.

slot ? string

Optional slot for use in composite components.

visuallyHidden ? boolean

Optional boolean to visually hide the text.

Defaults to false