Good place to put delete button for accordion?

Question

I want to incorporate a delete button/option on an accordion (I don't want the delete button to be hidden to users since it's important for the function of my design.)

Currently, I'm not sure of a good place to put it without bloating the accordion.

In the screenshot:

Option 1 has the delete embedded in the "more options" kebab, but I'm not sure if users will find it obvious to delete.

Option 2 places the delete, next to the dropdown, but then it's unclear where to put a duplicate option.

Option 3 places all the icons on the accordion, but I'm weary it might look too bloated.

Option 4 places the delete on the left side, but my concern is that this design isn't as conventional.

What are your thoughts? Maybe there's a possibility of embedding delete or duplicate options within the expanded accordion?

Answer 1

Asking your users how they make decisions on an entity will give you an answer....

Option 1: Separates view manipulation (expand/collapse) from CRUD actions (duplicate + delete).

Using option 1 hides functionality, but makes it less likely for users to trigger an action due to slips of the cursor. This can prevent errors, but assumes they know enough without expanding the pane to act on it.

Option 5: Embedding actions within the accordion content pane This option comes down to what users need to know before deleting or duplicating.

• Does the title of a collapsed accordion give them enough info to know if they should take action?
• or, do they need to examine the contents of an object to understand if it's actionable?

Answer 2

There are multiple ways to solve this, and the solution largely depends on the context & which action the user will use frequently. To create a more flexible layout for accordion will be to move the chevron(^) to the left along with the name. Free-up the space for other actions on the right. If delete is the primary action, keep the icon outside & the other actions be it duplicate or anything else can be inside the kebab menu.

Additional tips:

1. Use different states for expanded & collapsed accordion.
2. Use trash icon instead of "x". People sometimes confuse "x" with close
3. If Delete is the primary action, make sure you get a confirmation from the user before it gets deleted.

For fun you can read https://www.nngroup.com/articles/accordions-complex-content/ to get more insights :)