💬 Proposal: Support "danger" color styling in EuiContextMenuItem for destructive actions

[weronikaolejniczak]

Context

While working on the Search Query Rules UI, the team wanted to highlight destructive actions (e.g., "Delete") using the danger color. During implementation, they observed that passing color: 'danger' only applies styling if the action is rendered as an EuiButtonIcon with isPrimary: true. This color does not carry over to EuiContextMenuPanel > EuiContextMenuItem.

Current behavior

This appears to be the expected behavior in EUI currently. For example, in the Row actions documentation (toggle the "Multiple actions" switch), the hover state shows a styled trash icon but when those actions are moved into a context menu, the "Delete" item is plainly styled.

Workaround

However, coloring can be achieved using a custom render with e.g. EuiLink:

<EuiLink onClick={() => deleteUser(user)} color="danger">
  Delete
</EuiLink>

as shown by the example (toggle the "Custom actions" switch). This approach works as a workaround if custom rendering is acceptable and approved by designers.

The workaround works but comes with limitations:

• There's inconsistency between how actions are rendered in the primary row vs. in the context menu.
• It requires additional code, while passing color: 'danger' is much simpler.

Design consideration

Destructive actions highlighted in red are a common UI pattern. In fact, our Figma library currently supports this design approach. Adding official support for color: "danger" in EuiContextMenuItem would make this more consistent and reusable across use cases.

Proposal

Let’s define next steps and design/technical requirements for supporting color: "danger" in EuiContextMenuItem.

We'd have to update EUI documentation to reflect guidance around destructive actions in context menus: EuiBasicTable and EuiContextMenu.

Would love to hear from maintainers and designers (@ryank, @kate.s, @elastic/eui-team and others) before proceeding with a formal implementation or workaround. Should this be part of EUI’s supported patterns?

[weronikaolejniczak]

@JoseLuisGJ @ek-so @ryankeairns bump

[ek-so]

I'm wondering if we actually highlight those kind of actions only on hover? (e.g. like Notion does: one / two).
Purpose being — to reduce the number of colors and perceived complexity, but at the same time highlight the danger of action...
What do you all think?

[ryankeairns]

Sounds good to me. It may be introducing a new pattern for us to slowly integrate elsewhere, in other UI elements, but we can't stay the same forever ;)

To clarify, I don't mean to imply we must find and replace all similar examples just that we will probably won't to evolve to this elsewhere.

[weronikaolejniczak]

@ek-so you mean change the style to danger on hover?