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};
  }
`