Go Main page
Go Main page

Web components

Foundations
Components
About
cover

components

Toggle

v.1.0.0 | Saturn

Usage

The name of the object of tokens to style toggle is TOGGLE_STYLES.

You can not change the name of the object of tokens.

The variant prop allows to modify different aspects of the component.

Variants

Variants can modify the styles for each inner state of the toggle. The inner states are:

1234567
enum ToggleStateType {
  DEFAULT_SELECTED
  DEFAULT_UNSELECTED
  DISABLED_SELECTED
  DISABLED_UNSELECTED
  DEFAULT
}

The tokens used are:

12345678910
const TOGGLE_STYLES = {
  [VARIANT]:{
    [STATE]: {
      wrapper?: CommonStyleType;
      wrapperThreePositions?: CommonStyleType;
      thumb?: CommonStyleType;
      label?: TypographyTypes & CommonStyleType;
      labelWithIcons?: TypographyTypes & CommonStyleType;
      icon?: IconTypes;
    }

Example

toggle theme object example:

12345678910
const TOGGLE_STYLES = {
  [VARIANT]: {
    [STATE]: {
      wrapper: {
        height: 'height',
        width: 'width',
        background_color: 'color',
      },
      wrapperThreePositions: {
        height: 'height',
ToggleCode API
ToggleAccessibility