Components / Library Version 4.10.0

Button

The button component styles the display of buttons while ensuring adherence to basic accessibility guidelines. There are seven visual types as listed below. Additionally, various properties will change the appearance and functionality of each button.

Button Types

Primary Buttons (primary)

Primary buttons have the traditional appearance of buttons with text and generally serve to guide the user to a preferred action. There should ideally only be one on the page or section.

Secondary Buttons (secondary)

Like primary buttons, secondary buttons have the traditional button appearance with text. They do not connote a preferred action, and are often used in conjunction with primary buttons.

Text Only (textonly)

Text only button elements, with or without an icon, do not have the typical appearance of buttons. They are generally used for less commonly used or less desirable actions in situations where the user is performing other actions, e.g. in managing a widget where the prefered action is to update various fields, a text only button may be used for the less commonly used action of deleting the entire widget.

Icon Only (icononly)

Icon only buttons have the typical appearance of buttons but rather than having text they only have an icon. They are generally only used in situations where the icon is considered to be easily recognizable. They do require associated text in order to meet accessibility guidelines.

Icon Only Buttons that Navigate After an Action (navigational)

Icon only buttons that serve the purpose of completing an action and then navigating to another page or dialog have a different appearance in Ripple. They are typically used for back buttons in flyout panels and similar situations.

Positive/Negative Buttons (pairpositive and pairnegative)

Used together, pair positive and pair negative buttons serve a binary purpose where one button is generally associated with a positive quality and the other negative, but neither is preferred, such as approve/reject.

Delete Buttons (property: permanentlydelete)

Although not a specific button type, it is worth mentioning that the button component has a property called permanently delete that styles the primary button in a manner that suggests danger. It is to be used sparingly and only in situations where the user is taking a dangerous action that cannot be undone.