Toolbar in Angular Grid component

17 Sep 20251 minute to read

Customize the appearance of the toolbar in the Syncfusion Angular Grid component using CSS. The following examples show how to style the toolbar root element and the toolbar button elements.

Customize the Toolbar Root Element

Change the toolbar’s background color with this CSS:

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

The .e-toolbar-items class sets the background color for the toolbar’s root element.

Customize the Toolbar Button Element

Modify the appearance of toolbar buttons using the following CSS:

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

Here, .e-toolbar .e-btn targets the background color of all button elements inside the toolbar.