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, Box } from '@mantine/core';

function Demo() {
  return (
    <Box w={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>
    </Box>
  );
}

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

LineClamp

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

Name	Type	Description
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 any valid CSS value to set font-size
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	Variants<"text" \| "gradient">	Link or text variant
weight	FontWeight	Sets font-weight css property

Build fully functional accessible web applications faster than ever

About

Contribute About Mantine Changelog Releases

Community

Chat on Discord Follow on Twitter Follow on GitHub GitHub discussions

Project

Mantine UI Documentation GitHub organization npm organization

Built by Vitaly Rtishchev and these awesome people

Join Discord community

Follow Mantine on Twitter