Text | iTwinUI

Text components offer various text formatting options for applications.

Usage

Text is a polymorphic typography component that can be used to render any kind of text as any kind of element.

import * as React from 'react';
import { Text } from '@itwin/itwinui-react';

export default () => {
  return <Text>This is a text</Text>;
};

By default, the Text component renders a <div> element with the regular "body" size. The visuals of this component are completely separate from its semantics, which helps ensure proper heading structure.

Visuals: The variant prop can be used to customize the the size (e.g. variant="subheading").
Semantics: The polymorphic as prop can be used to render a different element (e.g. as="h2").

Variant (Only size and not semantics)

The variant prop can be used to determine the size of the text. The available variants are (from largest to smallest):

"headline".
"title".
"subheading".
"leading".
"body" (default).
"smaller".

import * as React from 'react';
import { Flex, Text } from '@itwin/itwinui-react';

export default () => {
  return (
    <Flex flexDirection='column'>
      <Text variant='headline'>This is a headline</Text>
      <Text variant='title'>This is a title</Text>
      <Text variant='subheading'>This is a subheading</Text>
      <Text variant='leading'>This is a leading</Text>
      <Text>This is a body</Text>
      <Text variant='small'>This is a small text</Text>
    </Flex>
  );
};

Please note that the variant prop only affects the visual size and is completely decoupled from the semantics, which can be controlled using the as prop (see below).

Polymorphic (Only semantics and not size)

The Text component supports the polymorphic as prop, which can be used to change the underlying HTML element. This is useful when you want to render the text as a specific heading level while maintaining a desired size.

import * as React from 'react';
import { Text } from '@itwin/itwinui-react';

export default () => {
  return (
    <Text variant='subheading' as='h1'>
      This is a subheading rendered as an h1.
    </Text>
  );
};

Muted

To achieve a muted or desaturated text effect, the isMuted prop can be passed into the component. Muted text helps differentiating less important information as well as enhancing the overall readability.

import * as React from 'react';
import { Flex, Text } from '@itwin/itwinui-react';

export default () => {
  return (
    <Flex flexDirection='column'>
      <Text>This is a regular text</Text>
      <Text isMuted>This is a muted text</Text>
    </Flex>
  );
};

Skeleton

To indicate that content is loading and will be available soon, you can use the isSkeleton prop along with the variant prop. This will display a placeholder for any text that is still loading. If no variant is specified, the skeleton will default to the size of "body" text.

import * as React from 'react';
import { Flex, Text } from '@itwin/itwinui-react';

export default () => {
  return (
    <Flex flexDirection='column'>
      <Text isSkeleton variant='headline'>
        This is a skeleton text
      </Text>
      <Text isSkeleton variant='title'>
        This is a skeleton text
      </Text>
      <Text isSkeleton variant='subheading'>
        This is a skeleton text
      </Text>
      <Text isSkeleton variant='leading'>
        This is a skeleton text
      </Text>
      <Text isSkeleton>This is a skeleton text</Text>
      <Text isSkeleton variant='small'>
        This is a skeleton text
      </Text>
    </Flex>
  );
};

Props

Prop	Description	Default
variant	Which typography variant/size should be used for the styling? 'headline' = h1, 'title' = h2, 'subheading' = h3, 'leading' = h4, 'body' = normal paragraph text, 'small' = smaller text "body" \| "small" \| "title" \| "headline" \| "subheading" \| "leading"	'body'
isMuted	Show text in muted style. boolean	false
isSkeleton	Use it if you are still loading the content. boolean	false
as	"symbol" \| "object" \| "div" \| "a" \| "abbr" \| "address" \| "area" \| "article" \| "aside" \| "audio" \| "b" \| "base" \| "bdi" \| "bdo" \| "big" \| "blockquote" \| "body" \| "br" \| "button" \| "canvas" \| ... 158 more ... \| FunctionComponent<...>