Action button When to useAction button vs ButtonPrioritiesBest practicePlacementInteractionAccessibilityContentAvailabilityAlert Avatar Bottom sheet Button Card Checkbox Chip Circular button Compact date input Critical banner Date input Date picker Dropdown Instruction Modal Money input Navigation option Nudge Password input Popover Promo card Radio Screen loader Search input Section header Segmented control Select Snackbar Summary Switch Tabs Text area Text input Upload Upload input
Design at Wise Foundations Components Action buttonAlertAvatarBottom sheetButtonCardCheckboxChipCircular buttonCompact date inputCritical bannerDate inputDate pickerDropdownInstructionModalMoney inputNavigation optionNudgePassword inputPopoverPromo cardRadioScreen loaderSearch inputSection headerSegmented controlSelectSnackbarSummarySwitchTabsText areaText inputUploadUpload inputPatterns Resources
Action button

An action button lets the user perform an action that is independent from the rest of the content on screen.

Action button
When to use

Use an action button:

  • when the user needs to perform an action, such as initiating a new flow in a separate screen or a bottom sheet
  • if there's a standalone action that the user can take, that isn’t the primary action in context of the screen
  • if there's one or more possible actions in the same section

Don't use an action button:

  • if you want to link to other pages or external resources (use a link instead)
  • if the action is too close to text (use a link, or a component that includes an action button, instead)
  • for high-level actions that will affect the whole screen (like submitting a form) or for actions at the bottom of the screen (use a primary button instead)

Action button vs Button

Action button and button are similar but separate components. Understanding their visual design differences will help you decide when to use each one.

Height

Action button is only available in the small size, whereas button also comes in a medium size.

Width

The main difference between the two is that the action button doesn’t have a full-width version. Instead, the width of the action button changes to fit its content.

Icon

Action button supports the use of a left or right-aligned icon, whereas button does not.

Priorities

Action buttons support 2 different priorities. Priorities set a visual hierarchy amongst the action buttons displayed on the screen to help more important buttons to take precedence over others.

Primary action button
Primary

Use primary for displaying the most important action of the screen, such as inviting someone to join wise, as it’s visually more eye-catching than the secondary action button.

Secondary action button
Secondary

Use secondary for when you have a list of elements that use the action button.

Best practice
  • Don't have too many action buttons on a section of a screen.
  • Only use an icon when the action button is isolated in the interface, so that it reinforces the button hierarchy.

Placement

The action button should always be part of a section and clearly relate to the surrounding content. But don't mix it too closely with text or other elements on screen — there should be enough space around it for a user to select it.

You can also place more than one action button in a row (when the actions are similar).

Interaction

Unless the action button is disabled, the user can tap or click on it to perform the action.

Accessibility

When using an action button, keep in mind that its height might change based on the preferred font size that the user has set system-wide for accessibility purposes.

When using a screen reader, the text of the action button will be read out loud, which is another reason to make the title contextual, so people completely relying on the screen reader will also understand what the action is tied to.

Content

Action button

Action button copy should:

  • start with a verb, like ‘Pay’ or ‘Send’

  • be just a few words (ideally 1 or 2)

  • describe the action (if someone only reads the button, they should know what will happen next)

  • connect to the content around it — for example, it might use the same words as the title

  • avoid using first person pronouns like ‘me’, ‘my’ and ‘I’

  • be in sentence case (only capitalise the first letter of the first word)

  • have no full stop

Availability

Platform

Available

Developer documentation

Android

iOS

Web

Web documentation