Skip to content

README.md

Latest commit

 

History

History
94 lines (70 loc) · 2.82 KB

README.md

File metadata and controls

94 lines (70 loc) · 2.82 KB
Raw

Text

A polymorphic text component for rendering styled text with semantic HTML.

Usage

import { Text } from '@components-kit/react';

// Basic paragraph (default)
<Text>This is a paragraph of text.</Text>

// Inline text with span
<Text as="span">Inline text</Text>

// With variant styling
<Text as="p" variantName="body-large">
  Large body text for emphasis.
</Text>

// Caption text
<Text as="small" variantName="caption">
  Caption or fine print text
</Text>

// Important text with semantic strong
<Text as="strong" variantName="bold">
  Important information
</Text>

// Emphasized text
<Text as="em">Emphasized content</Text>

// Form label
<Text as="label" htmlFor="email-input">
  Email Address
</Text>
<input id="email-input" type="email" />

Props

Prop Type Default Description
as ElementType "p" HTML element to render as (polymorphic)
variantName VariantFor<"text"> - Variant name for styling

Also accepts all HTML attributes for the rendered element.

Data Attributes

Attribute Values Description
data-variant string The variant name for styling

Common Elements

Element Use Case
p Paragraphs of text (default)
span Inline text without semantic meaning
strong Important text (not just bold styling)
em Emphasized text (not just italic styling)
small Side comments, disclaimers, fine print
label Form input labels (use with htmlFor)
div Block-level text container

Accessibility

Choose elements based on semantic meaning:

Element Meaning
<p> Paragraph of content
<strong> Important text (announced by screen readers)
<em> Emphasized text (announced by screen readers)
<small> Side comments or fine print
<label> Form input labels (use htmlFor for association)

Best Practices

  • Choose the element based on semantic meaning, not visual appearance
  • Use variantName for visual variations independently of semantics
  • Avoid using <div> or <span> when a semantic element is appropriate
  • For interactive text, use <button> or <a> instead

Form Labels

<Text as="label" htmlFor="email">
  Email Address
</Text>
<Input id="email" type="email" />