| Variant | Font size | DOM tag | Styling |
|---|---|---|---|
primary | 14px | span | |
secondary | 13px | span | Opaque font color |
h1 | 17px | h1 | Semi-bold |
h2 | 16px | h2 | Semi-bold |
h3 | 15px | h3 | Semi-bold |
h4 | 14px | h4 | Semi-bold |
h5 | 13px | h5 | Semi-bold |
h6 | 12px | h6 | Semi-bold |
Text
core package3.2.2
Note: All components shown on this site are supported by the Constellation design system. To learn how to configure Theme Cosmos, visit Pega Community.
The Text component uses the Open Sans font family with a variety of sizes and styles.
Usage
The Text component takes a range of variants that correlate to various font sizes. Find more about the variants in the table below.
Text can also be styled to reflect status. This will change the color of the Text. The secondary variant also has a more opaque font color than the rest.
Example
Related components
Properties
| Name | Description | Default | Type |
|---|---|---|---|
children* | Text content. | | ReactNode |
as | HTML tag or React Component to render the component as. | | ElementType<any> |
className | Additional CSS classes. | | string |
forwardedAs | HTML tag or React Component to finally render the component as. | | ElementType<any> |
ref | Ref for the wrapping element. | | Ref<HTMLHeadingElement |HTMLSpanElement> |
status | Render text with semantic color based on a status. | | 'error' |'success' |'warning' |
variant | Typographical sizes and styles. | "primary" | 'h1' |'h2' |'h3' |'h4' |'h5' |'h6' |'primary' |'secondary' |
Custom theming
You can override the styles of the Text component by setting a custom theme on the Configuration component.
Example
PrimarySecondary
h1
h2
h3
h4
h5
h6
Theme properties
{
'font-size':'s','font-weight':'base.font-weight.normal'// → base.font-weight.normal},
'font-size':'xs','font-weight':'base.font-weight.normal'// → base.font-weight.normal},
'font-size':'xl','font-weight':'base.font-weight.semi-bold'// → base.font-weight.semi-bold},
'font-size':'l','font-weight':'base.font-weight.semi-bold'// → base.font-weight.semi-bold},
'font-size':'m','font-weight':'base.font-weight.semi-bold'// → base.font-weight.semi-bold},
'font-size':'s','font-weight':'base.font-weight.semi-bold'// → base.font-weight.semi-bold},
'font-size':'xs','font-weight':'base.font-weight.semi-bold'// → base.font-weight.semi-bold},
'font-size':'xxs','font-weight':'base.font-weight.semi-bold'// → base.font-weight.semi-bold}}}}