Text
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
<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:
<Text color="dimmed">Dimmed text</Text>
Gradient variant
To use gradient as Text color:
- set
varianttogradient - set
gradientto{ from: 'color-from', to: 'color-to', deg: 135 }, wherecolor-fromandcolor-toare color fromtheme.colorsdegis linear gradient deg
<Textcomponent="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:
<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 sedcorporis voluptates praesentium inventore, sapiente ex tempore sit consequatur debitisnon! Illo cum ipsa reiciendis quidem facere, deserunt eos totam impedit. Vel ab, ipsumveniam aperiam odit molestiae incidunt minus, sint eos iusto earum quaerat vitaeperspiciatis.</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>