Blueweb

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

Types
Badges can communicate different levels of urgency through color.


Do’s and Don’ts

Label actions clearly with verbs.

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

Show one NBA primary action at a time

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.
Mobile
Kiosk
Design status