# RadToolBar Item Editor The **RadToolBar Item Editor** lets you populate your toolbar with buttons. There are two ways to bring up the RadToolBar Item Editor: * From the **RadToolBar** [ Smart Tag ](https://www.telerik.com/products/aspnet-ajax/documentation/controls/toolbar/design-time/smart-tag), click on the **Build RadToolBar** link. * Right-click on the **RadToolBar** component and select **Build RadToolBar** from its context menu. ## RadToolBar Item Editor ![toolbar itemeditor](https://www.telerik.com/products/aspnet-ajax/documentation/assets/79aa27ec66905dfda669a84bfafce361/toolbar_itemeditor.png) The **RadToolBar Item Editor** lets you add, rearrange, configure, and delete buttons on the toolbar. These actions are initiated using the toolbar at the upper left of the Item Editor: ![ToolBar Item Builder Buttons](https://www.telerik.com/products/aspnet-ajax/documentation/assets/0f7f7ce2da3f156afd9c8290d753b1ba/toolbar_itembuildertoolbar.png) The following table describes the controls in the toolbar: | Button | Function | | ----------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------- | | ![ToolBar Add Button](https://www.telerik.com/products/aspnet-ajax/documentation/assets/26937c6391f37b617152293576b3daaa/toolbar_addtoolbutton.png) | Adds a **RadToolBarButton** to the toolbar in the next available position. | | ![ToolBar Add Drop Down Button](https://www.telerik.com/products/aspnet-ajax/documentation/assets/847b72e21306fd0c54940ccae5d3c6fa/toolbar_adddropdownbutton.png) | Adds a **RadToolBarDropDown** to the toolbar in the next available position. | | ![ToolBar Add Split Button](https://www.telerik.com/products/aspnet-ajax/documentation/assets/3020317447b6e135e26544dccae5249d/toolbar_addsplitbutton.png) | Adds a **RadToolBarSplitButton** to the toolbar in the next available position. | | ![ToolBar Add Child Button](https://www.telerik.com/products/aspnet-ajax/documentation/assets/99bf08890bc3c9e8e8057fb340f855ec/toolbar_addchildbutton.png) | Adds a **RadToolBarButton** to the end of the drop-down list for the currently selected **RadToolBarDropDown** or **RadToolBarSplitButton** . | | ![Toolbar Delete Button](https://www.telerik.com/products/aspnet-ajax/documentation/assets/c975a741738f8d0ce3dde95923beedc8/toolbar_deletebutton.png) | Deletes the currently selected button from the toolbar or drop-down list. | | ![ToolBar Move Up Button](https://www.telerik.com/products/aspnet-ajax/documentation/assets/67d6d73a61e0951dccb27f4098e50d3e/toolbat_movebuttonup.png) | Moves the currently selected button backward in the toolbar or drop-down list so that it precedes the previous sibling. | | ![ToolBar Move Down Button](https://www.telerik.com/products/aspnet-ajax/documentation/assets/e55d84c12aaa67b031f0ee34598cb48b/toolbar_movebuttondown.png) | Moves the currently selected tab forward in the toolbar or drop-down list, so that it follows the next sibling. | When a button is selected, the properties pane on the right of the **RadToolBar Item Editor** lets you configure the item by setting its properties. For each button, * **Text** is the text that appears on the button. * **ToolTip** is the text of a tooltip that appears when the user hovers the mouse over the button. * **Enabled** controls whether the button is initially enabled or disabled. * **CssClass**, **OuterCssClass**, **FocusedCssClass**, **DisabledCssClass**, **HoveredCssClass**, and **ClickedCssClass** [control the appearance of the button](https://www.telerik.com/products/aspnet-ajax/documentation/controls/toolbar/appearance-and-styling/setting-the-css-class-of-buttons) when it is in its normal state, has focus, is disabled, is under the mouse, and is clicked, respectively.(**RadToolBarButton** has an additional property, **CheckedCssClass**, for when it is checked). * **ImageUrl**, **FocusedImageUrl**, **DisabledImageUrl**, **HoveredImageUrl**, and **ClickedImageUrl** let you [add an image](https://www.telerik.com/products/aspnet-ajax/documentation/controls/toolbar/appearance-and-styling/adding-images-to-buttons) that appears next to the button text when it is in its normal state, focused, disabled, under the mouse, or clicked, respectively. (**RadToolBarButton** has an additional property, **CheckedImageUrl**, for supplying an image when the button is checked.) * **ImagePosition** lets you specify where the image appears relative to the text of the button. In addition to these properties, which are common to all types of buttons, **RadToolBarButton** and **RadToolBarSplitButton** support some additional properties: * **Value** is a string value that you can associate with the button for use when programming the button behavior. * **CommandName** and **CommandArgument** let you associate a command with the button. * **NavigateUrl** and **Target** cause the tab to automatically launch another Web page (specified by **NavigateUrl**) in the window specified by **Target**. If the **Target** property is not set, the new Web page uses the current browser window. * **PostBack** and **PostBackUrl** specify whether the button causes a postback when clicked, and the URL of the page that is the target of that postback. * **EnableDefaultButton** and **DefaultButtonIndex** let you assign one of the buttons in its drop-down list as the [default button](https://www.telerik.com/products/aspnet-ajax/documentation/controls/toolbar/radtoolbar-items/default-items) of a **RadToolBarSplitButton**. * **IsSeparator** lets you convert a **RadToolBarButton** into a [separator](https://www.telerik.com/products/aspnet-ajax/documentation/controls/toolbar/appearance-and-styling/separators). * **CheckOnClick** lets you allow **RadToolBarButton** to support a [checked state](https://www.telerik.com/products/aspnet-ajax/documentation/controls/toolbar/radtoolbar-items/two-state-buttons). When **RadToolBarButton** supports a checked state, **Checked** specifies the initial checked state, and **AllowSelfUnCheck** specifies whether users can uncheck the button by clicking. **Group** lets you associate the **RadToolBarButton** controls with a group, so that they function like a radio group. ## See Also * [Overview](https://www.telerik.com/products/aspnet-ajax/documentation/controls/toolbar/radtoolbar-items/overview)