Skip to main content

​
Overview

The Text component is a versatile typography component that automatically selects the appropriate semantic HTML element based on the type prop. It supports headers (h1-h6, d1), paragraphs (p, p2, c1, c2, o1, o2), and button text (b1, b2, b3).

​
Import

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

​
Usage

​
Headers

<Text type="d1" weight="semibold">Display Title</Text>
<Text type="h1" weight="semibold">Page Title</Text>
<Text type="h2" weight="medium">Section Title</Text>
<Text type="h3">Subsection Title</Text>
<Text type="h4">Small Heading</Text>
<Text type="h5">Smaller Heading</Text>
<Text type="h6">Smallest Heading</Text>

​
Paragraphs

<Text type="p">Regular paragraph text</Text>
<Text type="p2">Smaller paragraph text</Text>
<Text type="c1">Caption text</Text>
<Text type="c2">Smaller caption text</Text>
<Text type="o1">OVERLINE TEXT</Text>
<Text type="o2">SMALLER OVERLINE</Text>

​
Button Text

<Text type="b1">Large Button Text</Text>
<Text type="b2">Medium Button Text</Text>
<Text type="b3">Small Button Text</Text>

​
Custom Styling

import ColorV2 from '@adoptaunabuelo/react-components/constants/ColorV2';

<Text 
  type="p" 
  weight="medium"
  style={{ color: ColorV2.text.neutralMedium }}
>
  Styled paragraph text
</Text>

​
Type Variants

​
Headers (d1, h1-h6)

​
d1
Display 1
Size: 52px (desktop), 48px (mobile)
Line Height: 64px (desktop), 60px (mobile)
Element: <h1>
Use case: Hero titles, largest display text
​
h1
Heading 1
Size: 48px (desktop), 32px (mobile)
Line Height: 56px (desktop), 40px (mobile)
Element: <h1>
Use case: Page titles
​
h2
Heading 2
Size: 40px (desktop), 28px (mobile)
Line Height: 48px (desktop), 36px (mobile)
Element: <h2>
Use case: Major section headings
​
h3
Heading 3
Size: 28px (desktop), 24px (mobile)
Line Height: 36px (desktop), 32px (mobile)
Element: <h3>
Use case: Subsection headings
​
h4
Heading 4
Size: 24px (desktop), 20px (mobile)
Line Height: 32px (desktop), 28px (mobile)
Element: <h4>
Use case: Card titles, smaller headings
​
h5
Heading 5
Size: 20px (desktop), 18px (mobile)
Line Height: 28px (desktop), 26px (mobile)
Element: <h5>
Use case: Minor headings
​
h6
Heading 6
Size: 18px (desktop), 16px (mobile)
Line Height: 26px (desktop), 24px (mobile)
Element: <h6>
Use case: Smallest headings

​
Paragraphs (p, p2, c1, c2, o1, o2)

​
p
Paragraph
Size: 15px
Element: <p>
Use case: Body text, main content
​
p2
Paragraph 2
Size: 14px
Element: <p>
Use case: Secondary body text
​
c1
Caption 1
Size: 13px
Element: <p>
Use case: Captions, helper text
​
c2
Caption 2
Size: 12px
Element: <p>
Use case: Smaller captions, metadata
​
o1
Overline 1
Size: 13px
Transform: Uppercase
Element: <p>
Use case: Labels, category tags
​
o2
Overline 2
Size: 12px
Transform: Uppercase
Element: <p>
Use case: Smaller labels, tags

​
Button Text (b1, b2, b3)

​
b1
Button 1
Size: 18px (desktop), 15px (mobile)
Element: <p>
Use case: Large button text
​
b2
Button 2
Size: 15px (desktop), 14px (mobile)
Element: <p>
Use case: Standard button text
​
b3
Button 3
Size: 13px
Element: <p>
Use case: Small button text

​
Props

​
type
string
required
Typography variant to render. Determines the HTML element and default styles.Options: "d1" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "p" | "p2" | "c1" | "c2" | "o1" | "o2" | "b1" | "b2" | "b3"
​
weight
string
Font weight variant.Options: "regular" (400) | "medium" (500) | "semibold" (600)
Default: "regular"
​
style
CSSProperties
Custom inline styles to apply to the element.
​
children
ReactNode
Text content to display.

​
Features

  • Automatic semantic HTML: Renders the appropriate element (<h1>, <p>, etc.) based on type
  • Responsive typography: Headers automatically adjust size on mobile devices
  • Flexible styling: Supports custom colors, weights, and additional styles
  • Design system integration: Uses ColorV2 constants for consistent theming
  • Accessible: Proper semantic elements for better accessibility

​
Best Practices

  • Use header types (h1-h6) for semantic document structure
  • Use d1 for large hero text that doesn’t need to be a semantic heading
  • Apply weight="semibold" or weight="medium" for emphasis
  • Use overline types (o1, o2) for labels and category indicators
  • Prefer ColorV2 constants over hardcoded colors for consistency

​
TextAnimated Component

The library also exports a TextAnimated component that cycles through an array of words with fade animations.

​
Import

import { TextAnimated } from '@adoptaunabuelo/react-components';

​
Usage

Use {{data}} as a placeholder in the children string where you want the animated words to appear: 
<TextAnimated 
  type="h1" 
  options={["developers", "designers", "creators"]}
  interval={3000}
>
  Built for {{data}}
</TextAnimated>

​
Props

All Text props are supported, plus:
​
options
string[]
required
Array of strings to cycle through in the animation
​
interval
number
Time in milliseconds between transitionsDefault: 2500

​
Animation

  • Fades out current word with upward motion
  • Fades in next word with downward motion
  • Automatically cycles through options array
  • Loops infinitely
  • Button - Uses Text internally for button labels
  • Label - Uses Text for label content

Build docs developers (and LLMs) love

Get started for freeTalk to us