--- title: "Interface: ITopToolbarConfig | Customer's Canvas On-Premises" canonical: "https://customerscanvas.com/docs/on-premises/design-editor/iframe-api/reference/design-editor-iframe/interfaces/WidgetConfigurationInterfaces.ITopToolbarConfig/" --- # Interface: ITopToolbarConfig > A structure containing the configuration of the Top toolbar. ## Example ```js let configuration = { widgets: { TopToolbar: { multiRowModeEnabled:true, textShadowButtonEnabled: true, textShadow: { angle: { max: 70, min: 20, step: 5 }, distance: { max: 5, min: 0, step: 0.1 }, size: { max: 2, min: 0, step: 0.1 } }, textStrokeButtonEnabled: false, textStroke: { max: 1, min: 0, step: 0.1 } } } }; ``` ## Properties ### displayCaptionInButtons? > `optional` **displayCaptionInButtons?**: `boolean` Displays button captions in the Top Toolbar. The default value is `false`. *** ### alignButtonsEnabled? > `optional` **alignButtonsEnabled?**: `boolean` Displays the vertical alignment buttons (**Top**, **Center**, **Bottom**). The default value is `true`. *** ### displayAlignButtonsAsDropdown? > `optional` **displayAlignButtonsAsDropdown?**: `boolean` Displays the alignment buttons as a drop-down list. The default value is `true`. *** ### historyButtonsEnabled? > `optional` **historyButtonsEnabled?**: `boolean` Displays the **Undo** and **Redo** buttons. The default value is `true`. *** ### deleteButtonEnabled? > `optional` **deleteButtonEnabled?**: `boolean` Displays the **Delete** button. The default value is `false`. *** ### revertButtonEnabled? > `optional` **revertButtonEnabled?**: `boolean` Displays the **Revert** button. The default value is `true`. *** ### zOrder? > `optional` **zOrder?**: [`IZOrderConfig`](https://customerscanvas.com/docs/on-premises/design-editor/iframe-api/reference/design-editor-iframe/interfaces/WidgetConfigurationInterfaces.IZOrderConfig.md) Displays buttons for changing the z-Order of design elements. By default, the Top toolbar displays the z-Order buttons. *** ### displayZOrderButtonsAsDropdown? > `optional` **displayZOrderButtonsAsDropdown?**: `boolean` Displays the z-order buttons as a drop-down list. The default value is `true`. *** ### cloneButtonEnabled? > `optional` **cloneButtonEnabled?**: `boolean` Displays the **Clone object** button. The default value is `false`. *** ### editTextButtonEnabled > **editTextButtonEnabled**: `boolean` Displays the **Edit** button for text elements. The default value is `false`. *** ### textVAlignmentButtonsEnabled? > `optional` **textVAlignmentButtonsEnabled?**: `boolean` Displays the text vertical alignment buttons. The default value is `true`. *** ### textAllowChangeColumnCount? > `optional` **textAllowChangeColumnCount?**: `boolean` Displays the **Columns** box for rich formatted text. The default value is `true`. *** ### textAlignmentButtonsEnabled? > `optional` **textAlignmentButtonsEnabled?**: `boolean` Displays the text alignment buttons. The default value is `true`. *** ### textEmphasisButtonsEnabled? > `optional` **textEmphasisButtonsEnabled?**: `boolean` Displays the faux text style buttons (bold, italic, and underlined). The default value is `true`. *** ### textFontFamilyButtonEnabled? > `optional` **textFontFamilyButtonEnabled?**: `boolean` Displays the font list. The default value is `true`. *** ### textFontStyleButtonEnabled? > `optional` **textFontStyleButtonEnabled?**: `boolean` Displays the font style list. The default value is `true`. *** ### textFontSizeButtonEnabled? > `optional` **textFontSizeButtonEnabled?**: `boolean` Displays the font size spinner. The default value is `true`. *** ### textFontColorButtonEnabled? > `optional` **textFontColorButtonEnabled?**: `boolean` Displays the text color picker. The default value is `true`. *** ### textBendButtonEnabled? > `optional` **textBendButtonEnabled?**: `boolean` Displays the **Arched text bend** button to configure the arch bend. The default value is `true`. *** ### textParagraphButtonEnabled? > `optional` **textParagraphButtonEnabled?**: `boolean` Displays the **Paragraph** button to configure paragraph indents. The default value is `true`. *** ### textListButtonsEnabled? > `optional` **textListButtonsEnabled?**: `boolean` Displays the group of buttons to create and manipulate text lists. By default, the Top toolbar displays the list buttons for text elements. *** ### fillColorButtonEnabled? > `optional` **fillColorButtonEnabled?**: `boolean` Displays the **Select fill color** button. The default value is `true`. *** ### textFillColorButtonEnabled? > `optional` **textFillColorButtonEnabled?**: `boolean` Displays the **Select text fill color** button. The default value is `false`. *** ### closeFontMenuOnClickEnabled? > `optional` **closeFontMenuOnClickEnabled?**: `boolean` If `true`, the **Select font** drop-down list closes after a user selects a font; otherwise, it closes only when a user clicks anywhere outside the list. The default value is `true`. *** ### opacitySliderEnabled? > `optional` **opacitySliderEnabled?**: `boolean` If `true`, provides the ability to change layer opacity via the **Select opacity** slider in the Top toolbar. The default value is `true`. *** ### textLeadingButtonEnabled? > `optional` **textLeadingButtonEnabled?**: `boolean` Displays the **Leading** list for text. The default value is `true`. *** ### textTrackingButtonEnabled? > `optional` **textTrackingButtonEnabled?**: `boolean` Displays the **Tracking** list for text. The default value is `true`. *** ### multiRowModeEnabled? > `optional` **multiRowModeEnabled?**: `boolean` Displays the Top toolbar in the multi row mode to fit all the buttons for a screen. The default value is `false`. *** ### borderColorButtonEnabled? > `optional` **borderColorButtonEnabled?**: `boolean` Displays the **Select border color** button in the Top toolbar. The default value is `true`. *** ### overlayColorButtonEnabled? > `optional` **overlayColorButtonEnabled?**: `boolean` Displays the **Select overlay color** button in the Top toolbar. The default value is `true`. *** ### barcodeColorButtonEnabled? > `optional` **barcodeColorButtonEnabled?**: `boolean` Displays the **Select barcode color** button. The default value is `true`. *** ### borderWidthButtonEnabled? > `optional` **borderWidthButtonEnabled?**: `boolean` Displays the **Select border width** button in the Top toolbar. The default value is `true`. *** ### imageEditButtonEnabled? > `optional` **imageEditButtonEnabled?**: `boolean` Displays the **Edit** button for images in the Top toolbar. The default value is `true`. *** ### imageSelectButtonEnabled? > `optional` **imageSelectButtonEnabled?**: `boolean` Displays the **Select image** button for images. The default value is `true`. *** ### placeholderEditButtonEnabled? > `optional` **placeholderEditButtonEnabled?**: `boolean` Displays the **Edit** button for image placeholders in the Top toolbar. The default value is `true`. *** ### placeholderSelectButtonEnabled? > `optional` **placeholderSelectButtonEnabled?**: `boolean` Displays the **Select image** button for image placeholders. The default value is `true`. *** ### placeholderScaleButtonEnabled? > `optional` **placeholderScaleButtonEnabled?**: `boolean` Displays the **Select placeholder content scale** button for image placeholders. The default value is `true`. *** ### placeholderResetContentButtonEnabled? > `optional` **placeholderResetContentButtonEnabled?**: `boolean` Displays the **Reset placeholder content** button for image placeholders. The default value is `true`. *** ### placeholderRotateContentButtonsEnabled? > `optional` **placeholderRotateContentButtonsEnabled?**: `boolean` Displays the **Rotate content** buttons for image placeholders to rotate the content to 90, 180, and 270 degrees. The default value is `true`. *** ### changeBarcodeTypeButtonEnabled? > `optional` **changeBarcodeTypeButtonEnabled?**: `boolean` Displays the **Change barcode type** drop-down list for barcode placeholders. The default value is `true`. *** ### variablesButtonEnabled? > `optional` **variablesButtonEnabled?**: `boolean` Displays the **Set as variable** / **Variables** buttons (Text/Image/QR/Barcode). The default value is `true`. *** ### fontPreviewSize? > `optional` **fontPreviewSize?**: `number` The font size used to display font names in the **Select font** drop-down list. The default value is `17`. *** ### fontSize? > `optional` **fontSize?**: [`IRangeParams`](https://customerscanvas.com/docs/on-premises/design-editor/iframe-api/reference/design-editor-iframe/interfaces/WidgetConfigurationInterfaces.IRangeParams.md) Specifies parameters of the **Font size** spinner. *** ### textShadowButtonEnabled? > `optional` **textShadowButtonEnabled?**: `boolean` Displays the **Shadow** button. The default value is `true`. *** ### textShadow? > `optional` **textShadow?**: [`ITextShadowParam`](https://customerscanvas.com/docs/on-premises/design-editor/iframe-api/reference/design-editor-iframe/interfaces/WidgetConfigurationInterfaces.ITextShadowParam.md) An angle in degrees, an indent in points, and a blur value in pixels of the text shadow. The default values are calculated based on the text font size. *** ### textStrokeButtonEnabled? > `optional` **textStrokeButtonEnabled?**: `boolean` Displays the **Stroke** button. The default value is `true`. *** ### textStroke? > `optional` **textStroke?**: [`IDefaultTextStroke`](https://customerscanvas.com/docs/on-premises/design-editor/iframe-api/reference/design-editor-iframe/interfaces/WidgetConfigurationInterfaces.IDefaultTextStroke.md) Min and max values of the text stroke width in points, including the color and the size. The default values are calculated based on the text font size. *** ### layoutItemSettingsButtonEnabled? > `optional` **layoutItemSettingsButtonEnabled?**: `boolean` Displays the **Smart group** button to configure the auto-layout settings of grouped design elements. The default value is `true`. *** ### textStrokeColorButtonEnabled? > `optional` **textStrokeColorButtonEnabled?**: `boolean` Displays the **Stroke color** button to change the color of text stroke. If `true`, the user can change the stroke color. If `false`, the color is maintained the same as the text color. The default value is `true`. *** ### placeInSafetyAreaButtonEnabled? > `optional` **placeInSafetyAreaButtonEnabled?**: `boolean` Displays the **Place in** button to fit the selected design elements to an area bounded by safety lines. The default value is `true`. *** ### groupButtonEnabled? > `optional` **groupButtonEnabled?**: `boolean` Displays the **Group/Ungroup** button for items. The default value is `true`. *** ### groupItemsEnabled? > `optional` **groupItemsEnabled?**: `boolean` Obsolete. Left for compatibility. Works like groupButtonEnabled