Text

The Text component is a primitive typographic component for rendering styled text elements.

Import

import { Text } from 'theme-ui'

Usage

<Text>This is some text</Text>

Props

React.ElementType

default:"'span'"

Render as a different HTML element.

<Text as="p">Paragraph text</Text>
<Text as="div">Block text</Text>
<Text as="span">Inline text</Text>

string

default:"'default'"

Text variant from theme.text. Common variants include default, heading, caps, small, etc.

<Text variant="heading">Heading style</Text>
<Text variant="caps">ALL CAPS</Text>
<Text variant="small">Small text</Text>

ThemeUIStyleObject

Theme-aware styles for custom typography.

<Text
  sx={{
    fontSize: 4,
    fontWeight: 'bold',
    color: 'primary',
  }}
>
  Styled text
</Text>

Inherited Props

Text extends Box and accepts:

All standard HTML span attributes (or attributes for the element specified with as)
Box spacing props (m, p, mx, my, px, py, etc.)
Box color props (color, bg, opacity)

Typography Props

These can be applied via the sx prop:

fontFamily: Maps to theme.fonts
fontSize: Maps to theme.fontSizes
fontWeight: Maps to theme.fontWeights
lineHeight: Maps to theme.lineHeights
letterSpacing: Maps to theme.letterSpacings
textAlign, textDecoration, textTransform, etc.

Examples

Basic Text

<Text>Simple text content</Text>

Paragraph Text

<Text as="p" sx={{ mb: 3 }}>
  This is a paragraph with margin bottom.
</Text>

Colored Text

<Text color="primary">Primary colored text</Text>
<Text color="secondary">Secondary colored text</Text>

Responsive Font Size

<Text sx={{ fontSize: [2, 3, 4] }}>
  Font size increases with viewport
</Text>

Bold Text

<Text sx={{ fontWeight: 'bold' }}>
  Bold text
</Text>

Custom Typography

<Text
  sx={{
    fontFamily: 'heading',
    fontSize: 3,
    fontWeight: 'medium',
    lineHeight: 'tight',
    letterSpacing: 'wide',
  }}
>
  Custom typography
</Text>

Text with Icon

<Text sx={{ display: 'flex', alignItems: 'center', gap: 2 }}>
  <Icon />
  Text with icon
</Text>

Truncated Text

<Text
  sx={{
    overflow: 'hidden',
    textOverflow: 'ellipsis',
    whiteSpace: 'nowrap',
  }}
>
  This text will be truncated if too long
</Text>

Core

Styling

Color Modes

Components

Packages

Import

Usage

Props

Inherited Props

Typography Props

Examples

Basic Text

Paragraph Text

Colored Text

Responsive Font Size

Bold Text

Custom Typography

Text with Icon

Truncated Text

​Import

​Usage

​Props

​Inherited Props

​Typography Props

​Examples

​Basic Text

​Paragraph Text

​Colored Text

​Responsive Font Size

​Bold Text

​Custom Typography

​Text with Icon

​Truncated Text

Import

Usage

Props

Inherited Props

Typography Props

Examples

Basic Text

Paragraph Text

Colored Text

Responsive Font Size

Bold Text

Custom Typography

Text with Icon

Truncated Text