Text

A versatile text component with predefined typography appearances. Use the appearance prop to apply consistent sets of typography related CSS.

Overview

Resources

Install

yarn add @camp/text

Advantages of the new Text component

• 🎨 Appearance prop: The Text component now uses the appearance prop to apply typography styles. This replaces the old type prop.

• 🔆 Themed prop: The Text component now supports the themed prop to enable light and dark theming.

Upgrading from AiText or older versions of Text

The Text component has recently been consolidated, which means the ai-text component is deprecated as is the old Text API. See below for details and how to upgrade.

Upgrading from AiText to Text

// Previous implementation
import { AiText } from '@camp/ai-text';
 
<AiText appearance="heading-large" as="h1" color="default">Page title</AiText>
<AiText appearance="body-small" color="default">Description text</AiText>
 
// New implementation
import { Text } from '@camp/text';
 
<Text appearance="heading-large" as="h1" color="default">Page title</Text>
<Text appearance="body-small" color="default">Description text</Text>

Upgrading from Old Text API to New Text API

// Previous implementation
import { Text } from '@camp/text';
 
<Text type="body">I am some text</Text>
<Text type="heading" as="h3">I am some text</Text>
<Text type="eyebrow">I am some text</Text>
 
// New implementation
import { Text } from '@camp/text';
 
<Text appearance="body-small" color="default">I am some text</Text>
<Text appearance="heading-small" as="h3" color="default">I am some text</Text>
<Text appearance="eyebrow-small" color="default">I am some text</Text>

Migration steps

• Update the import path to use the new Text component from @camp/text
• Update the appearance prop to use the new appearance prop
• Use the new color prop to enable theming
• Update the as prop to use the new as prop

Variations

Pro tip: To view what sets of styles are being applied for each appearance value, hover over the Text component to view the full guide.

Heading variants

Heading variants use semibold weight (600) with IBM Plex Sans for small through large sizes, and medium weight (500) with Owners font for large and above.

import { Text } from '@camp/text';
 
<Text appearance="heading-xxlarge" color="default">
  Heading
</Text>;

Body variants

Body variants use regular weight (400) with IBM Plex Sans font family.

import { Text } from '@camp/text';
 
<Text appearance="body-xsmall" color="default">
  Body
</Text>;

Monospace variants

Monospace variants use regular weight (400) with IBM Plex Mono font family.

import { Text } from '@camp/text';
 
<Text appearance="monospace-medium" color="default">
  Monospace
</Text>;

Eyebrow variants

Eyebrow variants use bold weight (700) with uppercase transformation and increased letter spacing.

import { Text } from '@camp/text';
 
<Text appearance="eyebrow-small" color="default">Small eyebrow</Text>
<Text appearance="eyebrow-medium" color="default">Medium eyebrow</Text>

Label variants

The label variant is specifically used for form labels. It uses medium weight (500) with IBM Plex Sans font family.

import { Text } from '@camp/text';
 
<Text appearance="label-small" color="default">
  Form label text
</Text>;

Color variations

The component supports various color options through the design system’s color tokens.

import { Text } from '@camp/text';
 
// Direct color values
<Text color="default">Default text color</Text>
<Text color="supportive">Supportive text color</Text>
<Text color="success">Success text color</Text>
<Text color="destructive">Destructive text color</Text>
 
// Nested color values using dot notation
<Text color="primary.default">Primary default</Text>
<Text color="secondary.default">Secondary default</Text>
<Text color="secondary.default-hover">Secondary hover</Text>

HTML element variants

Use the as prop to render the text as different HTML elements while maintaining the same visual appearance.

import { Text } from '@camp/text';
 
<Text appearance="heading-large" as="h1" color="default">This is an H1 heading</Text>
<Text appearance="heading-medium" as="h2" color="default">This is an H2 heading</Text>
<Text appearance="body-small" as="p" color="default">This is a paragraph element with body text styling</Text>
<Text appearance="body-small" color="default">This is inline span text (default element)</Text>
<Text appearance="label-small" as="label" color="default">Form Label Text</Text>

All appearances

Usage

Best practices

• Use heading variants to establish clear typographic hierarchy in your interfaces
• Choose appropriate heading sizes based on content importance and page structure
• Use body variants for readable paragraph text and descriptions
• Apply eyebrow variants for labels, categories, and supplementary information
• Leverage the as prop to ensure semantic HTML while maintaining visual consistency
• Use color variants to convey meaning and align with your content’s purpose

Content guidelines

Accessibility

Screen reader support

• Use semantic HTML elements through the as prop to provide proper structure for screen readers
• Heading variants should use appropriate heading tags (h1, h2, etc.) to create logical document structure
• Ensure text content is meaningful and provides sufficient context