Use this component only if all other Halstack Design System components for adding text DO NOT meet your requirements. This component should always be the LAST OPTION to use.


display'inline' | 'block'Specifies the display CSS property of the component.'inline'
colorstringColor of the text.'#000000'
fontFamily'Open Sans, sans-serif' | 'Source Code Pro, monospace'Specifies the font-family CSS property of the component.'Open Sans, sans-serif'
fontSize'0.75rem' | '0.875rem' | '1rem' | '1.25rem' | '1.5rem' | '2rem' | '3rem' | '3.75rem'Specifies the font-size CSS property of the component.'1rem'
fontStyle'normal' | 'italic'Specifies the font-style CSS property of the component.'normal'
fontWeight'300' | '400' | '600' | '700'Specifies the font-weight CSS property of the component.'400'
letterSpacing'-0.025em' | '-0.0125em' | '0em' | '0.025em' | '0.05em' | '0.1em'Specifies the letter-spacing CSS property of the component.'0em'
lineHeight'1em' | '1.25em' | '1.365em' | '1.5em' | '1.715em' | '2em'Specifies the line-height CSS property of the component.'1.5em'
textAlign'left' | 'center' | 'right'Specifies the text-align CSS property of the component.'left'
textDecoration'none' | 'underline' | 'line-through'Specifies the text-decoration CSS property of the component.'none'
textOverflow'clip' | 'ellipsis' | 'unset'Specifies the text-overflow CSS property of the component.'unset'
whiteSpace'normal' | 'nowrap' | 'pre' | 'pre-line' | 'pre-wrap'Specifies the white-space CSS property of the component.'normal'
React.ReactNodeCustom text.-
askeyof HTMLElementTagNameMapDetermines the HTML tag with which the text is to be rendered (any valid HTML tag).'span'


Basic usage

Nested texts