> For the complete documentation index, see [llms.txt](https://docs.valtimo.nl/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.valtimo.nl/valtimo-docs-v3/nog-een-plek-geven/reference/user-interface/list-with-toolbar-actions.md).

# Toolbar actions list

The CarbonListComponent supports rendering actions in its header. To enable this the following steps must be followed:

1. Add actions in the template:

   **`sample.component.html`**

   ```angular2html
   <valtimo-carbon-list
   [items]="items"
   [fields]="fields"
   >
    <ng-container carbonToolbarContent>
      <button cdsButton="primary" (click)="sampleAction()">
        Sample title
      </button>
    </ng-container>

   </valtimo-carbon-list>
   ```
2. Add handler for action:

   **`sample.component.ts`**

   ```typescript
   ...
   public sampleAction(): void {
      // Code to process action
   }
   ...
   ```

This will create a list with toolbar actions:

![list-with-toolbar-actions.png](https://3348485295-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FGVh8ZudZXQZAtqCQlSKR%2Fuploads%2Fgit-blob-67ebe717d04bd7609e9369c7e4bb007e18c16f02%2Flist-with-toolbar-actions.png?alt=media)