Textpolymorphic

Display text and links with theme styles
Import
Source
View source code
Docs
Edit this page
Package
@mantine/core

Usage

Use Text component to display text and links with theme styles. Control Text styles with props:

Extra small text
Small text
Default text
Large text
Extra large text
Semibold
Bold
Italic
Underlined
Strikethrough
Dimmed text
Blue text
Teal 4 text
Uppercase
capitalized text
Aligned to center
Aligned to right
import { Text } from '@mantine/core';


function Demo() {
  return (
    <>
      <Text fz="xs">Extra small text</Text>
      <Text fz="sm">Small text</Text>
      <Text fz="md">Default text</Text>
      <Text fz="lg">Large text</Text>
      <Text fz="xl">Extra large text</Text>
      <Text fw={500}>Semibold</Text>
      <Text fw={700}>Bold</Text>
      <Text fs="italic">Italic</Text>
      <Text td="underline">Underlined</Text>
      <Text td="line-through">Strikethrough</Text>
      <Text c="dimmed">Dimmed text</Text>
      <Text c="blue">Blue text</Text>
      <Text c="teal.4">Teal 4 text</Text>
      <Text tt="uppercase">Uppercase</Text>
      <Text tt="capitalize">capitalized text</Text>
      <Text ta="center">Aligned to center</Text>
      <Text ta="right">Aligned to right</Text>
    </>
  );
}

Gradient variant

To use gradient as Text color:

  • set variant to gradient
  • set gradient to { from: 'color-from', to: 'color-to', deg: 135 }, where
    • color-from and color-to are color from theme.colors
    • deg is linear gradient deg
Indigo cyan gradient
import { Text } from '@mantine/core';


function Demo() {
  return (
    <Text
      variant="gradient"
      gradient={{ from: 'indigo', to: 'cyan', deg: 45 }}
      sx={{ fontFamily: 'Greycliff CF, sans-serif' }}
      ta="center"
      fz="xl"
      fw={700}
    >
      Indigo cyan gradient
    </Text>
  );
}

Truncate

Set truncate prop to add text-overflow: ellipsis styles:

Lorem ipsum dolor sit amet consectetur adipisicing elit. Unde provident eos fugiat id necessitatibus magni ducimus molestias. Placeat, consequatur. Quisquam, quae magnam perspiciatis excepturi iste sint itaque sunt laborum. Nihil?
import { Text } from '@mantine/core';


function Demo() {
  return (
    <div style={{ width: 300 }}>
      <Text truncate>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Unde provident eos fugiat id
        necessitatibus magni ducimus molestias. Placeat, consequatur. Quisquam, quae magnam
        perspiciatis excepturi iste sint itaque sunt laborum. Nihil?
      </Text>
    </div>
  );
}

Line clamp

Specify maximum number of lines with lineClamp prop. This option uses -webkit-line-clamp CSS property (caniuse). Note that padding-bottom cannot be set on text element:

From Bulbapedia: Bulbasaur is a small, quadrupedal Pokémon that has blue-green skin with darker patches. It has red eyes with white pupils, pointed, ear-like structures on top of its head, and a short, blunt snout with a wide mouth. A pair of small, pointed teeth are visible in the upper jaw when its mouth is open. Each of its thick legs ends with three sharp claws. On Bulbasaur's back is a green plant bulb, which is grown from a seed planted there at birth. The bulb also conceals two slender, tentacle-like vines and provides it with energy through photosynthesis as well as from the nutrient-rich seeds contained within.
Size
xs
sm
md
lg
xl
import { Text } from '@mantine/core';


function Demo() {
  return (
    <Text lineClamp={4}>
      {/* Text content */}
    </Text>
  );
}

Line clamp can also be used with any children (not only strings), for example with TypographyStylesProvider:

Line clamp with TypographyStylesProvider

Lorem ipsum dolor sit amet consectetur adipisicing elit. Nesciunt nulla quam aut sed corporis voluptates praesentium inventore, sapiente ex tempore sit consequatur debitis non! Illo cum ipsa reiciendis quidem facere, deserunt eos totam impedit. Vel ab, ipsum veniam aperiam odit molestiae incidunt minus, sint eos iusto earum quaerat vitae perspiciatis.

import { TypographyStylesProvider, Text } from '@mantine/core';


function Demo() {
  return (
    <Text lineClamp={3}>
      <TypographyStylesProvider>
        <h3>Line clamp with TypographyStylesProvider</h3>
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Nesciunt nulla quam aut sed
          corporis voluptates praesentium inventore, sapiente ex tempore sit consequatur debitis
          non! Illo cum ipsa reiciendis quidem facere, deserunt eos totam impedit. Vel ab, ipsum
          veniam aperiam odit molestiae incidunt minus, sint eos iusto earum quaerat vitae
          perspiciatis.
        </p>
      </TypographyStylesProvider>
    </Text>
  );
}

Inherit styles

Text always applies font-size, font-family and line-height styles, but in some cases this is not a desired behavior. To force Text to inherit parent styles set inherit prop. For example, highlight part of Title:

Title in which you want to highlight something

import { Text, Title } from '@mantine/core';


function Demo() {
  return <Title order={3}>Title in which you want to <Text span c="blue" inherit>highlight</Text> something</Title>;
}

Polymorphic component

Text is a polymorphic component, you can change root element:

import { Text } from '@mantine/core';


function Demo() {
  return (
    <Text component="a" href="https://mantine.dev/core/">
      Anchor element
    </Text>
  );
}

span prop

Use span prop as a shorthand for component="span":

import { Text } from '@mantine/core';


function Demo() {
  return (
    <>
      <Text span>Same as below</Text>
      <Text component="span">Same as above</Text>
    </>
  );
}
Go back
Table – @mantine/core
Up next
Title – @mantine/core

Text component props

NameTypeDescription
align
"left" | "right" | "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "center" | "end" | "start" | "justify" | "match-parent"
Sets text-align css property
children
ReactNode
Text content
color
DefaultMantineColor | "dimmed"
Key of theme.colors or any valid CSS color
gradient
MantineGradient
Controls gradient settings in gradient variant only
inherit
boolean
Inherit font properties from parent element
inline
boolean
Sets line-height to 1 for centering
italic
boolean
Adds font-style: italic style
lineClamp
number
CSS -webkit-line-clamp property
size
number | "xs" | "sm" | "md" | "lg" | "xl"
Key of theme.fontSizes or number to set font-size in px
span
boolean
Shorthand for component="span"
strikethrough
boolean
Add strikethrough styles
transform
"-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "none" | "capitalize" | "full-size-kana" | "full-width" | "lowercase" | "uppercase"
Sets text-transform css property
truncate
true | "end" | "start"
CSS truncate overflowing text with an ellipsis
underline
boolean
Underline the text
variant
"link" | "text" | "gradient"
Link or text variant
weight
FontWeight
Sets font-weight css property
Build fully functional accessible web applications faster than ever
About
ContributeAbout MantineChangelogReleases
Community
Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions
Project
Mantine UIDocumentationGithub organizationnpm organization
Built by Vitaly Rtishchev and these awesome people
Join Discord community
Follow Mantine on Twitter