Blueweb
How to use
Use buttons to let users initiate actions such as submitting data, proceeding to the next step, or triggering an interaction. Buttons should be clearly visible and distinguishable from other interactive elements like links.
Buttons should be used consistently to maintain a clear visual and functional language across platforms. Only use buttons when the user is expected to perform a direct, immediate action.
Types
Default buttons
Used for all standard actions that guide users through the interface.
Destructive buttons
Used for critical actions like delete or remove, where the outcome is irreversible.
Icon buttons
Icon buttons are compact buttons that contain only an icon and no visible text. They are used for small, commonly understood actions such as search, close, edit, or more options. Icon buttons are ideal in toolbars, compact UI elements, or when space is limited. Always ensure the icon meaning is clear, and include accessible labels for screen readers.
Do’s and Don’ts
Do
Use links as links.
Don't
Don't use buttons as links.
Do
Use Primary with Secondary buttons.
Don't
Don't mix Primary and Alternative buttons.
Do
Use the Tertiary button for all dismissible actions like: Close and Cancel.
Don't
Don't use the Secondary button for dissmissible actions.
Sizes
Buttons come in three sizes to support different use cases and layouts. All button sizes maintain appropriate touch targets and consistent padding across platforms.
Tip: When in doubt, use Medium or contact the Aero team for guidance.
Accessibility
Buttons must be accessible to all users, including those using screen readers, keyboard navigation, or other assistive technologies.
Disabled Button
Disabled buttons often cause accessibility and usability concerns, so they are discouraged in Aero.
Do
Do use enabled buttons in forms and widgets. Provide guidance or inline feedback to explain what’s missing or required before an action can proceed.
Don't
Don't use disabled buttons if they can be avoided. Don't rely on a disabled button to signal that other actions are required before continuing.
Content
Start your button labels with a clear, strong verb to reflect the action the user is taking. Use sentence case and describe the action specifically. For example, ‘Add passenger’ is clearer than just ‘Add’.
- Keep labels short, max 30 characters and one line. Don’t use punctuation or emojis.
- Avoid first-person pronouns like ‘my’ or ‘our’. For example, use ‘Cancel booking’ instead of ‘Cancel my booking’.
- If you use a verb in the title or body, mirror it in the button for consistency.
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
Ready