Increase obviousness of how to remove a term in a term-input

[nilmerg]

At the moment a term can be removed by clicking on it. This must not change. However, the indication of this functionality needs to be improved. Hovering over a term shows a trash icon on the left hand. The color doesn't change.

The trash icon must be shown in the middle over the term and have a reddish color. The term's label must have a grayish color then.

[flourish86]

What do you think of these solutions?

I see some advantages over what you've suggested:

• having a dedicated click area for deletion prevents the user from accidentally removing items
• A label makes it clear what will happen
• The user icon is part of the label and is independent from the delete action

I'm aware of the larger implementation effort, since there are more changes to do. But since we're working on "global" element, I think it's worth it.

1. Compact: Hovering makes delete button appear

Screen.Recording.2025-02-05.at.14.46.25.mov

2. Always visible delete button. In case of Contacts in Notifications we should have enough space

Screen.Recording.2025-02-05.at.14.46.25.mov

If you insist on keeping the whole element clickable for deletion, I'd suggest this design, though.

3. Hover button and label replace label

Screen.Recording.2025-02-05.at.15.05.49.mov

[nilmerg]

I tend to the third solution. Remember, the input variation you showed is arranged vertically. There is a horizontal mode as well, where the width of terms is not that large.