Actionable Item

An actionable item is a dropdown menu listing actions associated with an element.

View source


The id of the component
The list of actions
Additional CSS class to add on the outermost container
Additional CSS class to add on the main item
Overrides for the Drop props
onItemClick(evt?: MouseEvent<HTMLDivElement, MouseEvent>) => any
A function to call when clicking on the button
  • evtthe mouse event

Best Practices

Use an actionable item when your page offers actions that are of secondary importance and that don't need to be displayed directly on the page.

An actionable item must be displayed upon the click of a button.

An actionable item must be contextual and suited to the user's needs based on their selection.

Use a divider line to divide actions into logical groups.


Keep labels short, preferably under three words. Use trigger words to clearly indicate the action performed by the button. A trigger word is typically a verb that influences users into clicking due to its specificity. For example, use "View profile" rather than "Open profile", and "Create playlist" rather than "Save".

The first word of the label should be a verb. If adding a noun is required for context, avoid including an article. For example, write "Add filter" rather than "Add a filter".

Edit guidelines