Text

Usage#

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

<Text>This is a text component</Text>

API reference#

Examples#

All variants#

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

<Flex direction="column" gap="2">
  <Text variant="title-large">Title Large</Text>
  <Text variant="title-medium">Title Medium</Text>
  <Text variant="title-small">Title Small</Text>
  <Text variant="title-x-small">Title X-Small</Text>
  <Text variant="body-large">Body Large</Text>
  <Text variant="body-medium">Body Medium</Text>
  <Text variant="body-small">Body Small</Text>
  <Text variant="body-x-small">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.

<Flex direction="column" gap="2">
  <Text weight="regular">Regular weight</Text>
  <Text weight="bold">Bold weight</Text>
</Flex>

All colors#

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

<Flex direction="column" gap="2">
  <Text color="primary">Primary color</Text>
  <Text color="secondary">Secondary color</Text>
  <Text color="tertiary">Tertiary color</Text>
  <Text color="danger">Danger color</Text>
  <Text color="warning">Warning color</Text>
  <Text color="success">Success color</Text>
</Flex>

Truncate#

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

<div style={{ width: '200px' }}>
  <Text truncate>
    This is a very long text that will be truncated when it exceeds the
    container width
  </Text>
</div>

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