Skip to main content

DashboardActionBarItem

DashboardActionBarItem​

@vendure/dashboardlayout.ts
v3.3.0

Status: Developer Preview

Allows you to define custom action bar items for any page in the dashboard.

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

pageId​

property
string

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

component​

property
React.FunctionComponent<{ context: PageContextValue }>

A React component that will be rendered in the action bar.

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:

import { DropdownMenuItem } from '@vendure/dashboard';

// ...

{
  component: () => <DropdownMenuItem>My Item</DropdownMenuItem>
}

requiresPermission​

property
string | string[]

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