v4.2.12

Text

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:

  • size – font-size from theme.fontSizes – xs, sm, md, lg, xl
  • color – color from theme.colors – red, green, blue, etc.
  • weight – font-weight property – 500, 700, bold, semibold, etc.
  • underline - underline text
  • transform – text-transform property – uppercase, lowercase, capitalize
  • align – text-align property
  • variant – text or link predefined styles
Extra small text
Small text
Default text
Large text
Extra large text
Semibold
Bold
Underlined
Link variant
Red text
Blue text
Gray text
Uppercase
capitalized text
Aligned to center
Aligned to right
import { Text } from '@mantine/core';


function Demo() {
  return (
    <>
      <Text size="xs">Extra small text</Text>
      <Text size="sm">Small text</Text>
      <Text size="md">Default text</Text>
      <Text size="lg">Large text</Text>
      <Text size="xl">Extra large text</Text>
      <Text weight={500}>Semibold</Text>
      <Text weight={700}>Bold</Text>
      <Text underline>Underlined</Text>
      <Text variant="link" component="a" href="https://mantine.dev">Link variant</Text>
      <Text color="red">Red text</Text>
      <Text color="blue">Blue text</Text>
      <Text color="gray">Gray text</Text>
      <Text transform="uppercase">Uppercase</Text>
      <Text transform="capitalize">capitalized text</Text>
      <Text align="center">Aligned to center</Text>
      <Text align="right">Aligned to right</Text>
    </>
  );
}

Dimmed

Text supports special dimmed value in color prop. It sets color to theme.colors.dark[2] in dark theme and to theme.colors.gray[6] in light:

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


function Demo() {
  return <Text color="dimmed">Dimmed text</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
      component="span"
      align="center"
      variant="gradient"
      gradient={{ from: 'indigo', to: 'cyan', deg: 45 }}
      size="xl"
      weight={700}
      style={{ fontFamily: 'Greycliff CF, sans-serif' }}
    >
      Indigo cyan gradient
    </Text>
  );
}

Line clamp

Specify maximum amount 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}>Highlight <Text color="blue" inherit component="span">something</Text>in title</Title>;
}

Custom component

By default, text is rendered as div element, to change it by set component prop:

import { Text } from '@mantine/core';
import { Link } from 'react-router-dom';


function Demo() {
  return (
    <>
      <Text<'a'> component="a" href="#" />
      <Text<typeof Link> component={Link} to="/hello" />
    </>
  );
}
Go back
Table – @mantine/core
Up next
Title – @mantine/core
Build fully functional accessible web applications faster than ever
About
ContributeMedia assetsChangelogReleases
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