Text

EuiText is a generic catchall wrapper that will apply our standard typography styling and spacing to naked HTML. Because of its forced style it only accepts raw XHTML.

When using EuiText, keep in mind:

When using EuiText, keep in mind:

All your XHTML elements should be direct descendants of EuiText. You should avoid wrapping them in a div or span. This will ensure styles are applied correctly.
Avoid nesting React components which would break their styling.

EuiText can ensure proper line-length for readability by setting a max-width on the entire component. To add the max-width setting, set grow=false.

Text can come in various sizes

Using the size prop on EuiText you can get smaller sizes of text than the default. This demo compares the scaling for all sizes. The goal is that the every line-height lands on the 4px baseline grid.

Coloring text

There are two ways to color text. Either individually by applying EuiTextColor on individual text objects, or by passing the color prop directly on EuiText for a blanket approach across the entirety of your text.

Alignment

There are two ways to align text. Either individually by applying EuiTextAlign on individual text objects, or by passing the textAlign prop directly on EuiText for a blanket approach across the entirety of your text.

Props

EuiText

Extends HTMLAttributes


Prop	Description and type	Default value
Prop className#	Description and type Type: `string`	Default value
Prop aria-label#	Description and type Defines a string value that labels the current element. @see aria-labelledby. Type: `string`	Default value
Prop data-test-subj#	Description and type Type: `string`	Default value
Prop css#	Description and type Type: `Interpolation<Theme>`	Default value
Prop component#	Description and type The HTML element/tag to render. Use with care when nesting multiple components to ensure valid XHTML: `<div>` and other block tags are not valid to use inside `<p>`. If using the `<p>` tag, we recommend passing strings/text only. `<span>` is valid to be nested in any tag, and can have any tag nested within it. Type: `"div" \| "p" \| "span"`	Default value `div`
Prop color#	Description and type Any of our named colors or a `hex`, `rgb` or `rgba` value. Type: `"accent" \| "success" \| "warning" \| "danger" \| "default" \| Color \| "subdued" \| "ghost"`	Default value `inherit`
Prop textAlign#	Description and type Applies horizontal text alignment Type: `"center" \| "left" \| "right"`	Default value `left`
Prop size#	Description and type Determines the text size. Choose `relative` to control the `font-size` based on the value of a parent container. Type: `"xs" \| "s" \| "m" \| "relative"`	Default value `m`
Prop grow#	Description and type Type: `boolean`	Default value `true`

EuiTextAlign

Extends HTMLAttributes


Prop	Description and type	Default value
Prop className#	Description and type Type: `string`	Default value
Prop aria-label#	Description and type Defines a string value that labels the current element. @see aria-labelledby. Type: `string`	Default value
Prop data-test-subj#	Description and type Type: `string`	Default value
Prop css#	Description and type Type: `Interpolation<Theme>`	Default value
Prop component#	Description and type The HTML element/tag to render. Use with care when nesting multiple components to ensure valid XHTML: `<div>` and other block tags are not valid to use inside `<p>`. If using the `<p>` tag, we recommend passing strings/text only. `<span>` is valid to be nested in any tag, and can have any tag nested within it. Type: `"div" \| "p" \| "span"`	Default value
Prop cloneElement#	Description and type Applies text styling to the child element instead of rendering a parent wrapper. Can only be used when wrapping a single child element/tag, and not raw text. Type: `boolean`	Default value `false`
Prop textAlign#	Description and type Applies horizontal text alignment Type: `"center" \| "left" \| "right"`	Default value `left`

EuiTextColor

Extends HTMLAttributes


Prop	Description and type	Default value
Prop className#	Description and type Type: `string`	Default value
Prop aria-label#	Description and type Defines a string value that labels the current element. @see aria-labelledby. Type: `string`	Default value
Prop data-test-subj#	Description and type Type: `string`	Default value
Prop css#	Description and type Type: `Interpolation<Theme>`	Default value
Prop component#	Description and type The HTML element/tag to render. Use with care when nesting multiple components to ensure valid XHTML: `<div>` and other block tags are not valid to use inside `<p>`. If using the `<p>` tag, we recommend passing strings/text only. `<span>` is valid to be nested in any tag, and can have any tag nested within it. Type: `"div" \| "p" \| "span"`	Default value
Prop cloneElement#	Description and type Applies text styling to the child element instead of rendering a parent wrapper. Can only be used when wrapping a single child element/tag, and not raw text. Type: `boolean`	Default value `false`
Prop color#	Description and type Any of our named colors or a `hex`, `rgb` or `rgba` value. Type: `"accent" \| "success" \| "warning" \| "danger" \| "default" \| Color \| "subdued" \| "ghost"`	Default value `default`

Text can come in various sizes.css-1pgbpvp{-webkit-margin-start:8px;margin-inline-start:8px;opacity:0;}.css-1pgbpvp:focus,.heading:hover .css-1pgbpvp{opacity:1;}

Coloring text

Alignment

Props

Text can come in various sizes