# Interface: NavigationBarActionButton

Base interface for action buttons in the navigation bar. Contains common properties shared across all action button types.

*   `onClick`: Handler invoked when the button is clicked.
*   `label`: Optional label for the button.
*   `icon`: Optional icon name to display on the button.
*   `variant`: Optional style variant of the button, either ‘regular’ or ‘plain’.
*   `color`: Optional color which can be either ‘accent’ or ‘danger’.
*   `isDisabled`: Optional disabled property.
*   `isLoading`: Optional loading property.

## Extends[#](#extends)

*   [`OrderComponent`](https://img.ly/docs/cesdk/vue/api/cesdk-js/interfaces/ordercomponent/)

## Indexable[#](#indexable)

```
[key: string]: unknown
```

## Properties[#](#properties)

| Property | Type | Overrides | Inherited from |
| --- | --- | --- | --- |
| `id` |  | `"ly.img.back.navigationBar"` | `"ly.img.close.navigationBar"` |
| `onClick` | () => `void` | `Promise`<`void`\> | \- |
| `label?` | `string` | \- | \- |
| `icon?` | `string` | \- | \- |
| `variant?` | `"regular"` | `"plain"` | \- |
| `color?` | `"accent"` | `"danger"` | \- |
| `isDisabled?` | `boolean` | \- | \- |
| `isLoading?` | `boolean` | \- | \- |
| `key?` | `string` | \- | [`OrderComponent`](https://img.ly/docs/cesdk/vue/api/cesdk-js/interfaces/ordercomponent/).[`key`](https://img.ly/docs/cesdk/vue/api/cesdk-js/interfaces/ordercomponent/) |

---



[Source](https:/img.ly/docs/cesdk/vue/api/cesdk-js/interfaces/mediapreviewoptions)