Expression
Use the EuiExpression component to surface expressions. It requires both a description (left side) and value (right side). Optionally, you can pass it an onClick function that will convert it to a button and add some additional styling to indicate that it is clickable.
Colors
You can pass a color prop but it will only color the description.
Stringing a bunch together
If the expression is more than one description and value, you can string multiple expressions together and they should inline together and wrap at logical points.
Column display
There might be cases where displaying multiple EuiExpressions in a paragraph is not ideal. For example, when both the description and the value are variable or when their text is quite long. To use a column display instead, pass display="columns".
In column display, each expression is its own line and the description column is aligned to the right. The default width for the description is 20%, but you can customize this with thedescriptionWidth prop. When displaying a group of EuiExpressions, make sure to set the same width for all descriptions.
Invalid state
Set isInvalid to true to display EuiExpression's error state. This state will override the color prop with danger.
Truncate text
To truncate EuiExpression's content, pass textWrap="truncate". Text truncation only works properly if the prop types of description and value are strings. If you're using nodes, use the .eui-textTruncate utility class on all their sub-children.
Props
EuiExpression
Prop | Description and type | Default value |
|---|---|---|
Prop description# | Description and type First part of the expression ReactNode | Default value Required |
Prop className# | Description and type Type: string | Default value |
Prop aria-label# | Description and type Defines a string value that labels the current element. 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 descriptionProps# | Description and type Type: CommonProps & HTMLAttributes<HTMLSpanElement> | Default value |
Prop value# | Description and type Second part of the expression ReactNode | Default value |
Prop valueProps# | Description and type Type: CommonProps & HTMLAttributes<HTMLSpanElement> | Default value |
Prop color# | Description and type Color of the "accent" | "primary" | "success" | "warning" | "danger" | "subdued" | Default value success |
Prop uppercase# | Description and type Should the boolean | Default value true |
Prop isActive# | Description and type Adds an solid border at the bottom boolean | Default value false |
Prop onClick# | Description and type Turns the component into a button and adds an editable style border at the bottom MouseEventHandler<HTMLButtonElement> | (MouseEventHandler<HTMLButtonElement> & MouseEventHandler<HTMLSpanElement>) | Default value |
Prop display# | Description and type Sets the display style for the expression. Defaults to "inline" | "columns" | Default value inline |
Prop isInvalid# | Description and type Forces color to display as boolean | Default value false |
Prop descriptionWidth# | Description and type Sets a custom width for the description when using the columns layout. string | number | Default value 20% |
Prop textWrap# | Description and type Sets how to handle the wrapping of long text. "break-word" | "truncate" | Default value break-word |