App launcher

Updated:

February 1, 2020

The Application launcher an easy access to open different applications. It is accessible at the top-right in the Topbar.

Variations

The Application launcher is a part of the Topbar, and is an easy access to apps in addition to a full screen launcher. The amount of app displayed may vary based on the screen size (4x4 vs 3x3).

App launcher

The application launcher is accessible from the Topbar.

App launcher

The application launcher is accessible from the Topbar.

Component building blocks

How the application launcher is built up and styled.

Anatomy

The app launcher is a nested component, containing other UI components

Component elements
1
Container
2
Border
3
Search box
4
App button
5
Border
6
Container
7
Stepper Container
8
Label

Colors and styles

The app launcher use the same color as the topbar.

Element
Color / Style name
1
Border
This is some text inside of a div block.
2
Container
This is some text inside of a div block.
3
Border
This is some text inside of a div block.
4
Container
This is some text inside of a div block.
5
Stepper Container
This is some text inside of a div block.
Element
Color / Style name
1
Border
This is some text inside of a div block.
This is some text inside of a div block.
2
Container
This is some text inside of a div block.
This is some text inside of a div block.
3
Border
This is some text inside of a div block.
This is some text inside of a div block.
4
Container
This is some text inside of a div block.
This is some text inside of a div block.
5
Stepper Container
This is some text inside of a div block.
This is some text inside of a div block.
Element
Color / Style name
1
Border
This is some text inside of a div block.
This is some text inside of a div block.
2
Container
This is some text inside of a div block.
This is some text inside of a div block.
3
Border
This is some text inside of a div block.
This is some text inside of a div block.
4
Container
This is some text inside of a div block.
This is some text inside of a div block.
5
Stepper Container
This is some text inside of a div block.
This is some text inside of a div block.
Element
Color / Style name
1
Border
This is some text inside of a div block.
This is some text inside of a div block.
2
Container
This is some text inside of a div block.
This is some text inside of a div block.
3
Border
This is some text inside of a div block.
This is some text inside of a div block.
4
Container
This is some text inside of a div block.
This is some text inside of a div block.
5
Stepper Container
This is some text inside of a div block.
This is some text inside of a div block.

Typography and icons

The label tells you about your location in the application and makes it easy to access other parts.

Element
Text style
1
Label
Aa
Aa
Aa
Aa
Aa
Aa
Aa
Body
Element
Text style
1
Label
Aa
Aa
Aa
Aa
Aa
Aa
Aa
Aa
Body

Specs

This component is built up by a oval slider and icons.

1
Component measures
2
Spacing
3
Border sizes
1
Component measures
2
Spacing
3
Border sizes

States

No items found.
Submit feedback