---
layout: post
title: Angular Grid - Toolbar Style | Syncfusion
description: Angular Grid toolbar style explains styling toolbar items, templates, and layout options to present actionable controls consistently.
platform: grid-sdk
control: Toolbar 
documentation: ug
domainurl: https://help.syncfusion.com/grid-sdk
---

# Toolbar Customization in Angular Grid Component

The appearance of the toolbar in the [Angular Data Grid](https://www.syncfusion.com/angular-components/angular-data-grid) component can be customized using CSS. Here are examples for customizing the toolbar root element and toolbar button element.

## Customize the toolbar root element

The `.e-toolbar-items` class is used to style the toolbar root element.

```css
.e-grid .e-toolbar-items {
    background-color: #deecf9;
}
```

![Grid toolbar root element](../images/grid-toolbar-root-element.png)

## Customize the toolbar button element

The `.e-toolbar .e-btn` selector is used to style the toolbar button elements.

```css
.e-grid .e-toolbar .e-btn {
    background-color: #deecf9;
}
```

![Grid toolbar button element](../images/grid-toolbar-button-element.png)