Typography utilities
Alignment
.eui-textLeft
className
Changes the elementβs text alignment to the left/starting side of its container.
tsx code block:<div className="eui-textLeft"> /* Your content */ </div>
tsx code block:<div className="eui-textCenter"> /* Your content */ </div>
.eui-textRight
className
Changes the elementβs text alignment to the right/ending side of its container.
tsx code block:<div className="eui-textRight"> /* Your content */ </div>
Wrapping
euiTextTruncate(maxWidth?)
function
Truncates text at 100% width of its parent and will display an ellipsis.
This utility accepts a single optional parameter for customizing the maximum width of the truncated text. If not passed, it defaults to max-width: 100%;
.
Tip: When truncating text, it is recommended to include the full text within an HTML title attribute or by wrapping the element within an EuiToolTip.
tsx code block:css` ${euiTextTruncate()} `
tsx code block:<div className="eui-textTruncate" title="Your content"> /* Your content */ </div>
euiTextBreakWord()
function
Wraps the text across lines like normal, but forces long words like URLs to break.
tsx code block:css` ${euiTextBreakWord()} `
.eui-textBreakWord
className
Applies the euiTextBreakWord()
styles as an overriding CSS utility class.
tsx code block:<div className="eui-textBreakWord"> /* Your content */ </div>
tsx code block:<div className="eui-textNoWrap"> /* Your content */ </div>
.eui-textBreakAll
className
Wraps the text across lines always forcing the last word on the line to break.
tsx code block:<div className="eui-textBreakAll"> /* Your content */ </div>
.eui-textBreakNormal
className
Reverts the text back to the normal wrapping scheme of not forcing word breaks.
tsx code block:<div className="eui-textBreakNormal"> /* Your content */ </div>
Numbers
euiNumberFormat(euiTheme)
function
Applies font-feature-settings: "tnum";
so that numbers align more properly in a column, especially when right aligned.
tsx code block:css` ${euiNumberFormat(useEuiTheme())} `
tsx code block:<div className="eui-textNumber"> /* Your number content */ </div>
Color
.eui-textInheritColor
className
Forces the component to inherit its text color from its parent.
For changing the color of your text to on of the named colors, use EuiText or EuiTextColor.
I am code
that matches the EuiTextColortsx code block:<EuiTextColor color="danger"> <EuiCode className="eui-textInheritColor">I am danger code</EuiCode> </EuiTextColor>
Size
euiFontSizeFromScale(scale, euiTheme, options?)
function
Calculates font-size values using the theme's scale system for consistent typography.
Accepts a scale key ('xxxs'
, 'xxs'
, 'xs'
, 's'
, 'm'
, 'l'
, 'xl'
, 'xxl'
), the euiTheme
object, and optional parameters for unit or custom scaling.
euiFontSizeFromScale('s')
euiFontSizeFromScale('m')
euiFontSizeFromScale('l')
tsx code block:css` font-size: ${euiFontSizeFromScale('m', euiTheme)}; `
euiLineHeightFromBaseline(scale, euiTheme, options?)
function
Calculates line-height values aligned to the baseline grid for consistent vertical rhythm.
Uses the same scale system as euiFontSizeFromScale
and automatically adjusts to maintain baseline alignment.
euiLineHeightFromBaseline('m')
to align to the baseline grid for consistency.tsx code block:css` line-height: ${euiLineHeightFromBaseline('m', euiTheme)}; `
euiTextShift(fontWeight?, attribute?, euiTheme)
function
Prevents layout shift when changing font-weight on hover or focus. Creates an invisible pseudo-element to reserve space for the bold weight.
Useful for interactive text that changes weight on state changes.
data-text
attribute!This is important for euiTextShift
to work correctly.
euiTextShift
euiTextShift
tsx code block:css` ${euiTextShift('bold', 'data-text', euiTheme)} &:hover { font-weight: ${euiTheme.font.weight.bold}; } `