Next Best Action

A Next Best Action (NBA) shows the most relevant action to a user in a specific time frame.

nba

Figma component

Aero Global Foundation / Global Components

How to use

A Next Best Action (NBA) shows the most relevant action for the user right now. It helps users do what matters most at a given moment.


Place an NBA near the content it applies to, such as a flight card or booking panel. It prompts the user clearly: “What should I do next?”

usage

Types

Badges can communicate different levels of urgency through color.

Primary

Primary

The most important action. This button should stand out and show what you want users to do now.

Secondary

Secondary

A less important but still helpful action. It should have less visual weight than Primary.

Do’s and Don’ts

Do

Label actions clearly with verbs.

Don't

Don’t use vague labels like “More” or “OK”

 

Do

Show one NBA primary action at a time

Don't

Don’t show multiple primary actions together

 

Accessibility

  • NBA must include a clear text label (e.g. “Rebook flight”).
  • Icon (if any) should have an aria-label or be decorative.

Content

  • Use action verbs + object (“Change seat”, “Cancel booking”).
  • Be specific. Don’t use “Next” or “Go”.
  • Don’t add extra punctuation like “!” or “...”.
  • If a secondary action is needed, it should also be clear and short (e.g., “View policy”).

Availability

Each global component provides a shared design direction across platforms. Implementation is owned by each platform team, so development status may vary per platform.

Blueweb

Mobile

Kiosk

Design status

Ready

© 2025 Air France.