Form

Actionable Item

An actionable item is a dropdown menu listing actions associated with an element.
View source
click on the dots
1
import {ActionableItem} from '@coveord/plasma-react';
2


3
export default () => (
4
    <ActionableItem
5
        id="🆔"
6
        onItemClick={() => alert('you triggered the main button')}
7
        actions={[
8
            {value: 'action 1', onOptionClick: () => alert('you triggered the first action')},
9
            {value: 'action 2', onOptionClick: () => alert('you triggered the second action')},
10
        ]}
11
    >
12
        click on the dots
13
    </ActionableItem>
14
);

Props

NameTypeDefaultDescription
idrequiredstring
The id of the component
actionsIItemBoxProps[][]
The list of actions
childrenReactNode
classNamestring
Additional CSS class to add on the outermost container
containerClassNamestring
Additional CSS class to add on the main item
dropPropsPartial<IDropOwnProps>
Overrides for the Drop props
onItemClick(evt?: MouseEvent<HTMLDivElement, MouseEvent>) => any
A function to call when clicking on the button
  • evt–the 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.

Labeling

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