Alert Avatar Bottom sheet Button Card Carousel Cards Checkbox Chip Circular button Compact date input Copy Block Critical banner Date input Date picker Divider Dropdown Icon button Image Ratios Instruction List Item List Item - Button List Item - Checkbox List Item - Icon Button List Item - Navigation List Item - No Action List Item - Radio List Item - Switch Media Button Modal Money input Navigation option Nudge When to useVariantsPlacementInteractionContentAvailabilityPassword input Popover Progress Bar Progress Spinner Promo card Radio Screen loader Search input Section header Segmented control Select Snackbar Summary Switch Table Tabs Text area Text input Upload Upload input
Design at Wise Foundations Components AlertAvatarBottom sheetButtonCardCarousel CardsCheckboxChipCircular buttonCompact date inputCopy BlockCritical bannerDate inputDate pickerDividerDropdownIcon buttonImage RatiosInstructionList ItemList Item - ButtonList Item - CheckboxList Item - Icon ButtonList Item - NavigationList Item - No ActionList Item - RadioList Item - SwitchMedia Button ModalMoney inputNavigation optionNudgePassword inputPopoverProgress Bar Progress SpinnerPromo cardRadioScreen loaderSearch inputSection headerSegmented controlSelectSnackbarSummarySwitchTableTabsText areaText inputUploadUpload inputPatterns Resources
Nudge

A nudge directs users to take an action on something that might be relevant at the time they see it.

Nudge
When to use

Use a nudge:

  • to suggest a new feature or action that a user might not be aware of
  • if there's an optional feature or action that's relevant to what the user is currently doing

Don't use a nudge:

  • if the information is critical, or requires time sensitive action
  • if the feature is something that everyone needs
  • if there's no action for the user to take

Variants

There are 7 different variants of nudge, each with a different illustration.

A nudge component with a globe illustration.
A nudge icon with a padlock illustration.
A nudge with a wallet illustration.
A nudge with a cog illustration.
A nudge with an envelope illustration.
A nudge with a personal account card illustration.
A nudge with a business account card illustration.
Placement

Place a nudge at the top of the screen or section it applies to, or below a section header.

Never have more than one nudge on the same screen.

Interaction

Nudges direct users to another view to complete an action.

Tapping anywhere on the nudge triggers the action — except for the area around the close button, which dismisses it.

Content

Nudges are for suggesting new features or actions, not for communicating negative or critical information. So while nudge copy should be short and sweet, it's ok to add some energy and colour. Try to have maximum impact, with the minimum amount of words.

See our tone of voice.

Title

Title copy should:

  • start with a verb

  • describe the action the user might like to take

  • include a clear benefit for the user — like making something quicker, safer, or cheaper for them

  • be short (4–7 words)

  • capitalise the first letter of the first word

  • not have a full stop

If you can't fit the action and the benefit in one sentence, you can include a second sentence. Just make sure it:

  • explains the benefit to the user

  • includes full stops as there are 2 sentences

  • is short — no more than 6 words

A nudge with a single sentence for a title.
A nudge with a very long sentence for a title.
A nudge with two short sentences.
A nudge with a lengthy second sentence.

Action

Action copy should:

  • start with a verb — like ‘add’, ‘enable’, ‘find’

  • describe a specific action the user will take — it shouldn't be vague

  • be no more than 3 words

  • capitalise the first letter of the first word

  • have no full stop

A nudge with short and succinct action copy.
A nudge with very long action copy.
Availability

Platform

Available

Developer documentation

Android

iOS

Web

Web documentation