Text

The Text component provides a flexible way to render text with customizable styles. It supports various text properties including size, weight, color, alignment, and more, ensuring consistent typography across your application.

Text supports responsive variants—pass an object like size={{ base: "sm", md: "lg" }} for different breakpoints.

Features

Multiple size variants (xs to 4xl)
Weight options (light to bold)
Color variants matching the design system
Text alignment options
Text transformation (uppercase, lowercase, capitalize)
Line height control
Text decoration (underline, line-through, italic)
Truncation with ellipsis
Line clamping support
Responsive variants

Usage

import { Text } from '@loke/design-system/text';

export default function Example() {
  return (
    <Text size="lg" weight="medium" color="muted">
      This is styled text.
    </Text>
  );
}

Tips:

Use truncate for single-line text overflow.
Use clamped to limit text to a specific number of lines.
Combine variants for rich text styling.

Props

Text

Prop

Type

Examples

Basic text

Default text styling.Large text.Bold text.Muted text.

<Text>Default text styling.</Text>
<Text size="lg">Large text.</Text>
<Text weight="bold">Bold text.</Text>
<Text color="muted">Muted text.</Text>

Size variants

Extra small (xs)Small (sm)Base (base)Large (lg)Extra large (xl)2X large (2xl)3X large (3xl)4X large (4xl)

<Text size="xs">Extra small</Text>
<Text size="sm">Small</Text>
<Text size="base">Base</Text>
<Text size="lg">Large</Text>
<Text size="xl">Extra large</Text>
<Text size="2xl">2X large</Text>
<Text size="3xl">3X large</Text>
<Text size="4xl">4X large</Text>

Weight variants

Light weightNormal weightMedium weightSemibold weightBold weight

<Text weight="light">Light weight</Text>
<Text weight="normal">Normal weight</Text>
<Text weight="medium">Medium weight</Text>
<Text weight="semibold">Semibold weight</Text>
<Text weight="bold">Bold weight</Text>

Color variants

Foreground colorMuted colorPrimary colorSecondary colorDestructive colorAccent color

<Text color="foreground">Foreground</Text>
<Text color="muted">Muted</Text>
<Text color="primary">Primary</Text>
<Text color="secondary">Secondary</Text>
<Text color="destructive">Destructive</Text>

Truncation and clamping

Truncated (single line):

This is a very long piece of text that demonstrates how truncation and line clamping work in the Text component. It will be cut off with an ellipsis when it exceeds the available space or the specified number of lines.

Clamped (2 lines):

Clamped (3 lines):

<div className="w-[200px]">
  <Text truncate>
    This is a very long text that will be truncated with an ellipsis.
  </Text>
</div>

<div className="w-[200px]">
  <Text clamped={2}>
    This text will be clamped to two lines and will show an ellipsis
    if it exceeds that limit.
  </Text>
</div>

Accessibility

Text component renders a semantic span element.
Color variants maintain readable contrast ratios.
Truncated text should have a title attribute or tooltip for full content access.
Line clamping hides content—ensure important information is accessible.

Best practices

Use consistent sizing across similar content types.
Reserve bold and semibold weights for emphasis.
Use muted color for secondary or supporting text.
Avoid excessive use of decorations (underline, line-through).
Consider readability when using small sizes or light weights.
Use line clamping sparingly—ensure users can access full content when needed.
Test text rendering at different viewport sizes.

Text

On this page