Text

Alpha

A semantic text component that renders <p>, <span>, <div>, or <label> with consistent typography.

Import

import { Text } from "@compa11y/react";

Usage

Example.tsx
import { Text } from "@compa11y/react";

function Example() {
  return (
    <>
      <Text>Default body paragraph.</Text>
      <Text size="sm" color="muted">Small muted text.</Text>
      <Text as="span" weight="bold">Bold inline text.</Text>
      <Text truncate style={{ maxWidth: 300 }}>Long text that truncates...</Text>
    </>
  );
}

Features

  • Renders <p> (default), <span>, <div>, or <label> via as prop
  • Size scale: xs, sm, md, lg, xl, 2xl, 3xl
  • Color variants: default, muted, accent, error, success, warning
  • Weight and alignment props
  • Truncation with ellipsis overflow
  • unstyled prop for full customization

Props

Text component props
PropTypeDefaultDescription
as'p' | 'span' | 'div' | 'label''p'HTML element to render
size'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl''md'Text size
color'default' | 'muted' | 'accent' | 'error' | 'success' | 'warning'-Text color variant
weight'normal' | 'medium' | 'semibold' | 'bold'-Font weight
align'left' | 'center' | 'right'-Text alignment
truncatebooleanfalseAdds ellipsis overflow
unstyledbooleanfalseRemoves all default styles
children*ReactNode-Text content

Keyboard Interactions

Accessibility
All keyboard interactions follow WAI-ARIA best practices and work without any additional configuration.
Keyboard shortcuts for Text
KeyAction