Why is the parent a button to begin with?

So that the user can click on it to show the list:

While I have reservations about this behavior as it's a very convoluted UX you can just replace all the actions inside with links.

Which would make it even possible to prefetch those underlying pages if need be.

Actually I'm not sure without testing whether that's legal either.

The usage of this is for creating a preset of options to apply. The actions inside the list are fine. The issue is with the button that shows the list (the button at the very top of the screenshot), which itself contains the save, edit, delete, buttons.

While I solved the warning by making those to be divs instead of buttons, with the same styling, I do want to explore the reasoning behind this warning and understand if I should change the design from a UX perspective, rather than fix it by using a div imitating a button.

If I were to follow the warning's advice, it would have to look like this, which I don't think looks really good. The next option, is to just entirely remove those buttons, but it removes the needed convenience of quickly modifying the selected option without first needing to open the list.

Having actions crammed inside the select trigger is very annoying because it's inaccessible due to it being hard to distinguish what you are clicking on, especially when you click in-between two actions. The most elegant way would be to have the chevron be the trigger for the dropdown of the select and thus not need to nest buttons inside the parent button.

Basically

<div class="select-trigger">
  Example
  <button />
  <button />
  <button />
  <button />
</div>

You will not be able to open the dropdown by clicking on the "Example" text but the actions are separate and way more accessible.

Having these actions visible at all times and not just within the dropdown is also unconventional.

this is confusing, what does the "copy" button do thats on the dropdown?

If you mean the floppy disk icon, that's the save button

yeah

what does that do

in the dropdown

as well as the edit and trash icon

is it to delete and edit the whole array?

Referring to the "select trigger", it would perform the actions on the currently selected option, in this case "Example".

well in that case you dont need to put "Save" "edit" and "Delete" in each of the drop down's list right?

just select first and save, or select first then edit, or select first then delete

I suppose, but the intention was to minimize the amount of clicks needed to perform an action. This was the intention with having the action buttons visible in the "select trigger", so you could quickly save/modify the currently selected option without needing to first click to see the dropdown.

In the end, the answer depends on the rest of the application and how it's intended to be used. Thanks both for your feedback.

glad i could help in some way