Text

The Text component is used to display content on your page.

A man looks at a painting in a museum and says, “Brothers and sisters I have none, but that man's father is my father's son.” Who is in the painting?

Usage#

import { Text } from '@backstage/ui';

<Text />

API reference#

Prop	Type	Default	Responsive
as	h1h2h3h4h5h6pspanlabeldivstrongemsmall	span	Yes
variant	title-largetitle-mediumtitle-smalltitle-x-smallbody-largebody-mediumbody-smallbody-x-small	-	Yes
weight	regularbold	-	Yes
color	primarysecondarydangerwarningsuccess	primary	Yes
truncate	boolean	false	No
children	ReactNode	-	No
className	string	-	No
style	CSSProperties	-	No

Examples#

All variants#

The Text component has a variant prop that can be used to change the appearance of the text.

A man looks at a painting in a museum and says, “Brothers and sisters I have none, but that man's father is my father's son.” Who is in the painting?A man looks at a painting in a museum and says, “Brothers and sisters I have none, but that man's father is my father's son.” Who is in the painting?A man looks at a painting in a museum and says, “Brothers and sisters I have none, but that man's father is my father's son.” Who is in the painting?A man looks at a painting in a museum and says, “Brothers and sisters I have none, but that man's father is my father's son.” Who is in the painting?A man looks at a painting in a museum and says, “Brothers and sisters I have none, but that man's father is my father's son.” Who is in the painting?A man looks at a painting in a museum and says, “Brothers and sisters I have none, but that man's father is my father's son.” Who is in the painting?A man looks at a painting in a museum and says, “Brothers and sisters I have none, but that man's father is my father's son.” Who is in the painting?A man looks at a painting in a museum and says, “Brothers and sisters I have none, but that man's father is my father's son.” Who is in the painting?

<Flex direction="column" gap="4">
  <Text variant="title-large">...</Text>
  <Text variant="title-medium">...</Text>
  <Text variant="title-small">...</Text>
  <Text variant="title-x-small">...</Text>
  <Text variant="body-large">...</Text>
  <Text variant="body-medium">...</Text>
  <Text variant="body-small">...</Text>
  <Text variant="body-x-small">...</Text>
</Flex>

All weights#

The Text component has a weight prop that can be used to change the appearance of the text.

A foxA turtle

<Flex direction="column" gap="4">
  <Flex>
    <Text variant="title-large" weight="regular">A fox</Text>
    <Text variant="title-large" weight="bold">A turtle</Text>
  </Flex>
  <Flex>
    <Text variant="title-medium" weight="regular">A fox</Text>
    <Text variant="title-medium" weight="bold">A turtle</Text>
  </Flex>
  <Flex>
    <Text variant="title-small" weight="regular">A fox</Text>
    <Text variant="title-small" weight="bold">A turtle</Text>
  </Flex>
  <Flex>
    <Text variant="title-x-small" weight="regular">A fox</Text>
    <Text variant="title-x-small" weight="bold">A turtle</Text>
  </Flex>
  <Flex>
    <Text variant="body-large" weight="regular">A fox</Text>
    <Text variant="body-large" weight="bold">A turtle</Text>
  </Flex>
  <Flex>
    <Text variant="body-medium" weight="regular">A fox</Text>
    <Text variant="body-medium" weight="bold">A turtle</Text>
  </Flex>
  <Flex>
    <Text variant="body-small" weight="regular">A fox</Text>
    <Text variant="body-small" weight="bold">A turtle</Text>
  </Flex>
  <Flex>
    <Text variant="body-x-small" weight="regular">A fox</Text>
    <Text variant="body-x-small" weight="bold">A turtle</Text>
  </Flex>
</Flex>

All colors#

The Text component has a color prop that can be used to change the appearance of the text.

I am primaryI am secondaryI am dangerI am warningI am success

<Flex direction="column" gap="4">
  <Text color="primary">I am primary</Text>
  <Text color="secondary">I am secondary</Text>
  <Text color="danger">I am danger</Text>
  <Text color="warning">I am warning</Text>
  <Text color="success">I am success</Text>
</Flex>

Truncate#

The Text component has a truncate prop that can be used to truncate the text.

A man looks at a painting in a museum and says, “Brothers and sisters I have none, but that man's father is my father's son.” Who is in the painting?

<Text as="p" truncate>...</Text>

Responsive#

You can also use the variant prop to change the appearance of the text based on the screen size.

<Text variant={{ initial: 'body', lg: 'subtitle' }}>
  Responsive text
</Text>

Theming#

Our theming system is based on a mix between CSS classes, CSS variables and data attributes. If you want to customise this component, you can use one of these class names below.

bui-Text
bui-Text[data-variant="subtitle"]
bui-Text[data-variant="body"]
bui-Text[data-variant="caption"]
bui-Text[data-variant="label"]
bui-Text[data-weight="regular"]
bui-Text[data-weight="bold"]
bui-Text[data-color="primary"]
bui-Text[data-color="secondary"]
bui-Text[data-color="danger"]
bui-Text[data-color="warning"]
bui-Text[data-color="success"]
bui-Text[data-truncate="true"]
bui-Text[data-truncate="false"]

Changelog#

0.9.0 - Fixed Text component to prevent truncate prop from being spread to the underlying DOM element. #31615
0.8.2 - Fix default text color in Backstage UI #31429
0.8.2 - Fix the default font size in Backstage UI. #31435
0.8.2 - Fix default font wight and font family in Backstage UI. #31432
0.7.0 - Breaking We are upgrading our Text component to support all font sizes making the Heading component redundant. The new Text component introduces 4 sizes for title and 4 sizes for body text. All of these work in multiple colors and font weights. We improved the as prop to include all possible values. The Link component has also been updated to match the new Text component. #30592
0.7.0 - Breaking We are upgrading our Text component to support all font sizes making the Heading component redundant. The new Text component introduces 4 sizes for title and 4 sizes for body text. All of these work in multiple colors and font weights. We improved the as prop to include all possible values. The Link component has also been updated to match the new Text component. #30592
0.6.0 - Update return types for Heading & Text components for React 19. #30440
0.4.0 - Add truncate prop to Text and Heading #29988
0.4.0 - Improve the way we treat custom render on Text and Heading #29989
0.3.0 - Update textDecoration to none on Text / Heading #29357
0.3.0 - Update textDecoration to none on Text / Heading #29357
0.2.0 - Improve Text styles #29200