Actionable Item
Props
Name | Type | Default | Description |
---|---|---|---|
id required | string | The id of the component | |
actions | IItemBoxProps[] | [] | The list of actions |
children | ReactNode | ||
className | string | Additional CSS class to add on the outermost container | |
containerClassName | string | Additional CSS class to add on the main item | |
dropProps | Partial<IDropOwnProps> | Overrides for the Drop props | |
onItemClick | (evt?: MouseEvent<HTMLDivElement, MouseEvent>) => any | A function to call when clicking on the button
|
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".