Logomark for Development Bank of Singapore (DBS), a bright red shape resembling a flowerDBS Digital
Design System

Buttons

Buttons allow customers to take actions and make choices, with a single tap.

What’s here

  1. Resources
  2. Variations
  3. States
  4. Usage
  5. FAQs

Resources

  • Buttons on Figma
  • Buttons API

Variations

Media is restricted, please login to view

States

Media is restricted, please login to view

Usage

Media is restricted, please login to view

FAQs

When do I use buttons and when do I use links?

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.

Do we have capsule buttons?

Capsule buttons are only for quick links.

How many buttons can I pair for CTAs?

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”.

Do I use a red or grey text links?

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.

What are “icon-buttons” and how do we use them?

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.

Are buttons full-width on mobile?

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

What button should I use for “show more”

Check out the “Show More” guidelines.

What’s the difference between plain buttons & text links?

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.

When will the button be sticky on mobile?

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

Loading...