Actions
A set of components to help compose interfaces with multiple actions.The <ActionsGroup /> component is used to achieve consistent spacing between actions.
- When used in a table cell, pass the inlineFlex prop.
- Pass orientation="vertical" if you need to stack the actions vertically. Defaults to horizontal.
The <ActionsDropdown /> component displays a list of actions. A selection triggers the action immediately.
Use when there is limited space and you need to display overflow actions in a list. For example, it can be used in the BulkActionBar, or for table inline actions.
Consider using a SelectDropdown if the selected option is used to filter or sort existing content.
Use the actions prop to define the list of actions.
This prop takes an array of type Action – or ActionGroup if grouped actions are needed – which can be imported from the package. Define at least a label and onClick for each item in the array.
Define an icon for each action only when absolutely necessary; when adding essential value and having a strong association with the label. Avoid using icons just for decoration, or mixing and matching icon use; that’s to say, if using an icon in one action item, use icons in all items.
Use radioOptions to define a group of radio buttons. This prop takes an array of RadioActionOptions. Each option takes a label and value - and determines it's checked state by matching the value field in the Action parent object.
Using radio buttons should in ActionGroup should be restricted to behaviour with limited options and immediate effect, as the popover will be dismissed when a radio button is clicked.
Use grouped actions to create logical groupings within the dropdown. If needed, define a label that describes the group of actions clearly.
Alternatively, if no label is defined, sections are grouped with just dividers.
By default, the actions in the dropdown list are of neutral tone.
For a critical action, define tone: 'critical' to provide an immediate visual indication that the action is destructive. Additionally, it's recommended to define the action's label to something commonly understood as destructive (e.g., "Delete" or "Deactivate").
Prefer placing it as the last action in the list, and if possible, avoid having more than one critical action in the same dropdown.
When an action can only be used sometimes, under certain conditions, it should be displayed as disabled rather than removing it from the list.
Define isDisabled: true to disable the action.
When an action is used to navigate the user to a different page, an href can be specified to take the user to another url.
Define href: "url" to specify where the link should take the user to.
Out-of-the-box, the actions dropdown comes with a default button to trigger its open state. It uses an OverflowVerticalIcon alongside a visually hidden text label of "More actions" to communicate that more options can be accessed.
You also can pass your own button via the trigger prop. This is a render function that takes three arguments; ref, isOpen and disabled, and returns a JSX.Element.
- ref needs to be passed to your button component for positioning.
- isOpen can be passed if you want to change something in the button when the dropdown is open.
- disabled can be passed if the trigger need to be disabled.
It's recommended to use an Button of either neutral or ghost tone if custom trigger is used.
When the action label text is too long for the available horizontal space, the overflowing text wraps to the next line. Prefer clear and concise labels.