# Toggle Switch

The `Toggle` component is used for the regular toggle operation like switching between light and dark mode and so many others. The Toggle component can be imported like this 

```jsx
import { Toggle } from "@wigxel/react-components/lib/buttons";
```

The Toggle component comes in five (5) variations. The `Rounded`, `Circle`, `Binary`, `Square`, and `Line` variation.  

{% hint style="info" %}
The variations are distinguished by design, they all play the roll of a toggle button.
{% endhint %}

To use any of the variations the variation is attached to the name of the component as shown below.

```jsx
import React from "react";

const ToggleButtons = () => {
    return (
        <div>
            <Toggle.Rounded 
                active={false} 
                onClick={() => console.log("clicked!!!")} 
            />
            <Toggle.Circle 
                active={false} 
                onClick={() => console.log("clicked!!!")} 
            />
            <Toggle.Binary 
                active={false} 
                onClick={() => console.log("clicked!!!")} 
            />
            <Toggle.Square 
                active={false} 
                onClick={() => console.log("clicked!!!")} 
            />
            <Toggle.Line 
                active={false} 
                onClick={() => console.log("clicked!!!")} 
            />
        </div>
    )
}
```

As seen above, the `Toggle` component accepts two properties, `active` and `onClick`. The `active` props accepts a boolean and it responsible for switching the component "on" an "off". the onClick props accepts a function which is used to which the boolean state in the active props.

{% hint style="info" %}
The best way to switch the toggle component is using a `state` in a class based component or `useState` hooks in a functional component.
{% endhint %}