Text

Render text and links with theme styles
Import

Usage

Use Text component to render 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.
  • 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
Link variant
Red text
Blue text
Gray text
Uppercase
capitalized text
Aligned to center
Aligned to right
<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 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
<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
<Text
component="span"
align="center"
variant="gradient"
gradient={{ from: 'indigo', to: 'cyan', deg: 45 }}
size="xl"
weight={700}
style={{ fontFamily: 'Dosis, sans-serif' }}
>
Indigo cyan gradient
</Text>

Line clamp

You can specify maximum amount of lines with lineClamp prop. This option uses -webkit-line-clamp CSS property (caniuse). Note that you cannot set padding-bottom 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
<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.

<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

By default 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, you can highlight part of Title:

Title in which you want to highlight something

<Title order={3}>Highlight <Text color="blue" inherit component="span">something</Text>in title</Title>

Custom component

By default text is rendered in div element, you can change it by setting component prop:

import { Link } from 'react-router-dom';
<Text variant="link" component={Link} to="/hello">
React router link
</Text>
// same as above example
<Anchor component={Link} to="/hello">
React router link
</Anchor>
<Text variant="link" component="a" href="https://mantine.dev">
Normal link
</Text>
Build fully functional accessible web applications with ease
Feedback
Your feedback is most valuable contribution to the project, please share how you use Mantine, what features are missing and what is done good
Leave feedback