To style an anchor (a) tag as a button use the button class.
To style an input as a button use the button class and define a label by adding a value attribute.
These type of buttons are used when we use AJAX requests to retrieve or store information without leaving the page. We want to provide feedback to the user and let them know the action is in progress.
Add the class button-loading to the button element.
The button must have an onclick event associated with an AJAX call. While in progress add the button-loading class to the button. When the AJAX call is done, remove it. Is advisable to add the attribute disabled to the button element as well and remove if when the AJAX request is done processing.
Buttons are usually grouped when they are related by function. For example, in paging controls for previous-next buttons.
Wrap two or more buttons using the button-group class.
Adding the regular class to style like the example. A dark style is also available.
Combo buttons are preferred when more than one action is associated with a button. The primary action is visible and available on the button itself, while the secondary actions are accessed through the drop-down menu.
Combo buttons are created using Dijit's dijit/form/ComboButton and secondary actions are defined inside dijit/DropDownMenu using dijit/MenuItems.
Dijit Selects provide and consistent look and feel on different browsers and platforms
maxHeight=-1 is used so the select adjusts to the container box, allowing scrolling for a long list of options in a small container.
Expands on default Dijit select to add images and/or a second line containing meta information.
Native Selects are useful when browser defaults work better than Dijit Selects. For example, on mobile devices the native selects are better styled for interactions and are tightly coupled with the OS itself.
Native selects can be styled to look like Dijit Selects on WebKit browsers only.
These things have been disclosed!
Useful for hiding optional subforms or extra content.
Specify the id of the hidden dom element you want to toggle as the first parameter of the disclosureElement function.
Text inputs are accompanied by a label and wrapped inside a fieldset. The :hover and :focus styles follow our brand colors.
Text input with currency attached
Combine position--absolute , c-currencyInput--symbol, and zin-lv2 classes with the span to generate input fields with a currency icon. Use c-currencyInput class on the input to create the correct padding to account for the symbol to the right of the input field. Also, use mojo/user property currency to get the User's currency symbol
Text input with suffix symbol attached
Combine position--absolute, c-suffixInput--symbol, and zin-lv2 classes with the span to generate input fields with a suffix icon. Use c-suffixInput class on the input to create the correct padding to account for the symbol to the right of the input field. Last, add position--relative to the field-wrapper and size1of2 class for sizing the container will help with max-width of input elements.