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 icons in 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.

Variant

Listing

🙈Ops! Can't find the image, but you could still try Figma.

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

🙈Ops! Can't find the image, but you could still try Figma.