Neither a button or an input. The toggle simply allows the option to ‘toggle’ between two or more options. This can be used to refresh the page content or filter content.


  • Toggle can be horizontal or vertical.
  • Horizontal toggles should be spaced 20px aside from other components.
  • Vertical toggles should be spaced 20px above or below other components.
  • Each option within the toggle has a left/right padding of 20px.
  • The active toggle follows similar style to a primary button.
  • The active toggle has no hover or focus state.


/* Toggle */
border-radius: 5px;
background: $white;
border: 1px solid $gray40;
color: $black50;
height: 38px;
padding: 0 20px; /* on each toggle option */

/* Hover */
background-color: rgba($black, 0.02);

/* Focus */
background-color: rgba($black, 0.05);

/* Disabled */
(same as disabled state for buttons)

/* Active */
(same as primary button style)

Note: All CSS shown is for guiding purposes, it's not absolute. It's intended to help designers foster a greater understanding of both CSS and the specifications.

See also: Primary button

Responsively or stacked


results matching ""

    No results matching ""