# SplitButton Styling

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

The SplitButton supports the following options for styling its appearance:

* [`className`](https://www.telerik.com/kendo-vue-ui-develop/components/buttons/api/splitbuttonprops#classname)—Applies a CSS class to the SplitButton group.
* [`buttonClass`](https://www.telerik.com/kendo-vue-ui-develop/components/buttons/api/splitbuttonprops#buttonclass)—Applies a CSS class to the main button.

The classes are added to the rendered elements and do not replace their built-in classes. The arrow button has no dedicated class prop. To style it, target its `.k-split-button-arrow` class with a selector scoped to `className`.

The following example styles the main button of one SplitButton with `buttonClass`, and the group and arrow button of another SplitButton with `className`.

[Demo Source](https://demos.telerik.com/kendo-vue-ui/buttons/splitbutton/appearance/custom-styles/source.txt)

## Suggested Links

* [API Reference of the SplitButton](https://www.telerik.com/kendo-vue-ui-develop/components/buttons/api/splitbuttonprops)
* [Appearance](https://www.telerik.com/kendo-vue-ui-develop/components/buttons/splitbutton/appearance)
* [Customization](https://www.telerik.com/kendo-vue-ui-develop/components/buttons/splitbutton/customization)
* [Icon Options](https://www.telerik.com/kendo-vue-ui-develop/components/buttons/splitbutton/icons)