# button properties Warning noteEXPERIMENTAL. This API is under development. Do not rely on it. It may change or be removed in future versions. These are the properties used by the Qlik Sense button. For more information about buttons and how they are used, see [Button](https://help.qlik.com/en-US/cloud-services/Subsystems/Hub/Content/Sense_Hub/Visualizations/Button/button.htm). ## Version history Version history | Version state | Details | | --- | --- | | Introduced | February 2020 | ## Properties ### showTitles Type: Boolean Show title for the visualization. Default: false ### showDetails Type: Boolean Sets if button details should be shown. Default: false ### title Type: String | qStringExpression Visualization title shown if "showTitles": true. ### subtitle Type: String | qStringExpression Visualization subtitle shown if "showTitles": true. ### footnote Type: String Visualization footnote shown if "showTitles": true. ### navigation Type: Object Controls navigation to another sheet, a story, or a website when the button is clicked. You do not have to specify an action if you want to create a simple navigation button. Default: false ### useEnabledCondition Type: Boolean Defines if an enable condition is used or not. Default: false ### enabledCondition Type: Number Defines a calculation condition to enable the chart Default: 1 ### actions Type: Array Defines one or more actions to be performed. For some actions you need to provide details for the action. The actions are performed in the order they are listed. * Type: Object * actionType: applyBookmark Type: String Description: You can apply the selection that is defined in a bookmark that you choose. * bookmark Type: String * softLock Type: Boolean * Type: Object * actionType: back Type: String Description: You can move one step backwards in your selection history. * Type: Object * actionType: forward Type: String Description: You can move one step forwards in your selection history. * Type: Object * actionType: clearAll Type: String Description: You can clear all selections in the app. You can optionally overwrite locked selections. * softLock Type: Boolean * Type: Object * actionType: clearAllButThis Type: String Description: You can clear selections from all fields except the one you specify. You can optionally overwrite locked selections. * field Type: String * softLock Type: Boolean * Type: Object * actionType: clearField Type: String Description: You can clear all selections from a field that you specify. * field Type: String * Type: Object * actionType: selectAll Type: String Description: You can select all values in a field that you specify. You can optionally overwrite locked selections. * field Type: String * softLock Type: Boolean * Type: Object * actionType: selectValues Type: String Description: You can select a list of values in a field that you specify. Separate the values to select with a semi colon. You can optionally overwrite locked selections. * field Type: String * value Type: String * softLock Type: Boolean * Type: Object * actionType: selectAlternative Type: String Description: Select all alternative values in a field that you specify. You can optionally overwrite locked selections. * field Type: String * softLock Type: Boolean * Type: Object * actionType: selectExcluded Type: String Description: Select all excluded values in a field that you specify. You can optionally overwrite locked selections. * field Type: String * softLock Type: Boolean * Type: Object * actionType: selectPossible Type: String Description: Select all possible values in a field that you specify. You can optionally overwrite locked selections. * field Type: String * softLock Type: Boolean * Type: Object * actionType: toggleSelect Type: String Description: You can set the button to toggle between the current selection, and a selection that adds selections defined by a search string. You can use wild cards in the search string. If you want to define a list of values you need to use the format (A|B), where A and B are values to select. * field Type: String * value Type: String * softLock Type: Boolean * Type: Object * actionType: lockAll Type: String Description: You can lock all selections in the app. * Type: Object * actionType: lockField Type: String Description: You can lock selections in a field that you specify. * field Type: String * Type: Object * actionType: unlockAll Type: String Description: You can unlock all selections in the app. * Type: Object * actionType: unlockField Type: String Description: You can unlock selections in a field that you specify. * field Type: String * Type: Object * actionType: setVariable Type: String Description: You can assign a value to a variable. * variable Type: String * value Type: String ### style Type: Object Style settings. Information noteNote: The values for background color are fetched from the current theme. Setting color or colorExpression will override the theme used. Additional properties: * label Type: String Description: Set the text for the label. * font Type: Object Description: Set the properties for the font. * size Type: Number Description: Font size of button text. Number between 0 and 1, with 0 resulting in a minimum font size, and 1 being the maximum value representing 100% of the available space. Default: 0.5 * useColorExpression Type: Boolean Description: Defines if a color expression is used. Default: false * color Type: Object Description: Set to specify font color. Index: -1 Color: null * colorExpression Type: String Description: An expression string that defines the font color. * style Type: Object Description: Set bold, italic, and underline font options. Can be: * bold: true * italic: false * underline: false * align Type: String Description: Set the alignment of the text to center, left or right. Default: center background Type: Object Description: Set background to a color or image. * useColorExpression Type: Boolean Description: Defines if a color expression is used. * color Type: Object Description: Set to specify color. Index: -1 Color: null * colorExpression Type: String Description: An expression string that defines the color. * useImage Type: Boolean Description: Defines if a background image is used. Default: false * url Type: Object Description: Defines the background image URL. * size Type: String Description: Defines the background image size. * position Type: String Description: Sets the position of the background image. * topLeft * centerLeft * bottomLeft * topCenter * centerCenter * bottomCenter * topRight * centerRight * bottomRight Default: centerCenter border Type: Boolean Description: Adjust the border of the button. You can set the corner radius and the width of the border. You can also set the color of the border, either a single color or with an expression. * radius Type: Number Description: Set the corner radius of the border. Number between 0 and 1, with 0 resulting in no border radius, and 1 resulting in the maximum radius on the shortest side. Default: 0 * width Type: Number Description: Set the width of the border. Number between 0 and 0.5. A 0 results in no border, and 0.5 will create a border of half the length of the shortest side. Default: 0 * useColorExpression Type: Boolean Description: Defines if a color expression is used. * color Type: Object Description: Set to specify border color. index: -1 color: null * colorExpression Type: String Description: An expression string that defines the border color. icon Type: Boolean Description: Add an icon to the button. * useIcon Type: Boolean Description: Defines if an icon is used. Default: false * iconType Type: String Description: When enabled, the type of icon to use. * position Type: String Description: Set the position of the icon. Can be set to: * Left * Right ## Example In this example we want to create a basic button that applies a bookmark action. It will include an icon and background image, align the text, and set a color. ``` app.visualization.create( 'action-button', [], { "actions": [ { "actionType": "applyBookmark", "bookmark": "1a2c59bf-2da7-400f-8b06-7202257760cb", "softLock": false", "cId": "LwcVDAG" } ], "style": { "label": "Apply bookmark", "font": { "color": { "index": -1, "color": "#f94377" }, "align": "left" }, "background": { "useImage": false, "size": "auto", "position": "bottomCenter", "url": { "qStaticContentUrlDef": {" "qUrl": "/media/qlik-sense-logo.png" } } }, "icon": { "useIcon": true, "iconType": "bookmark", "position": "left" } } }, ).then(function(vis) { vis.show('QV01'); }); ```