Action Bar Items

import { Button, defineDashboardExtension } from '@vendure/dashboard';import { useState } from 'react';defineDashboardExtension({    actionBarItems: [        {            pageId: 'product-detail',            component: ({ context }) => {                // omitted for brevity            },            // highlight-start            position: {                // The ID of the existing action bar item to position relative to                itemId: 'save-button',                // Order can be 'before', 'after' or 'replace'                order: 'after',            },            // highlight-end        },    ],});

import { DropdownMenuItem, defineDashboardExtension } from '@vendure/dashboard';import { useState } from 'react';defineDashboardExtension({    actionBarItems: [        {            pageId: 'product-list',            type: 'dropdown',            component: () => <DropdownMenuItem variant="default">My Item</DropdownMenuItem>,        },    ],});

import { Button, defineDashboardExtension } from '@vendure/dashboard';import { DownloadIcon } from 'lucide-react';defineDashboardExtension({    actionBarItems: [        {            pageId: 'product-detail',            component: ({ context }) => {                const product = context.entity;                const handleExport = async () => {                    // Export product data                    const data = JSON.stringify(product, null, 2);                    const blob = new Blob([data], { type: 'application/json' });                    const url = URL.createObjectURL(blob);                    const a = document.createElement('a');                    a.href = url;                    a.download = `product-${product.id}.json`;                    a.click();                    URL.revokeObjectURL(url);                };                return (                    <Button variant="outline" onClick={handleExport} disabled={!product}>                        <DownloadIcon className="mr-2 h-4 w-4" />                        Export                    </Button>                );            },        },    ],});

import { Button, defineDashboardExtension, toast } from '@vendure/dashboard';import { RefreshCwIcon } from 'lucide-react';import { useState } from 'react';defineDashboardExtension({    actionBarItems: [        {            pageId: 'product-detail',            component: ({ context }) => {                const [isSyncing, setIsSyncing] = useState(false);                const product = context.entity;                const handleSync = async () => {                    if (!product) return;                    setIsSyncing(true);                    try {                        // Simulate API call to external system                        await fetch(`/api/sync-product/${product.id}`, {                            method: 'POST',                        });                        toast.success('Product synced successfully');                    } catch (error) {                        toast.error('Failed to sync product');                    } finally {                        setIsSyncing(false);                    }                };                return (                    <Button variant="outline" onClick={handleSync} disabled={!product || isSyncing}>                        <RefreshCwIcon className={`mr-2 h-4 w-4 ${isSyncing ? 'animate-spin' : ''}`} />                        {isSyncing ? 'Syncing...' : 'Sync to ERP'}                    </Button>                );            },        },    ],});

import { Button, defineDashboardExtension, PermissionGuard } from '@vendure/dashboard';import { SendIcon } from 'lucide-react';defineDashboardExtension({    actionBarItems: [        {            pageId: 'customer-detail',            component: ({ context }) => {                const customer = context.entity;                // Only show for customers with email addresses                if (!customer?.emailAddress) {                    return null;                }                const handleSendEmail = () => {                    // Open email composer or trigger email send                    console.log('Sending email to:', customer.emailAddress);                };                return (                    <PermissionGuard requires={['UpdateCustomer']}>                        <Button variant="outline" onClick={handleSendEmail}>                            <SendIcon className="mr-2 h-4 w-4" />                            Send Email                        </Button>                    </PermissionGuard>                );            },        },    ],});

import { Button, defineDashboardExtension } from '@vendure/dashboard';import { DownloadIcon, RefreshCwIcon, SendIcon } from 'lucide-react';defineDashboardExtension({    actionBarItems: [        {            pageId: 'product-detail',            component: ({ context }) => (                <Button variant="outline">                    <DownloadIcon className="mr-2 h-4 w-4" />                    Export                </Button>            ),        },        {            pageId: 'product-detail',            component: ({ context }) => (                <Button variant="outline">                    <RefreshCwIcon className="mr-2 h-4 w-4" />                    Sync                </Button>            ),        },        {            pageId: 'product-detail',            component: ({ context }) => (                <Button variant="outline">                    <SendIcon className="mr-2 h-4 w-4" />                    Share                </Button>            ),        },    ],});

<Button variant="default">Primary</Button><Button variant="secondary">Secondary</Button><Button variant="outline">Outline</Button><Button variant="ghost">Ghost</Button><Button variant="destructive">Delete</Button>