var Component=(()=>{var s=Object.create;var r=Object.defineProperty;var d=Object.getOwnPropertyDescriptor;var h=Object.getOwnPropertyNames;var p=Object.getPrototypeOf,m=Object.prototype.hasOwnProperty;var T=(n,e)=>()=>(e||n((e={exports:{}}).exports,e),e.exports),B=(n,e)=>{for(var t in e)r(n,t,{get:e[t],enumerable:!0})},g=(n,e,t,u)=>{if(e&&typeof e=="object"||typeof e=="function")for(let l of h(e))!m.call(n,l)&&l!==t&&r(n,l,{get:()=>e[l],enumerable:!(u=d(e,l))||u.enumerable});return n};var f=(n,e,t)=>(t=n!=null?s(p(n)):{},g(e||!n||!n.__esModule?r(t,"default",{value:n,enumerable:!0}):t,n)),x=n=>g(r({},"__esModule",{value:!0}),n);var c=T((y,a)=>{a.exports=_jsx_runtime});var j={};B(j,{default:()=>G,frontmatter:()=>b});var o=f(c()),b={id:"togger-button",title:"ToggleButton",description:"Toggle between different states in your app with either a checkbox or radio mode."};function i(n){let e=Object.assign({h2:"h2",ul:"ul",li:"li",code:"code",pre:"pre",h3:"h3",p:"p"},n.components),{ComponentLinks:t}=e;return t||v("ComponentLinks",!0),(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(t,{pro:{gumroad:!0}}),` `,(0,o.jsx)(e.h2,{id:"import",children:"Import"}),` `,(0,o.jsxs)(e.ul,{children:[` `,(0,o.jsxs)(e.li,{children:[(0,o.jsx)(e.code,{children:"ToggleButton"}),": A button extended with an ",(0,o.jsx)(e.code,{children:"isChecked"})," state to show on/off."]}),` `,(0,o.jsxs)(e.li,{children:[(0,o.jsx)(e.code,{children:"ToggleButtonGroup"}),": Used to group toggle buttons whose actions are related, that also flushes them together."]}),` `]}),` `,(0,o.jsx)(e.pre,{children:(0,o.jsx)(e.code,{className:"language-ts",children:`import { ToggleButton, ToggleButtonGroup } from '@saas-ui-pro/react' `})}),` `,(0,o.jsx)(e.h2,{id:"usage",children:"Usage"}),` `,(0,o.jsx)(e.h3,{id:"checkbox-group",children:"Checkbox group"}),` `,(0,o.jsx)(e.pre,{children:(0,o.jsx)(e.code,{className:"language-jsx",children:`import { ToggleButton, ToggleButtonGroup } from '@saas-ui-pro/react' export default function CheckboxGroup() { return ( console.log(e)} > Leads Customers ) } `})}),` `,(0,o.jsx)(e.h3,{id:"radio",children:"Radio"}),` `,(0,o.jsx)(e.pre,{children:(0,o.jsx)(e.code,{className:"language-jsx",children:`import { ToggleButton, ToggleButtonGroup } from '@saas-ui-pro/react' export default function RadioGroup() { return ( console.log(e)} > All Leads Customers ) } `})}),` `,(0,o.jsx)(e.h3,{id:"colorscheme",children:"Colorscheme"}),` `,(0,o.jsxs)(e.p,{children:["A ",(0,o.jsx)(e.code,{children:"colorScheme"})," can be passed to ",(0,o.jsx)(e.code,{children:"ToggleButtonGroup"})," to modify the theme of all of the child buttons."]}),` `,(0,o.jsx)(e.pre,{children:(0,o.jsx)(e.code,{className:"language-jsx",children:`import { ToggleButton, ToggleButtonGroup } from '@saas-ui-pro/react' export default function ColorScheme() { return ( console.log(e)} > All Leads Customers ) } `})}),` `,(0,o.jsx)(e.h3,{id:"variants",children:"Variants"}),` `,(0,o.jsxs)(e.p,{children:["Supported variants are ",(0,o.jsx)(e.code,{children:"outline"})," (default) and ",(0,o.jsx)(e.code,{children:"ghost"}),"."]}),` `,(0,o.jsx)(e.pre,{children:(0,o.jsx)(e.code,{className:"language-jsx",children:`import { ToggleButton, ToggleButtonGroup } from '@saas-ui-pro/react' export default function Variants() { return ( console.log(e)} > All Leads Customers ) } `})})]})}function C(n={}){let{wrapper:e}=n.components||{};return e?(0,o.jsx)(e,Object.assign({},n,{children:(0,o.jsx)(i,n)})):i(n)}var G=C;function v(n,e){throw new Error("Expected "+(e?"component":"object")+" `"+n+"` to be defined: you likely forgot to import, pass, or provide it.")}return x(j);})(); ;return Component;