# SplitButton Styling

The SplitButton allows you to change the appearance of its main button and arrow button depending on the specific project requirements.

The SplitButton supports the following options for styling its appearance:

* [`buttonClass`](https://www.telerik.com/kendo-angular-ui-develop/components/buttons/api/splitbuttoncomponent#buttonclass)—Applies CSS classes to the main button.
* [`arrowButtonClass`](https://www.telerik.com/kendo-angular-ui-develop/components/buttons/api/splitbuttoncomponent#arrowbuttonclass)—Applies CSS classes to the button that opens the popup.

The classes apply to the rendered buttons, not the `<kendo-splitbutton>` host, and do not replace their built-in classes. Both inputs support the same values as Angular's [`NgClass`](https://angular.dev/api/common/NgClass) directive.

The following example applies custom CSS classes to the main button and the arrow button with string and object-map values.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/buttons/splitbutton/styling/source.txt)

## Suggested Links

* [Appearance](https://www.telerik.com/kendo-angular-ui-develop/components/buttons/splitbutton/appearance)
* [API Reference of the SplitButton](https://www.telerik.com/kendo-angular-ui-develop/components/buttons/api/splitbuttoncomponent)
* [Popup Items and Item Templates](https://www.telerik.com/kendo-angular-ui-develop/components/buttons/splitbutton/items-and-templates)
* [Icon Options](https://www.telerik.com/kendo-angular-ui-develop/components/buttons/splitbutton/icons)