vendure/docs/docs/reference/admin-ui-api/action-bar/action-bar-item.md

---

title: "ActionBarItem" isDefaultIndex: false

generated: true

import MemberInfo from '@site/src/components/MemberInfo'; import GenerationInfo from '@site/src/components/GenerationInfo'; import MemberDescription from '@site/src/components/MemberDescription';

ActionBarItem

A button in the ActionBar area at the top of one of the list or detail views.

interface ActionBarItem {
    id: string;
    label: string;
    locationId: ActionBarLocationId;
    disabled?: Observable<boolean>;
    buttonState?: (context: ActionBarContext) => Observable<ActionBarButtonState>;
    onClick?: (event: MouseEvent, context: ActionBarContext) => void;
    routerLink?: RouterLinkDefinition;
    buttonColor?: 'primary' | 'success' | 'warning';
    buttonStyle?: 'solid' | 'outline' | 'link';
    icon?: string;
    requiresPermission?: string | string[];
}

### id A unique identifier for the item. ### label The label to display for the item. This can also be a translation token, e.g. `invoice-plugin.print-invoice`. ### locationId ActionBarLocationId`} /> The location in the UI where this button should be displayed. ### disabled Deprecated since v2.1.0 - use `buttonState` instead. ### buttonState ActionBarContext) => Observable<ActionBarButtonState>`} since="2.1.0" /> A function which returns an observable of the button state, allowing you to dynamically enable/disable or show/hide the button. ### onClick ActionBarContext) => void`} /> ### routerLink RouterLinkDefinition`} /> ### buttonColor ### buttonStyle ### icon An optional icon to display in the button. The icon should be a valid shape name from the [Clarity Icons](https://core.clarity.design/foundation/icons/shapes/) set. ### requiresPermission Control the display of this item based on the user permissions. Note: if you attempt to pass a PermissionDefinition object, you will get a compilation error. Instead, pass the plain string version. For example, if the permission is defined as: ```ts export const MyPermission = new PermissionDefinition('ProductReview'); ``` then the generated permission strings will be: - `CreateProductReview` - `ReadProductReview` - `UpdateProductReview` - `DeleteProductReview`