# Toolbar Items

The AIPrompt gives the user the option to add Toolbar Items that display in the header Toolbar. They will be rendered after the items generated from the configurations of the views.

![Toolbar Item](https://www.telerik.com/products/aspnet-ajax/documentation/assets/0f6f440a730bfdb9e01c3cc9597556f1/toolbar-item.png "Toolbar Item")

## Options

* [Type](https://www.telerik.com/products/aspnet-ajax/documentation/controls/aiprompt/toolbar-items#type)
* [Icon](https://www.telerik.com/products/aspnet-ajax/documentation/controls/aiprompt/toolbar-items#icon)
* [Click](https://www.telerik.com/products/aspnet-ajax/documentation/controls/aiprompt/toolbar-items#click)

### Type

Set the Type of the Toolbar Item. Available options are `Spacer` and `Button`.

### Icon

Sets the icon of the Toolbar Item. For a full list of icons, please check the [Progress Design System Kit](https://www.telerik.com/design-system/docs/foundation/iconography/icon-list/)

### Click

Set a function to the Toolbar Item.

## Create Toolbar Items

### In the Markup

> caption Example: Add a spacer and button to the AIPrompt toolbar

```ASP.NET
<telerik:RadAIPrompt runat="server" ID="RadAIPrompt1" Width="400px">
    <ToolbarItems>
        <telerik:AIPromptToolbarItem Type="Spacer" />
        <telerik:AIPromptToolbarItem Type="Button" Icon="x" Click="onClick" />
    </ToolbarItems>
</telerik:RadAIPrompt>
```

### In the CodeBehind

> caption Example: Create AIPrompt toolbar items in code

```C#
protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        // Add a spacer before the custom toolbar button.
        AIPromptToolbarItem toolbarItem = new AIPromptToolbarItem()
        {
            Type = AIPromptToolbarItemType.Spacer
        };

        RadAIPrompt1.ToolbarItems.Add(toolbarItem);

        toolbarItem = new AIPromptToolbarItem()
        {
            Type = AIPromptToolbarItemType.Button,
            Icon = "x",
            Click = "onClick"
        };

        RadAIPrompt1.ToolbarItems.Add(toolbarItem);
    }
}
```

```VB
Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)
    If Not IsPostBack Then
        ' Add a spacer before the custom toolbar button.
        Dim toolbarItem As AIPromptToolbarItem = New AIPromptToolbarItem() With {
            .Type = AIPromptToolbarItemType.Spacer
        }

        RadAIPrompt1.ToolbarItems.Add(toolbarItem)

        toolbarItem = New AIPromptToolbarItem() With {
            .Type = AIPromptToolbarItemType.Button,
            .Icon = "x",
            .Click = "onClick"
        }

        RadAIPrompt1.ToolbarItems.Add(toolbarItem)
    End If
End Sub
```

```JavaScript
// Handle clicks from the custom toolbar button.
function onClick() {
    console.log("Click");
}
```

## Next Steps

* [Integration with OpenAI API](https://www.telerik.com/products/aspnet-ajax/documentation/knowledge-base/aiprompt-integration-with-openai)
* [Client-side Programming](https://www.telerik.com/products/aspnet-ajax/documentation/controls/aiprompt/client-side-programming/overview)
* [Server-side Programming](https://www.telerik.com/products/aspnet-ajax/documentation/controls/aiprompt/server-side-programming/overview)