Skip to main content

​
Import

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

​
Usage

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

<Text type="h1" weight="bold">
  Page Title
</Text>

<Text type="p" color={ColorV2.text.neutralMedium}>
  Body text content
</Text>

<Text type="b1">Button text</Text>

​
Props

​
type
'd1' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'p2' | 'c1' | 'c2' | 'o1' | 'o2' | 'b1' | 'b2' | 'b3'
required
Text style variant that determines size, element, and formatting
​
weight
'semibold' | 'medium' | 'regular'
Font weight (600, 500, or 400)
​
style
React.CSSProperties
Custom inline styles
​
children
React.ReactNode
Text content or nested elements

​
Type Variants

​
Headers (d1, h1-h6)

Renders heading elements with responsive font sizes.
TypeDesktop SizeMobile SizeElement
d152px / 64lh48px / 60lhh1
h148px / 56lh32px / 40lhh1
h240px / 48lh28px / 36lhh2
h328px / 36lh24px / 32lhh3
h424px / 32lh20px / 28lhh4
h520px / 28lh18px / 26lhh5
h618px / 26lh16px / 24lhh6

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

Renders paragraph elements with various sizes.
TypeSizeNotes
p15pxStandard paragraph
p214pxSmaller paragraph
c113pxCaption 1
c212pxCaption 2
o113pxOverline 1 (uppercase)
o212pxOverline 2 (uppercase)

​
Button Text (b1, b2, b3)

Renders paragraph elements optimized for buttons.
TypeDesktop SizeMobile Size
b118px15px
b215px14px
b313px13px

​
Features

  • Automatically selects semantic HTML element based on type
  • Responsive font sizes for headers and button text
  • Uppercase text transformation for overline types (o1, o2)
  • Default color: ColorV2.text.neutralHard
  • Font family: Poppins
  • Zero margin and padding by default

​
Examples

​
Page Header

<Text type="h1" weight="semibold">
  Welcome to Our Platform
</Text>

​
Section Title

<Text type="h3" weight="medium">
  Features Overview
</Text>

​
Body Paragraph

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

<Text type="p" weight="regular" style={{ color: ColorV2.text.neutralMedium }}>
  This is a paragraph of body text that provides detailed information
  about the content on this page.
</Text>

​
Caption Text

<Text type="c1" weight="medium">
  Image caption or small detail text
</Text>

​
Overline (Uppercase)

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

<Text type="o1" weight="semibold" style={{ color: ColorV2.text.primary }}>
  Featured Article
</Text>

​
Button Text

<button>
  <Text type="b1" weight="medium" style={{ color: 'white' }}>
    Get Started
  </Text>
</button>

​
Custom Styled Text

<Text
  type="h2"
  weight="semibold"
  style={{
    color: '#008FF5',
    textAlign: 'center',
    marginBottom: '24px'
  }}
>
  Centered Blue Heading
</Text>

Build docs developers (and LLMs) love

Get started for freeTalk to us