Navigation app launcher
An app launcher provides navigation for applications related to the application the user is currently viewing.
Guidelines
An app launcher is used to organise navigation across different applications related or relevant to the current application. The current application shows as active in the app launcher. Each application displayed has a Product icon as well as a label that gives clear and concise direction. Note that if the label is longer than the maximum width, it will be truncated and should have a tooltip provided.
Don’t
- Do not use
System iconsin the app launchers. - Do not scroll within the app launcher.
- Do not place the app launcher outside of the viewport.
- Do not list more than three app buttons across the app launcher.
- Do not change the width of the listing.
- Do not shrink text size to fit a label on a single line.
- Do not wrap a label over two lines.
Variations
Listing
App buttons
When the placeholder icon is replaced with your product icon of choice, the colours will be updated. You will have to manually change them back to the correct colour.
- Enabled state should use
Interactive Primary/Resting - Disabled state should use
Interactive/Disabled/Text - Active state should use
Interactive Primary/Resting - Focus state should use
Interactive Primary/Resting - Hover state should use
Interactive Primary/Hover - Pressed state should use
Interactive Primary/Hover
