Text

The Text component uses the Open Sans font family with a variety of sizes and styles.

For more information on how to use the features and props for this component, check out the developer documentation.

The Text component takes a range of variants that correlate to various font sizes. Find more about the variants in the table below.

VariantFont sizeDOM tagStyling
primary14pxspan
secondary13pxspanOpaque font color
h117pxh1Semi-bold
h216pxh2Semi-bold
h315pxh3Semi-bold
h414pxh4Semi-bold
h513pxh5Semi-bold
h612pxh6Semi-bold

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.

NameTypeDefaultDescription
children*ReactNodeText content.
asElementTypeHTML tag or React Component to render the component as.
classNamestringAdditional CSS classes.
forwardedAsElementTypeHTML tag or React Component to finally render the component as.
ref
Ref<HTMLSpanElement |HTMLHeadingElement> 
Ref for the wrapping element.
status
'error' |'warning' |'success' 
Render text with semantic color based on a status.
variant
'primary' |'secondary' |'h1' |'h2' |'h3' |'h4' |'h5' |'h6' 
"primary" Typographical sizes and styles.

You can override the styles of the Text component by setting a custom theme on the Configuration component.

{
        •         '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
        •       }
      •     }
    •   }
}