Actions
A set of components to help compose interfaces with multiple actions.Prop | Required | Description | Type |
|---|---|---|---|
children | ✅ | React children containing Button and ActionsDropdown components. | string | number | false | true | ReactElement<any, string | JSXElementConstructor<any>> | ReactPortal | { key?: string | number; ref?: null; props?: { children?: boolean | ReactChild | ReactPortal | StrictReactFragment; }; } | (boolean | ReactChild | ReactPortal | StrictReactFragment)[] |
orientation | — | Defines the main axis, or how the actions are placed. Defaults to horizontal. | "horizontal" | "vertical" | Partial<Record<"xsmall" | "small" | "medium" | "large" | "xlarge", Orientation>> | Record<"container", Partial<Record<"xsmall" | "small" | "medium" | "large" | "xlarge", Orientation>>> |
inlineFlex | — | Changes the display prop to inline-flex for when this is used inside tables. | boolean |
Prop | Required | Description | Type |
|---|---|---|---|
actions | ✅ | Array of items or grouped items for the user to select from. | (Action | ActionGroup)[] |
disabled | — | Indicate if the whole action dropdown disabled. Defaults to false. | boolean |
align | — | Alignment of the dropdown. Defaults to end. | "start" | "center" | "end" |
side | — | Define which side of the trigger the ActionsDropdown will be displayed. Defaults to bottom. | "top" | "right" | "bottom" | "left" |
size | — | The size of the dropdown button. Defaults to small. | "small" | "medium" |
tone | — | The tone of the dropdown button trigger. Defaults to ghost. | "neutral" | "ghost" |
trigger | — | Render-prop to pass in an element (e.g. Button or AdornmentButton) as the custom trigger for the dropdown. 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. | (ref: RefObject<HTMLButtonElement>, isOpen?: boolean) => Element |