Interface Props

Description

A custom toggle switch component that extends MUI's Switch. It allows for additional customization and theming.

Remarks

This component is designed to be used in applications where a toggle switch is needed. It can be styled and themed according to the application's design system. The component uses MUI's Switch as a base and can be further customized with additional props.

Example

<ToggleSwitch
  checked={isChecked}
  onChange={handleToggle}
  color="primary"
  size="medium"
/>

Param: props

The properties for the toggle switch.

Returns

A toggle switch component.

interface Props {
    backgroundColor?:
        | "primary"
        | "blue5"
        | "white"
        | "textFaded"
        | "navigation"
        | "navigationTop"
        | "navigationSide"
        | "background"
        | "drawer"
        | "cards"
        | "cardDivider"
        | "cardSectionSeparator"
        | "fieldsOnCard"
        | "fieldsFloating"
        | "buttonSecondary"
        | "iconsDisabled"
        | "red"
        | "orange"
        | "greenDark"
        | "greenLight"
        | "text"
        | "redDark"
        | "orangeDark"
        | "greenDark2"
        | "blueDark"
        | "lineColor"
        | "iconButtonBg";
    label?: string;
    sx?: SxProps<Theme>;
}

Hierarchy

  • SwitchProps
    • Props

Properties

backgroundColor? label? sx?

Properties

OptionalbackgroundColor

backgroundColor?:
    | "primary"
    | "blue5"
    | "white"
    | "textFaded"
    | "navigation"
    | "navigationTop"
    | "navigationSide"
    | "background"
    | "drawer"
    | "cards"
    | "cardDivider"
    | "cardSectionSeparator"
    | "fieldsOnCard"
    | "fieldsFloating"
    | "buttonSecondary"
    | "iconsDisabled"
    | "red"
    | "orange"
    | "greenDark"
    | "greenLight"
    | "text"
    | "redDark"
    | "orangeDark"
    | "greenDark2"
    | "blueDark"
    | "lineColor"
    | "iconButtonBg"

Optionallabel

label?: string

Optionalsx

sx?: SxProps<Theme>

The system prop that allows defining system overrides as well as additional CSS styles.

Settings

Member Visibility

On This Page

Properties