Buttons

Generally, buttons are used for actions that affect the website’s front-end or back-end; links are used for navigation and actions that don’t affect the website at all. However, there are exceptions for forms (back and next are buttons) and use-cases where links need to be prioritised as buttons so that they are more prominent on the page.

Capsule buttons are only for quick links.

Only two buttons, primary and secondary, should be paired together. Consider using a text link for the lesser priority action if you absolutely need a third call-to-action (CTA).

On some forms, there are two CTAs on the right (for example, “next” and “save as draft”), and another CTA button on the very left for “back”.

By default, text links are grey and underlined. If it is an important link that needs emphasis, for example “Update with Singpass” or “Apply Now”, use the text link in red and underlined, or as a CTA button instead if possible.

Icon buttons are used when the icon is sufficient for users to understand the associated action. For example arrows for pagination or actions like “save”, “edit”, “download”. Even with a distinguishable action, icon buttons should be accompanied by a tooltip with text description of the action.

Yes. Buttons fill the full width of the content area.

Check out the “Show More” guidelines.

A plain button is different from a link in that the clickable area is larger than a link, and that users could still see the button shape in its active/hover state.

Plain buttons are generally used in cards, for example, “learn more” to minimise space or distraction from other competing CTA buttons on the page.

For longer forms, buttons are recommended on be sticky on mobile.