Text

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

• 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.

Loading...

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.

Loading...

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.

Loading...

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.

Loading...

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: "ghost" | "accent" | "accentSecondary" | "success" | "warning" | "danger" | "default" | Color | "subdued" ↦	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: "ghost" | "accent" | "accentSecondary" | "success" | "warning" | "danger" | "default" | Color | "subdued" ↦	Default value default ↵

𐘂𐘂