Skip to main content
Elastic UI
Elastic UI
Getting startedComponentsUtilitiesPatternsContentData visualization
EUI ChangelogGitHubFigma
  • Setup
  • Theming
    • Theme provider
    • Tokens
    • Color mode
    • High contrast mode
    • Utilities
      • Breakpoints
      • Colors
      • Typography
  • Working with Emotion
  • Accessibility
  • Testing
  • EUI
  • Theming
  • Utilities
  • Typography

Typography utilities

Alignment

.eui-textLeft className

Changes the element’s text alignment to the left/starting side of its container.

Left align text
βœ„π˜—
tsx code block:
βœ„π˜—<div className="eui-textLeft"> /* Your content */ </div>

.eui-textCenter className

Changes the element’s text alignment to the center of its container.

Center align text
βœ„π˜—
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.

Right align text
βœ„π˜—
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.

This text will not to wrap but truncate beyond the boundaries of the yellow box.
βœ„π˜—
tsx code block:
βœ„π˜—css` ${euiTextTruncate()} `

.eui-textTruncate className

Applies the euiTextTruncate() styles as an overriding CSS utility class.

This text will not to wrap but truncate beyond the boundaries of the yellow box.
βœ„π˜—
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.

This text will wrap like normal but this long link http://www.hithereimalongurl.com/dave_will_just_ramble_on_in_a_long_sentence_like_this/?ok=cool will break mid-word.
βœ„π˜—
tsx code block:
βœ„π˜—css` ${euiTextBreakWord()} `

.eui-textBreakWord className

Applies the euiTextBreakWord() styles as an overriding CSS utility class.

This text will wrap like normal but this long link http://www.hithereimalongurl.com/dave_will_just_ramble_on_in_a_long_sentence_like_this/?ok=cool will break mid-word.
βœ„π˜—
tsx code block:
βœ„π˜—<div className="eui-textBreakWord"> /* Your content */ </div>

.eui-textNoWrap className

Forces text not to wrap even in small containers.

This text will not wrap and will overflow the boundaries of the yellow box.
βœ„π˜—
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.

This text block will wrap, breaking up anything including long URLs http://www.hithereimalongurl.com/dave_will_just_ramble_on_in_a_long_sentence_like_this/?ok=cool and run on strings like this --------------------------------------------------------------------------.
βœ„π˜—
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.

This text block will wrap normally, but will not break long URLs http://www.hithereimalongurl.com/dave_will_just_ramble_on_in_a_long_sentence_like_this/?ok=cool but may break run on strings like this ---------------------------------------------------------------.
βœ„π˜—
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.

Without function
11317.11
0040.900
With function
11317.11
0040.900
βœ„π˜—
tsx code block:
βœ„π˜—css` ${euiNumberFormat(useEuiTheme())} `

.eui-textNumber className

Applies the euiNumberFormat() styles as an overriding CSS utility class.

Without class
11317.11
0040.900
With class
11317.11
0040.900
βœ„π˜—
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 EuiTextColor
βœ„π˜—
tsx 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.

s scale
This text uses euiFontSizeFromScale('s')
m scale
This text uses euiFontSizeFromScale('m')
l scale
This text uses 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.

Regular line-height: 1.5
This text uses a regular line-height of 1.5. Notice how it doesn't align to the baseline grid.
Baseline-aligned line-height
This text uses 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.

Remember to pass data-text attribute!

This is important for euiTextShift to work correctly.

Without euiTextShift
Hover me
- Notice layout shift on hover
With euiTextShift
Hover me
- No layout shift on hover
βœ„π˜—
tsx code block:
βœ„π˜—css` ${euiTextShift('bold', 'data-text', euiTheme)} &:hover { font-weight: ${euiTheme.font.weight.bold}; } `
Edit this page

Previous
Colors
Next
Introduction
  • Alignment
    • .eui-textLeft className
    • .eui-textCenter className
    • .eui-textRight className
  • Wrapping
    • euiTextTruncate(maxWidth?) function
    • .eui-textTruncate className
    • euiTextBreakWord() function
    • .eui-textBreakWord className
    • .eui-textNoWrap className
    • .eui-textBreakAll className
    • .eui-textBreakNormal className
  • Numbers
    • euiNumberFormat(euiTheme) function
    • .eui-textNumber className
  • Color
    • .eui-textInheritColor className
  • Size
    • euiFontSizeFromScale(scale, euiTheme, options?) function
    • euiLineHeightFromBaseline(scale, euiTheme, options?) function
    • euiTextShift(fontWeight?, attribute?, euiTheme) function
EUI is dual-licensed under Elastic License 2.0 and Server Side Public License, v 1 | Crafted with ❀ by Elastic