Blueweb
How to use
Tabs let users switch between different views or sections of related content without leaving the current page. They help organize content and avoid long scrolling.
Use Tabs when:
- The content is related but can be split into categories
- You want to keep everything on the same page
- The user needs to quickly switch between sections
Icon
You can choose whether you want to display an icon before the label or not, depending on what you need. Icons also give the users a better understanding of the content.
If you need an icon, always activate the Icon property on all the tabs to keep the visual hints consistent for the users
Overflow controls
The responsive behavior of the tab makes it so that controls appear on both side of the tab when the content overflows.
Keep this behavior in mind for your mockups when designing for small devices
Do’s and Don’ts
Do
Use Tabs when you have 2 to 5 related sections
Don't
Don’t use Tabs for just one section or more than 6 sections
Do
Keep Tab labels short and clear
Don't
Don’t use long sentences or unclear words as Tab labels
Do
Turn the Stretch property on when using less than 3 tabs in a small container. It gives more focus to the limited choices.
Don't
Don't set the Stretch property to off when the Tab is set within a small container and 3 tabs or less are displayed.
Accessibility
- Each Tab must be focusable and selectable with keyboard:
- Tab to enter the tab group
- Left / Right arrows to switch
- Enter or Space to activate a Tab
Content
- Tab labels should be 1 to 3 words. Examples: “Overview”, “Messages”, “Flight details”
- Use sentence case: only the first letter uppercase (unless brand/product name)
- Avoid abbreviations unless they are obvious to all users
- Tab content should load quickly and not depend on user scroll
- Don’t repeat Tab labels inside the content, users already know which Tab is active
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.
Android
Kiosk
Design status
Ready