Toggle button

Updated:

March 18, 2020

A toggle button is a selection control the user can pick one of multiple options. It is mostly used for 2 to 5 options.

Variations

The toggle button can be used in two different variations:

Standard toggle button

The standard toggle button has a descriptive label.

Standard toggle button

The standard toggle button has a descriptive label.

Icon toggle button

The icon toggle button the label below the button, and an associated icon centred in the toggle button.

Icon toggle button

The icon toggle button the label below the button, and an associated icon centred in the toggle button.

Component building blocks

The next steps explains how all three types of the menu button are built up and styled.

Anatomy

The toggle button is built up by a rack container, containing at least two toggle buttons.

Component elements

1

Container

2

Unchecked container

3

Checked container

4

Label

5

Label

6

Stepper Container

7

Checked icon

Colors and styles

The menu buttons are only displayed in a normal style.

Element

Color / Style name

1

Container

This is some text inside of a div block.

2

Unchecked container

style-flat

This is some text inside of a div block.

3

Checked container

style-normal

This is some text inside of a div block.

4

Label

This is some text inside of a div block.

Element

Color / Style name

1

Container

This is some text inside of a div block.

2

Unchecked container

style-flat

This is some text inside of a div block.

3

Checked container

style-normal

This is some text inside of a div block.

4

Label

This is some text inside of a div block.

Element

Color / Style name

1

Container

This is some text inside of a div block.

2

Unchecked container

style-flat

This is some text inside of a div block.

3

Checked container

style-normal

This is some text inside of a div block.

4

Label

This is some text inside of a div block.

Element

Color / Style name

1

Container

This is some text inside of a div block.

2

Unchecked container

style-flat

This is some text inside of a div block.

3

Checked container

style-normal

This is some text inside of a div block.

4

Label

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

Unchecked container

Aa

Body

2

Checked container

Aa

Selected Body

3

Label

Aa

Label

4

Label

Aa

Selected Label

Element

Text style

1

Unchecked container

Aa

Body

2

Checked container

Aa

Selected Body

3

Label

Aa

Label

4

Label

Aa

Selected Label

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

The look of the states are defined by the style.

Standard toggle button

Component state

Element

Style

Unchecked

Item 1 - Container

style-flat-enabled

This is some text inside of a div block.

Aa

Component state

Element

Style

Hover

Item 1 - Container

style-flat-hover

This is some text inside of a div block.

Aa

Component state

Element

Style

Pressed

Item 1 - Container

style-flat-pressed

This is some text inside of a div block.

Aa

Component state

Element

Style

Focused

Item 1 - Container

style-flat-focused

This is some text inside of a div block.

Aa

Component state

Element

Style

Disabled

Rack container

style-indent-disabled

Item 1 - Container

style-flat-disabled

Item 2 - Container

style-thumb-disabled

Labels

This is some text inside of a div block.

Aa

Component state

Element

Style

Checked

Item 2 - Container

style-normal-enabled

This is some text inside of a div block.

Aa

Icon toggle button

Component state

Element

Style

Unchecked

Item 2 - Container

style-flat-enabled

This is some text inside of a div block.

Aa

Component state

Element

Style

Hover

Item 2 - Container

style-flat-hover

This is some text inside of a div block.

Aa

Component state

Element

Style

Pressed

Item 2 - Container

style-flat-pressed

This is some text inside of a div block.

Aa

Component state

Element

Style

Focused

Item 2 - Container

style-flat-focused

This is some text inside of a div block.

Aa

Component state

Element

Style

Disabled

Rack container

style-indent-disabled

Item 2 - Container

style-flat-disabled

Item 1 - Container

style-thumb-disabled

Labels

This is some text inside of a div block.

Aa

Component state

Element

Style

Checked

Item 2 - Container

style-thumb-enabled

This is some text inside of a div block.

Aa