Buttons

<button> tags will automatically carry Salesforce1's button styles. <a> tags with the .button class and input[type="submit"] elements extend these styles.

Buttons can make use of the colors from the Colors Section by including a class based on the color's name (e.g., .light-blue for Light Blue). They can also make use of the .inverse class, which turns its background transparent and applies the specified color to the color and border-color CSS properties.

Dropdown buttons can also be created by adding the .dropdown class to any button. A sibling <ul> element with the .dropdown-options class containing the options as links will need to be present for the dropdown to function.

Button Groups

Buttons can also be grouped to tie together related actions by use of a <ul> tag with the .button-group class. <a> and <button> tags within list items will be styled like the buttons above even without the .button class.

Button groups should be contained by the .button-group-container to ensure its inline properties match those of a normal button. This can be useful for having multiple button groups together on one line.

Button groups can be used several ways: as a normal button group (stacks vertically on mobile), as a button with dropdown with alternative dropdown choices, or as paginate links (by substituting the .button-groups class with the .paginate-links class. A normal button group can also utilize the .mobile-full-width class, which gives all vertically stack buttons in the group 100% width.

Loading States

The .loading class can be applied to any block-level element or contianer to add a loading state and disable click events. This can come in handy during AJAX calls.

Alerts

Alerts are block-level elements that can be used to display an error message, show additional information, or prompt a user to take action. They are created by adding the .alert class to a <div>.

Alerts can also make use of the .dismissible class and a .close-alert child element that will close the alert when clicked. An alert can also be triggered on click events by using the .js-open-alert class and data-alert-id attribute on the element that will trigger the alert.

Progress Bars

Progress bars help to communicate with your audience how far along they may be in a process, or current progress on a task they are involved with. They are created with the use of the .progress-bar class, which acts as a container to <span> tags that represent individual segments of progress.

Each <span> tag requires both the .progress class and the data-percentage attribute, which defines how the inline-block element would be sized in relation to its container. The widths of these <span> tags are applied by jQuery via inline styles.

Tooltips

Tooltips on an element can be activated with the .js-tooltip class and associated title attribute, which defines the text that is to be displayed on the tooltip.

Mobile users will not be able to trigger tooltips by default, as the settings listen for a mouseover event.

Revealed Elements

The .reveal class can be added to any element that you wish to animate into the viewport after page load. The animation is triggered when the app is scrolled to a point where the element enters the viewport. The class automatically hides element on page load and would initiate the animation immediately if the page is loaded/reloaded while the element is positioned past the trigger point.