Toggle

Used for binary options.

() => {
  const [toggle, setToggle] = useState(true)
  return <Toggle 
    value={toggle} 
    onClick={() => setToggle(!toggle)}
  />
}() => {
  const [toggle, setToggle] = useState(true)
  return <Toggle 
    value={toggle} 
    onClick={() => setToggle(!toggle)}
  />
}

Can be disabled.

<Toggle disabled/><Toggle disabled/>

Can also have a custom color.

() => {
  const [toggle, setToggle] = useState(true)
  return colors.map(color => (
    <Toggle 
      key={color}
      value={toggle} 
      sx={{color: color, mr: [2]}}
      onClick={() => setToggle(!toggle)}
    />
  ))
}() => {
  const [toggle, setToggle] = useState(true)
  return colors.map(color => (
    <Toggle 
      key={color}
      value={toggle} 
      sx={{color: color, mr: [2]}}
      onClick={() => setToggle(!toggle)}
    />
  ))
}

X,Y: 0000,0000#808080