Button Appearance
- Sub-theme
- Button layout
- Has dropdown icon
- Display as split button
- Button class
- Button class hover
- Button class pressed
- Button class disabled
- Button inline style
- Button text class
- Button text inline style
- Image name
- Hover image name
- Pressed image name
- Disabled image name
- Image class
- Image inline style
- Show badge
- Badge settings
- Videos
Description
Properties for defining how the button is rendered.
Sub-theme
A sub-theme is a variation on the base style for a control. Click the button to open the sub-theme picker. A list of available sub-themes for the control will be shown. All controls have a 'base' sub-theme if the UX Component uses a Version 4 style sheet.
You can create your own sub-themes using the Style sub-theme and CSS 'tweaks' property.
Button layout
The layout of the button. The layout can be a combination of text and an image, text only, or image only:
- Text only
- Image only
- Text followed by image
- Image followed by text
- Image above text
- Text above image
- Text left & image right
- Image left & text right
Has dropdown icon
If checked, adds a small dropdown arrow to the button. The dropdown icon is often used to indicate clicking the button will show a dropdown window.
Display as split button
If checked, the button and the dropdown icon are separated into two logical buttons. If you use this option, you should define your event handler in the 'onClick' rather than the 'click' event. You will then be able to refer to arguments[1] in your code to see if the user clicked on the dropdown icon or the button, arguments[1] will be set to either 'normal' or 'split'.
This property is only available if Has dropdown icon is enabled.
Button class
One or more classes applied to the button. Use <None> for no class. Use <Default> or blank for the default class.
Button class hover
One or more classes applied to the button when the mouse is hovering over the button. You can enter <Default> or leave blank to use the default class name. Specify <None> for no class. If you specify your own class name here you can prefix it with '+' to use the specified class in addition to the default class. E.g. +myHoverclass.
Button class pressed
One or more classes applied to the button when the user clicks on the button. You can enter <Default> or leave blank to use the default class name. Specify <None> for no class. If you specify your own class name here you can prefix it with '+' to use the specified class in addition to the default class. E.g. +myPressedclass.
Button class disabled
One or more classes applied to the button when the button is disabled. You can enter <Default> or leave blank to use the default class name. Specify <None> for no class. If you specify your own class name here you can prefix it with '+' to use the specified class in addition to the default class. E.g. +myDisabledclass.
Button inline style
CSS styles applied to the button using the style attribute.
Button text class
One or more css classes applied to the button text. You can enter <Default>, or leave blank, to use the default class name. Specifying <None> will result in no classes applied to the button.
Button text inline style
CSS styles applied to the button's text using the style attribute.
Image name
The image shown on the button if the button's layout is set to display an image.
Hover image name
The image shown on the button when the user hovers the mouse over the button.
Pressed image name
The image shown on the button when the user clicks the button.
Disabled image name
The image shown on the button when the button is disabled.
Image class
One or more css classes applied to the button's image. You can enter <Default>, or leave blank, to use the default class name. Specifying <None> will result in no classes applied to the image.
Image inline style
CSS styles applied to the button's image using the style attribute.
Show badge
If enabled, adds a notification badge to the button.
Badge settings
The Badge settings control the display of the button's badge. These settings are only available if Show badge is enabled.
While the property is available, badges are not supported for Docked Panel controller buttons, Panel Flow Collapse buttons, or Panel Navigation buttons (assigned to the Next and Previous card button properties in the Navigation Buttons or Parent Navigation Buttons setting.)
Class name
One or more classes to assign the badge. If the class sets the font-size, color, background, background-color, padding, border-radius, border, line-height, min-width, width, box-sizing, position, top, bottom, left, right, or transform attributes, you may need to use the !important directive. This is because the default styling for the badge is inlined in the badge's generated HTML. Because these properties are set inline, they take precedence over the attributes defined in the class. The !important CSS directive ensures that your class settings will be used. For example:
.badge { background: blue !important; border-radius: 0 !important; border: blue !important; }
Style
Optional in-line style attributes to assign the badge.
Badge location - vertical
The vertical alignment of the badge. This can be top or bottom.
Badge location - horizontal
The horizontal alignment of the badge. This can be left or right.
Badge location - relative to edge
If checked, the badge will be displayed outside the button, relative to the location of the button's edge.
Offset
The distance in pixels between the edge of the button and the badge. The offset is applied relative to the horizontal and vertical edge.
This property is only available if Badge location - relative to edge is unchecked.
Badge text
The text to show on the badge.
You can dynamically change the badge text at runtime using JavaScript:
var button = {dialog.object}.getControl("MY_BUTTON_ID"); if (button) { button.setBadge(34); }
See setBadge() for more details.
Maximum number
If the badge value is a number, the maximum value to display before adding a "+" symbol after the number to indicate that the value is greater than the Maximum number.
Videos
How to Add a Badge to a Button
A common UI pattern in applications is to add a badge to buttons to convey some information. For example, you might have a button that shows orders and a badge shown over the button would show how many orders have been received. You can add badges to standalone buttons and also to buttons that are shown in a Control Bar.
In this video, we show how to add a badge to a button and how to dynamically set the badge value.
See Also