Toggle Check box (button)with Semantic-React-ui(custom Checkbox)

Go to your Favorite code editor and create-react-app

and Install semantic-React-UI Package from npm or officially from semantic-React-UI website https://react.semantic-ui.com

To work with semantic react-UI You need add

import ‘semantic-ui-css/semantic.min.css’ in to your index.html

after adding refresh your web-browser if you see the changes then your good to

import React from ‘react’

import { Checkbox,Button } from ‘semantic-ui-react’

import React,{useState} from 'react'
import { Checkbox,Button } from 'semantic-ui-react'
const CheckboxExampleToggle = () =>{
const [name,setName]=useState(false)
       setName(!name)
}
return (
<div>
    <Checkbox toggle checked={name} onChange={handleChange}/>
    <p>Accept the terms and Condition</p>
     <Button color={name? 'green' :'red'} disabled={!name}>Send    Data</Button>
  </div>
 )
}
export default CheckboxExampleToggle
Happy coding...