# SplitButton Content Setup

The SplitButton allows you to set the label of its main button through the [`text`](https://www.telerik.com/kendo-vue-ui-develop/components/buttons/api/splitbuttonprops#text) property. You can also add an icon or a custom Vue element after the label through the default slot.

The following demo shows custom elements beside the label and `items` for the popup actions:

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

## Main Button Label

Set the [`text`](https://www.telerik.com/kendo-vue-ui-develop/components/buttons/api/splitbuttonprops#text) property to provide the main SplitButton plain-text label:

```vue
<SplitButton text="Save as" :items="items" />
```

To place an SVG icon, image or custom Vue element next to the label, see [Icon Options](https://www.telerik.com/kendo-vue-ui-develop/components/buttons/splitbutton/icons). Custom elements must use phrasing content and must not contain interactive content.

## Popup Items

The content set through the [`text`](https://www.telerik.com/kendo-vue-ui-develop/components/buttons/api/splitbuttonprops#text) property renders in the main button, not in the popup. Define the popup actions by binding the [`items`](https://www.telerik.com/kendo-vue-ui-develop/components/buttons/splitbutton/data-binding) property to data. For more details, see [Data Binding](https://www.telerik.com/kendo-vue-ui-develop/components/buttons/splitbutton/data-binding).

## Suggested Links

* [API Reference of the SplitButton](https://www.telerik.com/kendo-vue-ui-develop/components/buttons/api/splitbuttonprops)
* [Data Binding](https://www.telerik.com/kendo-vue-ui-develop/components/buttons/splitbutton/data-binding)
* [Icon Options](https://www.telerik.com/kendo-vue-ui-develop/components/buttons/splitbutton/icons)