SubText

v0.2.2

Documentation Under Review

<SubText>This is some subtext</SubText>

SubText is a foundational component used to display secondary text content such as helper text, descriptions, validation messages, and other supporting information.

Installation

npm install @pmi/catalyst-subtext

Usage

import { SubText } from '@pmi/catalyst-subtext';

<SubText>This is some subtext</SubText>

Examples

Size Variants

Danger State

Precomposed with Icon

SubText can be composed with icons from the Catalyst icon library to create informative helper text:

API Reference

Accessibility

SubText is built with accessibility as a core principle:

WCAG 2.1 AA Compliance

• Color Contrast: All text meets WCAG AA contrast requirements (4.5:1 for normal text)
• Semantic Structure: Uses appropriate semantic HTML elements (span by default)
• Screen Reader Support: Content is accessible to assistive technologies
• Focus Management: Integrates properly with form focus flows

A11y Guidelines

• Associate with Controls: Use aria-describedby to link SubText with form controls
• Live Regions: For dynamic error messages, consider wrapping in aria-live="polite"
• Error Identification: Danger variant provides clear visual indication for errors

Design Tokens

SubText utilizes the Catalyst Design System tokens for consistent styling:

• Typography: Uses font-display and body text scales (text-body-xs, text-body-sm, text-body-md)
• Colors: Leverages CSS custom properties for theme-aware color treatment
• Spacing: Integrates with the design system's spacing scale

Related Components

• Button - For primary actions and CTAs
• HelperText - Alternative helper text implementation
• TextField - Form input component that often uses SubText
• TextArea - Multi-line input component with SubText support