Usage

Switches between map layers when more than one layer is available.

Rules

• Use the component in web and mobile apps when the app offers at least two layers.
• Omit the button when the app offers only one layer.
• Use the Toggle variant when there are two layers.
• Use the List variant when there are three or more layers.
• Place the button in the upper-right corner.

States

The component has the following states:

• Default
• Hover
• Pressed
• Expanded (List variant only)

Variants

The component has the following variants:

• Mode: light/dark
• Size: default/small
• Type: Toggle/List

Toggle

When an app offers two layers, users switch between them by selecting the button.

Default

Small

List

Selecting the button opens the layer list. Users can choose a layer by selecting it or navigating with the Tab or arrow keys. The list closes and the map layer changes after a selection.

Default

Small