Buttons

Low-code configurable 8.6

Buttons execute any action when a user interacts with them, including submitting forms. Unlike links, they do not perform navigation. In Cosmos, they are typically found throughout the UI, including in cards, forms, and modals.

Button variations communicate different actions or importance to the user.

Primary buttons should be used only for the principal call-to-action in a region. Typically only one primary button is visible at a time.

Secondary buttons are the default button style. These are reserved for secondary actions on the page.

Simple buttons are reserved for actions related to a specific widget, inline interaction, or card. Simple buttons look stylistically like a link; however, they are tagged as a button, so screen reader users know they will not be taken to another page. Icon-only buttons typically use the simple style.

Link buttons are buttons in the style of a link. Link buttons are typically used within paragraphs or reviewable text.

Text buttons behave identically to link buttons, although they are styled to match the text on the screen.

Menu buttons submit forms or open menus. Actions buttons are menu buttons that reveal a menu with additional actions, when there are more than two actions a user can take in the action area, such as a table display. Action buttons appear on the right side of the action area.

Language

Buttons are used to perform actions and should be labeled accordingly: verb, then object, or only verb. Using this labeling guidance, add a clear message about what the user should expect to happen after each interaction, such as "Submit form" or "Submit".

In general, "positive" actions, or those that move work forward, are displayed on the right (e.g., “Submit", "Save", "Next", "Accept", or "Reject"); and "negative" actions, which cancel or move work backward, are displayed on the left (e.g., "Back", or "Cancel").

Layout

The primary action, represented by the primary button, is almost always in the right corner of the action area (except when there is a confirm dialog; then the primary action is to cancel, on the left). Supporting actions, represented by the secondary button, appear to the left of the primary action. These principles apply when using buttons in overlays, modals, page headers, task areas, and repeating lists.

Icon

If a button's content is only an icon, it will modify the padding on the button. For accessibility reasons, you must also provide a label which should describe what the button does. The text will render in a tooltip on hover or focus.