Render text and links with theme styles


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
Link variantSame as above Text with link variant
Red text
Blue text
Gray text
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
// same as above example
<Anchor component={Link} to="/hello">
React router link
<Text variant="link" component="a" href="https://mantine.dev">
Normal link