Overview
Getting Started
Installation
About
Changelog
Core Concepts
Iconography
Layout
Responsive
Theming
Layout Components
Box
Alpha
Container
Alpha
Grid
Alpha
Flex
Alpha
Components
Avatar
Alpha
Button
Alpha
ButtonIcon
Alpha
ButtonLink
Alpha
Card
Alpha
Checkbox
Alpha
Collapsible
Alpha
Header
Alpha
HeaderPage
Alpha
Icon
Alpha
Link
Alpha
Menu
Alpha
RadioGroup
Alpha
SearchField
Alpha
Select
Alpha
Skeleton
Alpha
Switch
Alpha
Table
Alpha
Tabs
Alpha
TagGroup
Alpha
Text
Alpha
TextField
Alpha
Tooltip
Alpha
Version 0.7.0 - Alpha
Text
component

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

PropTypeDefaultResponsive
as
h1h2h3h4h5h6pspanlabeldivstrongemsmall
spanYes
variant
title-largetitle-mediumtitle-smalltitle-x-smallbody-largebody-mediumbody-smallbody-x-small
-Yes
weight
regularbold
-Yes
color
primarysecondarydangerwarningsuccess
primaryYes
truncate
boolean
falseNo
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
A foxA turtle
A foxA turtle
A foxA turtle
A foxA turtle
A foxA turtle
A foxA turtle
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.

Changelog