# button properties button() These are the properties used by Qlik Sense buttons. - Since: - * Qlik Sense 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 using qlik-visual ``` 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'); }); ```