Skip to main content

ActionBarItem

ActionBarItem

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

Signature
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

property
string

A unique identifier for the item.

label

property
string

The label to display for the item. This can also be a translation token, e.g. invoice-plugin.print-invoice.

locationId

The location in the UI where this button should be displayed.

disabled

property
Observable<boolean>

Deprecated since v2.1.0 - use buttonState instead.

buttonState

property
v2.1.0
(context: ActionBarContext) => Observable<ActionBarButtonState>

A function which returns an observable of the button state, allowing you to dynamically enable/disable or show/hide the button.

onClick

property
(event: MouseEvent, context: ActionBarContext) => void

buttonColor

property
'primary' | 'success' | 'warning'

buttonStyle

property
'solid' | 'outline' | 'link'

icon

property
string

An optional icon to display in the button. The icon should be a valid shape name from the Clarity Icons set.

requiresPermission

property
string | string[]

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:

export const MyPermission = new PermissionDefinition('ProductReview');

then the generated permission strings will be:

  • CreateProductReview
  • ReadProductReview
  • UpdateProductReview
  • DeleteProductReview