What type of design pattern to use to toggle list actions?

Question

In the design draft pictured below, you can see a number of events in a list. Users reviewing this list want to be able to add events to other lists: a watchlist or send list -- or both. They also want to be able to reverse their actions, so items no longer show up on the list they added events to in the first place.

What is the best design pattern to use to toggle these actions?

FYI: this is not a form, so it is important that these actions can be performed in real time, without pressing 'Submit' first.

Answer 1

I would consider making "Add to watchlist" and "Add to send list" a togglable button:

• Add to watchlist => Remove from watchlist
• Add to send list => Remove from send list

This way you are providing the user with a way to undo their action, while keeping clearly distinguished CTAs.

Then the list could be updated after page refresh.

Additional considerations:

• Add icons like "+" and "x", have a different color for negative state (e.g., red)
• Try to avoid "wiggle/shaking" of UI elements caused by change in button's label length; a shorter "Remove" may work just fine.

Answer 2

Instead of a Button, you can give the Add to Watchlist and Add to Send list as Checkboxes so that they don't have to use a separate button for removing, just unchecking the options will remove it from them. Also, providing a toast message when adding and removing the events list will improve the user experience as well.

Answer 3

1. You can pack activities into a kebab menu
2. You can use clickable chips to place them in a particular list. And delete using either a cross or a button