# toolbar.actions

Part of [Toolbar](https://kernstra.com/docs/web-sdk/config/toolbar) in the Kernstra Web SDK 1.0.0 configuration reference.

- Type: `ToolbarAction[]`
- Page: https://kernstra.com/docs/web-sdk/config/toolbar/actions

Your buttons. Bar: after Print/Download. Ribbon: before them. Give every action an icon. On a compact bar, labels are hidden on all but `primary` actions, and on a narrow or tiny bar on every action: the button shows only its icon (the label stays its tooltip and accessible name). A name such as `'done'` also picks up your `toolbar.icons` replacement for it. Actions are set when the viewer is built and cannot be disabled or relabeled later. A rejected promise from `onClick` is logged and reported through the [`error`](https://kernstra.com/docs/web-sdk/api/events#ev-error) event.

```ts
// Only a "Done" button that uploads to S3
toolbar: {
  print: false,
  download: false,
  actions: [{
    id: 'done',
    label: 'Done',
    icon: 'done',
    variant: 'primary',
    onClick: async () => {
      const exporter = viewer.createExporter();
      const res = await exporter.uploadTo(presignedUrl, { method: 'PUT' });
      // An HTTP error does not reject; a throw here reaches the `error` event.
      if (!res.ok) throw new Error('Upload failed: ' + res.status);
    }
  }]
}
```

### `actions.id`

- Type: `string`
- Required
- Page: https://kernstra.com/docs/web-sdk/config/toolbar/actions-id

Your own name for the action; the SDK uses it only to name the action in an error report.

### `actions.label`

- Type: `string`
- Required
- Page: https://kernstra.com/docs/web-sdk/config/toolbar/actions-label

Button text.

### `actions.icon`

- Type: `string`
- Page: https://kernstra.com/docs/web-sdk/config/toolbar/actions-icon

An `IconName`, or raw SVG markup starting with `<svg`. An action icon that is neither a name nor markup starting with `<svg` draws nothing.

```ts
// Custom SVG icon for an action button
toolbar: {
  actions: [{
    id: 'share',
    label: 'Share',
    icon: '<svg viewBox="0 0 20 20">...</svg>',
    onClick: () => { /* share logic */ }
  }]
}
```

### `actions.variant`

- Type: `'default' | 'primary'`
- Page: https://kernstra.com/docs/web-sdk/config/toolbar/actions-variant

`'primary'` = accent-colored.

- `'default'`: A regular toolbar button.
- `'primary'`: Accent-colored. On a compact bar it is the only action that keeps its label.

### `actions.onClick`

- Type: `() => void | Promise<void>`
- Required
- Page: https://kernstra.com/docs/web-sdk/config/toolbar/actions-onclick

Called when the button is pressed. A rejected promise is logged and reported through the `error` event.

Web page: https://kernstra.com/docs/web-sdk/config/toolbar/actions