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.