ActionBar

@vendure/dashboard Sourcev3.3.0

Allows you to define custom action bar items for any page in the dashboard, which is the top bar that normally contains the main call-to-action buttons such as "update" or "create".

This API also allows you to specify dropdown menu items, which when defined, will appear in a context menu to the very right of the ActionBar.

Signature

interface DashboardActionBarItem {    pageId: string;    component: React.FunctionComponent<{ context: PageContextValue }>;    type?: 'button' | 'dropdown';    requiresPermission?: string | string[];}

pageId

propertystring

The ID of the page where the action bar item should be displayed.

component

propertyReact.FunctionComponent<{ context: PageContextValue }>

A React component that will be rendered in the action bar. Typically, you would use the default Shadcn <Button> component.

type

property'button' | 'dropdown'

Default:'button'

The type of action bar item to display. Defaults to button. The 'dropdown' type is used to display the action bar item as a dropdown menu item.

When using the dropdown type, use a suitable dropdown item component, such as:

Tsx

import { DropdownMenuItem } from '@vendure/dashboard';// ...{  component: () => <DropdownMenuItem>My Item</DropdownMenuItem>}

requiresPermission

propertystring | string[]

Any permissions that are required to display this action bar item.