Typography component with variants, weights, colors, and semantic elements.
import { Text } from '@backstage/ui';
<Text>This is a text component</Text>| Prop | Type | Default | Description |
|---|---|---|---|
| variant | title-largetitle-mediumtitle-smalltitle-x-smallbody-largebody-mediumbody-smallbody-x-small | body-medium | Typography style. Title variants for headings, body for paragraph text. |
| weight | regularbold | regular | Font weight. Use bold for emphasis. |
| color | primarysecondarydangerwarningsuccess | primary | Text color. Status colors (danger, warning, success) for contextual messaging. |
| as | h1h2h3h4h5h6pspanlabeldivstrongemsmalllegend | span | HTML element to render. Use heading tags for semantic structure. |
| truncate | boolean | false | Truncates text with ellipsis when it overflows its container. Requires display: block to work. |
| children | ReactNode | - | |
| className | string | - | Additional CSS class name for custom styling. |
| style | CSSProperties | - | Inline CSS styles object. |
Status colors for contextual messaging.
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-Textbui-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-color="info"]bui-Text[data-truncate="true"]bui-Text[data-truncate="false"]