Text

Render text and links with theme styles

Import

Source

View source code

Docs

Edit this page

Package

@mantine/core

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 (Anchor component has variant="link" by default)

Extra small text

Small text

Default text

Large text

Extra large text

Semibold

Bold

Link variant Same as above Text with 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>
<Anchor href="https://mantine.dev">Same as above Text with link variant</Anchor>
<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>

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>