1(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[2129],{53712:function(e,n,s){(window.__NEXT_P=window.__NEXT_P||[]).push(["/components/bootstrap/buttons",function(){return s(89504)}])},89504:function(e,n,s){"use strict";s.r(n);var a=s(85893),t=s(67294),i=s(34051),l=s(31555),r=s(52686),c=s(34289),o=s(9966),d=s(35005),h=s(70552),m=s(2086),x=s(17954),u=s(28984),b=s(41664),j=s.n(b),N=s(72867),g=s(33272);let p=()=>{let[e,n]=(0,t.useState)(!1),[s,b]=(0,t.useState)(!1),[p,f]=(0,t.useState)(!1),[v,Z]=(0,t.useState)(!1),[y,k]=(0,t.useState)(!1),[B,w]=(0,t.useState)(!1),[L,C]=(0,t.useState)(!1),[D,S]=(0,t.useState)(!1),[T,I]=(0,t.useState)(!1),[G,M]=(0,t.useState)(!1),[R,H]=(0,t.useState)(!1),[P,K]=(0,t.useState)(!1),[q,O]=(0,t.useState)(!1),[U,W]=(0,t.useState)(!1),[_,A]=(0,t.useState)(!1),[E,F]=(0,t.useState)(!1),[z,V]=(0,t.useState)(!1),[Y,X]=(0,t.useState)(!1),[$,J]=(0,t.useState)(!1),[Q,ee]=(0,t.useState)(!1),[en,es]=(0,t.useState)(!1),[ea,et]=(0,t.useState)(!1),[ei,el]=(0,t.useState)(!1),[er,ec]=(0,t.useState)(!1),[eo,ed]=(0,t.useState)(!1),eh=()=>{ed(!eo)};return(0,a.jsxs)("div",{children:[(0,a.jsx)(g.Z,{title:"Buttons"}),(0,a.jsx)(N.Z,{titles:"Buttons",active:"Buttons",items:["Componets"]}),(0,a.jsxs)(i.Z,{children:[(0,a.jsx)(l.Z,{md:12,xl:6,children:(0,a.jsxs)(r.Z,{children:[(0,a.jsxs)(r.Z.Header,{children:[(0,a.jsx)(r.Z.Title,{children:"Default Button"}),(0,a.jsx)(c.Z,{className:"ms-auto",children:(0,a.jsx)(c.Z.Check,{type:"switch",label:"Show Code",id:"custom-switch",onClick:()=>n(!e),className:"showcode d-flex ms-auto mx-2"})})]}),(0,a.jsxs)(r.Z.Body,{children:[(0,a.jsxs)("div",{className:"text-wrap",children:[(0,a.jsxs)("p",{children:["Use any of the available ",(0,a.jsx)("code",{className:"highlighter-rouge",children:".btn btn-"})," classes to quickly create a styled button."]}),(0,a.jsx)("div",{className:"example",children:(0,a.jsxs)("div",{className:"btn-list",children:[(0,a.jsx)(j(),{href:"#!",className:"btn btn-default",children:"Default"}),(0,a.jsx)(j(),{href:"#!",className:"btn btn-primary",children:"Primary"}),(0,a.jsx)(j(),{href:"#!",className:"btn btn-secondary",children:"Secondary"}),(0,a.jsx)(j(),{href:"#!",className:"btn btn-success",children:"Success"}),(0,a.jsx)(j(),{href:"#!",className:"btn btn-info",children:"Info"}),(0,a.jsx)(j(),{href:"#!",className:"btn btn-warning",children:"Warning"}),(0,a.jsx)(j(),{href:"#!",className:"btn btn-danger",children:"Danger"}),(0,a.jsx)(j(),{href:"#!",className:"btn btn-light btn-link",children:"Link"})]})})]}),(0,a.jsx)(o.Z,{in:e,className:"mt-2",children:(0,a.jsx)("pre",{children:(0,a.jsx)("code",{children:'\n <div className="btn-list">\n <Link href="#!" className="btn btn-default">Default</Link>\n <Link href="#!" className="btn btn-primary">Primary</Link>\n <Link href="#!" className="btn btn-secondary">Secondary</Link>\n <Link href="#!" className="btn btn-success">Success</Link>\n <Link href="#!" className="btn btn-info">Info</Link>\n <Link href="#!" className="btn btn-warning">Warning</Link>\n <Link href="#!" className="btn btn-danger">Danger</Link>\n <Link href="#!" className="btn btn-light btn-link">Link</Link>\n</div>\n'})})})]})]})}),(0,a.jsx)(l.Z,{md:12,xl:6,children:(0,a.jsxs)(r.Z,{children:[(0,a.jsxs)(r.Z.Header,{children:[(0,a.jsx)(r.Z.Title,{children:"Disable Default Button"}),(0,a.jsx)(c.Z,{className:"ms-auto",children:(0,a.jsx)(c.Z.Check,{type:"switch",label:"Show Code",id:"custom-switch",onClick:()=>b(!s),className:"showcode d-flex ms-auto mx-2"})})]}),(0,a.jsxs)(r.Z.Body,{children:[(0,a.jsxs)("div",{className:"text-wrap",children:[(0,a.jsxs)("p",{children:["Use any of the available ",(0,a.jsx)("code",{className:"highlighter-rouge",children:".btn btn-"})," classes you must add the ",(0,a.jsx)("code",{className:"highlighter-rouge",children:".disabled"})," className to make it visually appear disabled."]}),(0,a.jsx)("div",{className:"example",children:(0,a.jsxs)("div",{className:"btn-list",children:[(0,a.jsx)(j(),{href:"#!",className:"btn btn-default disabled",children:"Default"}),(0,a.jsx)(j(),{href:"#!",className:"btn btn-primary disabled",children:"Primary"}),(0,a.jsx)(j(),{href:"#!",className:"btn btn-secondary disabled",children:"Secondary"}),(0,a.jsx)(j(),{href:"#!",className:"btn btn-success disabled",children:"Success"}),(0,a.jsx)(j(),{href:"#!",className:"btn btn-info disabled",children:"Info"}),(0,a.jsx)(j(),{href:"#!",className:"btn btn-warning disabled",children:"Warning"}),(0,a.jsx)(j(),{href:"#!",className:"btn btn-danger disabled",children:"Danger"}),(0,a.jsx)(j(),{href:"#!",className:"btn btn-light btn-link disabled",children:"Link"})]})})]}),(0,a.jsx)(o.Z,{in:s,className:"mt-2",children:(0,a.jsx)("pre",{children:(0,a.jsx)("code",{children:'\n <div className="btn-list">\n <Link href="#!" className="btn btn-default disabled">Default</Link>\n <Link href="#!" className="btn btn-primary disabled">Primary</Link>\n <Link href="#!" className="btn btn-secondary disabled">Secondary</Link>\n <Link href="#!" className="btn btn-success disabled">Success</Link>\n <Link href="#!" className="btn btn-info disabled">Info</Link>\n <Link href="#!" className="btn btn-warning disabled">Warning</Link>\n <Link href="#!" className="btn btn-danger disabled">Danger</Link>\n <Link href="#!" className="btn btn-light btn-link disabled">Link</Link>\n</div>\n\n'})})})]})]})})]}),(0,a.jsxs)(i.Z,{children:[(0,a.jsx)(l.Z,{md:12,xl:6,children:(0,a.jsxs)(r.Z,{children:[(0,a.jsxs)(r.Z.Header,{children:[(0,a.jsx)(r.Z.Title,{children:"Rounded Button"}),(0,a.jsx)(c.Z,{className:"ms-auto",children:(0,a.jsx)(c.Z.Check,{type:"switch",label:"Show Code",id:"custom-switch",onClick:()=>f(!p),className:"showcode d-flex ms-auto mx-2"})})]}),(0,a.jsxs)(r.Z.Body,{children:[(0,a.jsxs)("div",{className:"text-wrap",children:[(0,a.jsxs)("p",{children:["Use any of the available ",(0,a.jsx)("code",{className:"highlighter-rouge",children:".btn-pill"})," classes to quickly create a styled button."]}),(0,a.jsx)("div",{className:"example",children:(0,a.jsxs)("div",{className:"btn-list",children:[(0,a.jsx)(j(),{href:"#!",className:"btn btn-default btn-pill",children:"Default"}),(0,a.jsx)(j(),{href:"#!",className:"btn btn-primary btn-pill",children:"Primary"}),(0,a.jsx)(j(),{href:"#!",className:"btn btn-secondary btn-pill",children:"Secondary"}),(0,a.jsx)(j(),{href:"#!",className:"btn btn-success btn-pill",children:"Success"}),(0,a.jsx)(j(),{href:"#!",className:"btn btn-info btn-pill",children:"Info"}),(0,a.jsx)(j(),{href:"#!",className:"btn btn-warning btn-pill",children:"Warning"}),(0,a.jsx)(j(),{href:"#!",className:"btn btn-danger btn-pill",children:"Danger"})]})})]}),(0,a.jsx)(o.Z,{in:p,className:"mt-2",children:(0,a.jsx)("pre",{children:(0,a.jsx)("code",{children:'\n <div className="btn-list">\n <Link href="#!" className="btn btn-default btn-pill">Default</Link>\n <Link href="#!" className="btn btn-primary btn-pill">Primary</Link>\n <Link href="#!" className="btn btn-secondary btn-pill">Secondary</Link>\n <Link href="#!" className="btn btn-success btn-pill">Success</Link>\n <Link href="#!" className="btn btn-info btn-pill">Info</Link>\n <Link href="#!" className="btn btn-warning btn-pill">Warning</Link>\n <Link href="#!" className="btn btn-danger btn-pill">Danger</Link>\n</div>\n\n'})})})]})]})}),(0,a.jsx)(l.Z,{md:12,xl:6,children:(0,a.jsxs)(r.Z,{children:[(0,a.jsxs)(r.Z.Header,{children:[(0,a.jsx)(r.Z.Title,{children:"Outline Button"}),(0,a.jsx)(c.Z,{className:"ms-auto",children:(0,a.jsx)(c.Z.Check,{type:"switch",label:"Show Code",id:"custom-switch",onClick:()=>Z(!v),className:"showcode d-flex ms-auto mx-2"})})]}),(0,a.jsxs)(r.Z.Body,{children:[(0,a.jsxs)("div",{className:"text-wrap",children:[(0,a.jsxs)("p",{children:["Use any of the available ",(0,a.jsx)("code",{className:"highlighter-rouge",children:".btn-outline-"})," classes to quickly create a styled button."]}),(0,a.jsx)("div",{className:"example",children:(0,a.jsxs)("div",{className:"btn-list",children:[(0,a.jsx)(j(),{href:"#!",className:"btn btn-outline-default",children:"Default"}),(0,a.jsx)(j(),{href:"#!",className:"btn btn-outline-primary",children:"Primary"}),(0,a.jsx)(j(),{href:"#!",className:"btn btn-outline-secondary",children:"Secondary"}),(0,a.jsx)(j(),{href:"#!",className:"btn btn-outline-success",children:"Success"}),(0,a.jsx)(j(),{href:"#!",className:"btn btn-outline-info",children:"Info"}),(0,a.jsx)(j(),{href:"#!",className:"btn btn-outline-warning",children:"Warning"}),(0,a.jsx)(j(),{href:"#!",className:"btn btn-outline-danger",children:"Danger"})]})})]}),(0,a.jsx)(o.Z,{in:v,className:"mt-2",children:(0,a.jsx)("pre",{children:(0,a.jsx)("code",{children:'\n <div className="btn-list">\n <Link href="#!" className="btn btn-outline-default">Default</Link>\n <Link href="#!" className="btn btn-outline-primary">Primary</Link>\n <Link href="#!" className="btn btn-outline-secondary">Secondary</Link>\n <Link href="#!" className="btn btn-outline-success">Success</Link>\n <Link href="#!" className="btn btn-outline-info">Info</Link>\n <Link href="#!" className="btn btn-outline-warning">Warning</Link>\n <Link href="#!" className="btn btn-outline-danger">Danger</Link>\n</div>\n'})})})]})]})})]}),(0,a.jsxs)(i.Z,{children:[(0,a.jsx)(l.Z,{md:12,xl:6,children:(0,a.jsxs)(r.Z,{children:[(0,a.jsxs)(r.Z.Header,{children:[(0,a.jsx)(r.Z.Title,{children:"Light Button"}),(0,a.jsx)(c.Z,{className:"ms-auto",children:(0,a.jsx)(c.Z.Check,{type:"switch",label:"Show Code",id:"custom-switch",onClick:()=>k(!y),className:"showcode d-flex ms-auto mx-2"})})]}),(0,a.jsxs)(r.Z.Body,{children:[(0,a.jsxs)("div",{className:"text-wrap",children:[(0,a.jsxs)("p",{children:["Use any of the available ",(0,a.jsx)("code",{className:"highlighter-rouge",children:".btn-light-"})," classes to quickly create a styled button."]}),(0,a.jsx)("div",{className:"example",children:(0,a.jsxs)("div",{className:"btn-list",children:[(0,a.jsx)(j(),{href:"#!",className:"btn btn-default-light",children:"Default"}),(0,a.jsx)(j(),{href:"#!",className:"btn btn-primary-light ",children:"Primary"}),(0,a.jsx)(j(),{href:"#!",className:"btn btn-secondary-light ",children:"Secondary"}),(0,a.jsx)(j(),{href:"#!",className:"btn btn-success-light ",children:"Success"}),(0,a.jsx)(j(),{href:"#!",className:"btn btn-info-light ",children:"Info"}),(0,a.jsx)(j(),{href:"#!",className:"btn btn-warning-light ",children:"Warning"}),(0,a.jsx)(j(),{href:"#!",className:"btn btn-danger-light ",children:"Danger"})]})})]}),(0,a.jsx)(o.Z,{in:y,className:"mt-2",children:(0,a.jsx)("pre",{children:(0,a.jsx)("code",{children:'\n <div className="btn-list">\n <Link href="#!" className="btn btn-default-light">Default</Link>\n <Link href="#!" className="btn btn-primary-light ">Primary</Link>\n <Link href="#!" className="btn btn-secondary-light ">Secondary</Link>\n <Link href="#!" className="btn btn-success-light ">Success</Link>\n <Link href="#!" className="btn btn-info-light ">Info</Link>\n <Link href="#!" className="btn btn-warning-light ">Warning</Link>\n <Link href="#!" className="btn btn-danger-light ">Danger</Link>\n</div>\n'})})})]})]})}),(0,a.jsx)(l.Z,{md:12,xl:6,children:(0,a.jsxs)(r.Z,{children:[(0,a.jsxs)(r.Z.Header,{children:[(0,a.jsx)(r.Z.Title,{children:"Button with icon"}),(0,a.jsx)(c.Z,{className:"ms-auto",children:(0,a.jsx)(c.Z.Check,{type:"switch",label:"Show Code",id:"custom-switch",onClick:()=>w(!B),className:"showcode d-flex ms-auto mx-2"})})]}),(0,a.jsxs)(r.Z.Body,{children:[(0,a.jsxs)("div",{className:"text-wrap",children:[(0,a.jsx)("p",{children:"Basic buttons are traditional buttons with borders color opitons."}),(0,a.jsx)("div",{className:"example",children:(0,a.jsxs)("div",{className:"btn-list btn-list-icon",children:[(0,a.jsxs)(d.Z,{variant:"dark",children:[(0,a.jsx)("i",{className:"fe fe-upload me-2"}),"Upload"]}),(0,a.jsxs)(d.Z,{variant:"warning",children:[(0,a.jsx)("i",{className:"fe fe-heart me-2"}),"I like"]}),(0,a.jsxs)(d.Z,{variant:"success",children:[(0,a.jsx)("i",{className:"fe fe-check me-2"}),"I agree"]}),(0,a.jsxs)(d.Z,{variant:"primary",children:[(0,a.jsx)("i",{className:"fe fe-plus me-2"}),"More"]}),(0,a.jsxs)(d.Z,{variant:"danger",children:[(0,a.jsx)("i",{className:"fe fe-link me-2"}),"Link"]}),(0,a.jsxs)(d.Z,{variant:"info",children:[(0,a.jsx)("i",{className:"fe fe-message-circle me-2"}),"Comment"]})]})})]}),(0,a.jsx)(o.Z,{in:B,className:"mt-2",children:(0,a.jsx)("pre",{children:(0,a.jsx)("code",{children:'\n <div className="btn-list btn-list-icon">\n <Button variant=\'dark\'><i className="fe fe-upload me-2"></i>Upload</Button>\n <Button variant=\'warning\'><i className="fe fe-heart me-2"></i>I like</Button>\n <Button variant=\'success\'><i className="fe fe-check me-2"></i>I agree</Button>\n <Button variant=\'primary\'><i className="fe fe-plus me-2"></i>More</Button>\n <Button variant=\'danger\'><i className="fe fe-link me-2"></i>Link</Button>\n <Button variant=\'info\'><i className="fe fe-message-circle me-2"></i>Comment</Button>\n</div>\n'})})})]})]})})]}),(0,a.jsxs)(i.Z,{children:[(0,a.jsx)(l.Z,{md:12,xl:6,children:(0,a.jsxs)(r.Z,{children:[(0,a.jsxs)(r.Z.Header,{children:[(0,a.jsx)(r.Z.Title,{children:"Button size"}),(0,a.jsx)(c.Z,{className:"ms-auto",children:(0,a.jsx)(c.Z.Check,{type:"switch",label:"Show Code",id:"custom-switch",onClick:()=>C(!L),className:"showcode d-flex ms-auto mx-2"})})]}),(0,a.jsxs)(r.Z.Body,{children:[(0,a.jsxs)("div",{className:"text-wrap",children:[(0,a.jsxs)("p",{children:["Add ",(0,a.jsx)("code",{className:"highlighter-rouge",children:".btn-lg"})," or ",(0,a.jsx)("code",{className:"highlighter-rouge",children:".btn-sm"})," for additional sizes."]}),(0,a.jsx)("div",{className:"example",children:(0,a.jsx)("div",{className:"btn-list",children:(0,a.jsxs)(i.Z,{cols:4,children:[(0,a.jsx)(l.Z,{className:"mb-2",children:(0,a.jsxs)("div",{className:"btn-list",children:[(0,a.jsx)(d.Z,{className:"btn-sm mb-1",variant:"primary",children:"Small button"}),(0,a.jsx)(d.Z,{className:"btn-sm mb-1",variant:"primary",children:"Small button"})]})}),(0,a.jsxs)(l.Z,{className:"mb-2",children:[(0,a.jsx)(d.Z,{className:"mb-1 me-1",variant:"secondary",children:"Default button"}),(0,a.jsx)(d.Z,{className:"mb-1",variant:"secondary",children:"Default button"})]}),(0,a.jsxs)(l.Z,{className:"mb-2",children:[(0,a.jsx)(d.Z,{className:"btn-lg mb-1 me-1",variant:"success",children:"Large button"}),(0,a.jsx)(d.Z,{className:"btn-lg mb-1",variant:"success",children:"Large button"})]})]})})})]}),(0,a.jsx)(o.Z,{in:L,className:"mt-2",children:(0,a.jsx)("pre",{children:(0,a.jsx)("code",{children:'\n <div className="btn-list">\n <Row cols={4}>\n <Col className="mb-2">\n <div className="btn-list">\n <Button className="btn-sm mb-1" variant=\'primary\'>Small button</Button>\n <Button className="btn-sm mb-1" variant=\'primary\'>Small button</Button>\n </div>\n </Col>\n <Col className="mb-2">\n <Button className="mb-1" variant=\'secondary\'>Default button</Button>\n <Button className="mb-1" variant=\'secondary\'>Default button</Button>\n </Col>\n <Col className="mb-2">\n <Button className="btn-lg mb-1 me-1" variant=\'success\'>Large button</Button>\n <Button className="btn-lg mb-1" variant=\'success\'>Large button</Button>\n </Col>\n </Row>\n</div>\n\n'})})})]})]})}),(0,a.jsx)(l.Z,{md:12,xl:6,children:(0,a.jsxs)(r.Z,{children:[(0,a.jsxs)(r.Z.Header,{children:[(0,a.jsx)(r.Z.Title,{children:"Block Button"}),(0,a.jsx)(c.Z,{className:"ms-auto",children:(0,a.jsx)(c.Z.Check,{type:"switch",label:"Show Code",id:"custom-switch",onClick:()=>S(!D),className:"showcode d-flex ms-auto mx-2"})})]}),(0,a.jsxs)(r.Z.Body,{children:[(0,a.jsxs)("div",{className:"text-wrap",children:[(0,a.jsxs)("p",{children:["Add ",(0,a.jsx)("code",{className:"highlighter-rouge",children:".d-grid"})," or ",(0,a.jsx)("code",{className:"highlighter-rouge",children:".gap-2"})," for additional sizes."]}),(0,a.jsx)("div",{className:"example",children:(0,a.jsxs)("div",{className:"d-grid gap-2",children:[(0,a.jsx)(d.Z,{className:"mb-1",variant:"secondary-light",children:"Block button"}),(0,a.jsx)(d.Z,{className:"mb-1",variant:"danger-light",children:"Block button"})]})})]}),(0,a.jsx)(o.Z,{in:D,className:"mt-2",children:(0,a.jsx)("pre",{children:(0,a.jsx)("code",{children:'\n <div className="d-grid gap-2">\n <Button className="mb-1" variant=\'secondary-light\'>Block button</Button>\n <Button className="mb-1" va
1riant=\'danger-light\'>Block button</Button>\n</div>\n'})})})]})]})})]}),(0,a.jsxs)(i.Z,{children:[(0,a.jsx)(l.Z,{md:12,xl:6,children:(0,a.jsxs)(r.Z,{children:[(0,a.jsxs)(r.Z.Header,{children:[(0,a.jsx)(r.Z.Title,{children:"Icon buttons"}),(0,a.jsx)(c.Z,{className:"ms-auto",children:(0,a.jsx)(c.Z.Check,{type:"switch",label:"Show Code",id:"custom-switch",onClick:()=>I(!T),className:"showcode d-flex ms-auto mx-2"})})]}),(0,a.jsxs)(r.Z.Body,{children:[(0,a.jsxs)("div",{className:"text-wrap",children:[(0,a.jsxs)("p",{children:["Icon only button. Add ",(0,a.jsx)("code",{className:"highlighter-rouge",children:".btn-icon"})," classes to quickly create a styled button.."]}),(0,a.jsx)("div",{className:"example",children:(0,a.jsxs)("div",{className:"btn-list",children:[(0,a.jsx)(d.Z,{className:"btn-icon",variant:"primary",children:(0,a.jsx)("i",{className:"fe fe-activity"})}),(0,a.jsx)(d.Z,{className:"btn-icon",variant:"github",children:(0,a.jsx)("i",{className:"fe fe-github"})}),(0,a.jsx)(d.Z,{className:"btn-icon",variant:"success",children:(0,a.jsx)("i",{className:"fe fe-bell"})}),(0,a.jsx)(d.Z,{className:"btn-icon",variant:"warning",children:(0,a.jsx)("i",{className:"fe fe-star"})}),(0,a.jsx)(d.Z,{className:"btn-icon",variant:"danger",children:(0,a.jsx)("i",{className:"fe fe-trash"})}),(0,a.jsx)(d.Z,{className:"btn-icon",variant:"purple",children:(0,a.jsx)("i",{className:"fe fe-mail"})}),(0,a.jsx)(d.Z,{className:"btn-icon",variant:"secondary",children:(0,a.jsx)("i",{className:"fe fe-git-merge"})})]})})]}),(0,a.jsx)(o.Z,{in:T,className:"mt-2",children:(0,a.jsx)("pre",{children:(0,a.jsx)("code",{children:'\n <div className="btn-list">\n <Button className="btn-icon" variant=\'primary\'><i className="fe fe-activity"></i></Button>\n <Button className="btn-icon" variant=\'github\'><i className="fe fe-github"></i></Button>\n <Button className="btn-icon" variant=\'success\'><i className="fe fe-bell"></i></Button>\n <Button className="btn-icon" variant=\'warning\'><i className="fe fe-star"></i></Button>\n <Button className="btn-icon" variant=\'danger\'><i className="fe fe-trash"></i></Button>\n <Button className="btn-icon" variant=\'purple\'><i className="fe fe-mail"></i></Button>\n <Button className="btn-icon" variant=\'secondary\'><i className="fe fe-git-merge"></i></Button>\n</div>\n'})})})]})]})}),(0,a.jsx)(l.Z,{md:12,xl:6,children:(0,a.jsxs)(r.Z,{children:[(0,a.jsxs)(r.Z.Header,{children:[(0,a.jsx)(r.Z.Title,{children:"Social buttons"}),(0,a.jsx)(c.Z,{className:"ms-auto",children:(0,a.jsx)(c.Z.Check,{type:"switch",label:"Show Code",id:"custom-switch",onClick:()=>M(!G),className:"showcode d-flex ms-auto mx-2"})})]}),(0,a.jsxs)(r.Z.Body,{children:[(0,a.jsxs)("div",{className:"text-wrap",children:[(0,a.jsx)("p",{children:"You can use only icons."}),(0,a.jsx)("div",{className:"example",children:(0,a.jsxs)("div",{className:"btn-list",children:[(0,a.jsx)(d.Z,{className:"btn-icon",variant:"facebook",children:(0,a.jsx)("i",{className:"fa fa-facebook"})}),(0,a.jsx)(d.Z,{className:"btn-icon",variant:"twitter",children:(0,a.jsx)("i",{className:"fa fa-twitter"})}),(0,a.jsx)(d.Z,{className:"btn-icon",variant:"google",children:(0,a.jsx)("i",{className:"fa fa-google"})}),(0,a.jsx)(d.Z,{className:"btn-icon",variant:"youtube",children:(0,a.jsx)("i",{className:"fa fa-youtube"})}),(0,a.jsx)(d.Z,{className:"btn-icon",variant:"vimeo",children:(0,a.jsx)("i",{className:"fa fa-vimeo"})}),(0,a.jsx)(d.Z,{className:"btn-icon",variant:"dribbble",children:(0,a.jsx)("i",{className:"fa fa-dribbble"})}),(0,a.jsx)(d.Z,{className:"btn-icon",variant:"github",children:(0,a.jsx)("i",{className:"fa fa-github"})}),(0,a.jsx)(d.Z,{className:"btn-icon",variant:"instagram",children:(0,a.jsx)("i",{className:"fa fa-instagram"})}),(0,a.jsx)(d.Z,{className:"btn-icon",variant:"pinterest",children:(0,a.jsx)("i",{className:"fa fa-pinterest"})})]})})]}),(0,a.jsx)(o.Z,{in:G,className:"mt-2",children:(0,a.jsx)("pre",{children:(0,a.jsx)("code",{children:'\n <div className="btn-list">\n <Button className="btn-icon" variant=\'facebook\'><i className="fa fa-facebook"></i></Button>\n <Button className="btn-icon" variant=\'twitter\'><i className="fa fa-twitter"></i></Button>\n <Button className="btn-icon" variant=\'google\'><i className="fa fa-google"></i></Button>\n <Button className="btn-icon" variant=\'youtube\'><i className="fa fa-youtube"></i></Button>\n <Button className="btn-icon" variant=\'vimeo\'><i className="fa fa-vimeo"></i></Button>\n <Button className="btn-icon" variant=\'dribbble\'><i className="fa fa-dribbble"></i></Button>\n <Button className="btn-icon" variant=\'github\'><i className="fa fa-github"></i></Button>\n <Button className="btn-icon" variant=\'instagram\'><i className="fa fa-instagram"></i></Button>\n <Button className="btn-icon" variant=\'pinterest\'><i className="fa fa-pinterest"></i></Button>\n</div>\n'})})})]})]})})]}),(0,a.jsxs)(i.Z,{children:[(0,a.jsx)(l.Z,{md:12,xl:6,children:(0,a.jsxs)(r.Z,{children:[(0,a.jsxs)(r.Z.Header,{children:[(0,a.jsx)(r.Z.Title,{children:"Button Tags"}),(0,a.jsx)(c.Z,{className:"ms-auto",children:(0,a.jsx)(c.Z.Check,{type:"switch",label:"Show Code",id:"custom-switch",onClick:()=>H(!R),className:"showcode d-flex ms-auto mx-2"})})]}),(0,a.jsxs)(r.Z.Body,{children:[(0,a.jsxs)("div",{className:"text-wrap",children:[(0,a.jsxs)("p",{children:["Add ",(0,a.jsx)("code",{className:"highlighter-rouge",children:".btn"}),", ",(0,a.jsx)("code",{className:"highlighter-rouge",children:"<input>"}),", ",(0,a.jsx)("code",{className:"highlighter-rouge",children:"<a>"}),"classes to quickly create a styled button.."]}),(0,a.jsx)("div",{className:"example",children:(0,a.jsxs)("div",{className:"btn-list",children:[(0,a.jsx)(j(),{className:"btn btn-primary",href:"#!",role:"button",children:"Link"}),(0,a.jsx)(d.Z,{variant:"primary",type:"submit",children:"Button"}),(0,a.jsx)("input",{className:"btn btn-primary",type:"button",value:"Input"}),(0,a.jsx)("input",{className:"btn btn-primary",type:"submit",value:"Submit"}),(0,a.jsx)("input",{className:"btn btn-primary",type:"reset",value:"Reset"})]})})]}),(0,a.jsx)(o.Z,{in:R,className:"mt-2",children:(0,a.jsx)("pre",{children:(0,a.jsx)("code",{children:'\n <div className="btn-list">\n <Link className="btn btn-primary" href="#!" role="button">Link</Link>\n <Button variant="primary" type="submit">Button</Button>\n <input className="btn btn-primary" type="button" value="Input" />\n <input className="btn btn-primary" type="submit" value="Submit" />\n <input className="btn btn-primary" type="reset" value="Reset" />\n</div>\n'})})})]})]})}),(0,a.jsx)(l.Z,{md:12,xl:6,children:(0,a.jsxs)(r.Z,{children:[(0,a.jsxs)(r.Z.Header,{children:[(0,a.jsx)(r.Z.Title,{children:"Toggle buttons"}),(0,a.jsx)(c.Z,{className:"ms-auto",children:(0,a.jsx)(c.Z.Check,{type:"switch",label:"Show Code",id:"custom-switch",onClick:()=>K(!P),className:"showcode d-flex ms-auto mx-2"})})]}),(0,a.jsxs)(r.Z.Body,{children:[(0,a.jsxs)("div",{className:"text-wrap",children:[(0,a.jsxs)("p",{children:["Add ",(0,a.jsx)("code",{className:"highlighter-rouge",children:'data-bs-toggle="button"'})," to toggle a button ",(0,a.jsx)("code",{className:"highlighter-rouge",children:".active"})," className & required ",(0,a.jsx)("code",{className:"highlighter-rouge",children:'aria-pressed="true"'}),"."]}),(0,a.jsx)("div",{className:"example",children:(0,a.jsxs)("div",{className:"btn-list",children:[(0,a.jsx)(d.Z,{variant:"primary",children:"Toggle button"}),(0,a.jsx)(d.Z,{variant:"primary",active:!0,children:"Active toggle button"}),(0,a.jsx)(d.Z,{variant:"primary",disabled:!0,children:"Disabled toggle button"})]})})]}),(0,a.jsx)(o.Z,{in:P,className:"mt-2",children:(0,a.jsx)("pre",{children:(0,a.jsx)("code",{children:'\n <div className="btn-list">\n <Button variant="primary">Toggle button</Button>\n <Button variant="primary" active>Active toggle button</Button>\n <Button variant="primary" disabled >Disabled toggle button</Button>\n</div>\n\n'})})})]})]})})]}),(0,a.jsxs)(i.Z,{children:[(0,a.jsx)(l.Z,{md:12,xl:6,children:(0,a.jsxs)(r.Z,{children:[(0,a.jsxs)(r.Z.Header,{children:[(0,a.jsx)(r.Z.Title,{children:"Color variations"}),(0,a.jsx)(c.Z,{className:"ms-auto",children:(0,a.jsx)(c.Z.Check,{type:"switch",label:"Show Code",id:"custom-switch",onClick:()=>O(!q),className:"showcode d-flex ms-auto mx-2"})})]}),(0,a.jsxs)(r.Z.Body,{children:[(0,a.jsxs)("div",{className:"text-wrap",children:[(0,a.jsx)("p",{children:"The classic button, in different c
1olors."}),(0,a.jsx)("div",{className:"example",children:(0,a.jsxs)("div",{className:"btn-list",children:[(0,a.jsx)(j(),{href:"#!",className:"btn btn-blue",children:"Blue"}),(0,a.jsx)(j(),{href:"#!",className:"btn btn-azure",children:"Azure"}),(0,a.jsx)(j(),{href:"#!",className:"btn btn-indigo",children:"Indigo"}),(0,a.jsx)(j(),{href:"#!",className:"btn btn-purple",children:"Purple"}),(0,a.jsx)(j(),{href:"#!",className:"btn btn-pink",children:"Pink"}),(0,a.jsx)(j(),{href:"#!",className:"btn btn-red",children:"Red"}),(0,a.jsx)(j(),{href:"#!",className:"btn btn-orange",children:"Orange"}),(0,a.jsx)(j(),{href:"#!",className:"btn btn-yellow",children:"Yellow"}),(0,a.jsx)(j(),{href:"#!",className:"btn btn-lime",children:"Lime"}),(0,a.jsx)(j(),{href:"#!",className:"btn btn-green",children:"Green"}),(0,a.jsx)(j(),{href:"#!",className:"btn btn-teal",children:"Teal"}),(0,a.jsx)(j(),{href:"#!",className:"btn btn-cyan",children:"Cyan"}),(0,a.jsx)(j(),{href:"#!",className:"btn btn-gray",children:"Gray"}),(0,a.jsx)(j(),{href:"#!",className:"btn btn-gray-dark",children:"Dark gray"})]})})]}),(0,a.jsx)(o.Z,{in:q,className:"mt-2",children:(0,a.jsx)("pre",{children:(0,a.jsx)("code",{children:'\n <div className="btn-list">\n <Link href="#!" className="btn btn-blue">Blue</Link>\n <Link href="#!" className="btn btn-azure">Azure</Link>\n <Link href="#!" className="btn btn-indigo">Indigo</Link>\n <Link href="#!" className="btn btn-purple">Purple</Link>\n <Link href="#!" className="btn btn-pink">Pink</Link>\n <Link href="#!" className="btn btn-red">Red</Link>\n <Link href="#!" className="btn btn-orange">Orange</Link>\n <Link href="#!" className="btn btn-yellow">Yellow</Link>\n <Link href="#!" className="btn btn-lime">Lime</Link>\n <Link href="#!" className="btn btn-green">Green</Link>\n <Link href="#!" className="btn btn-teal">Teal</Link>\n <Link href="#!" className="btn btn-cyan">Cyan</Link>\n <Link href="#!" className="btn btn-gray">Gray</Link>\n <Link href="#!" className="btn btn-gray-dark">Dark gray</Link>\n</div>\n\n'})})})]})]})}),(0,a.jsx)(l.Z,{md:12,xl:6,children:(0,a.jsxs)(r.Z,{children:[(0,a.jsxs)(r.Z.Header,{children:[(0,a.jsx)(r.Z.Title,{children:"Social buttons"}),(0,a.jsx)(c.Z,{className:"ms-auto",children:(0,a.jsx)(c.Z.Check,{type:"switch",label:"Show Code",id:"custom-switch",onClick:()=>W(!U),className:"showcode d-flex ms-auto mx-2"})})]}),(0,a.jsxs)(r.Z.Body,{children:[(0,a.jsxs)("div",{className:"text-wrap",children:[(0,a.jsx)("p",{children:"The classic button, in different social classes."}),(0,a.jsx)("div",{className:"example",children:(0,a.jsxs)("div",{className:"btn-list",children:[(0,a.jsxs)(d.Z,{variant:"facebook",children:[(0,a.jsx)("i",{className:"fa fa-facebook me-2"}),"Facebook"]}),(0,a.jsxs)(d.Z,{variant:"twitter",children:[(0,a.jsx)("i",{className:"fa fa-twitter me-2"}),"Twitter"]}),(0,a.jsxs)(d.Z,{variant:"google",children:[(0,a.jsx)("i",{className:"fa fa-google me-2"}),"Google"]}),(0,a.jsxs)(d.Z,{variant:"youtube",children:[(0,a.jsx)("i",{className:"fa fa-youtube me-2"}),"Youtube"]}),(0,a.jsxs)(d.Z,{variant:"vimeo",children:[(0,a.jsx)("i",{className:"fa fa-vimeo me-2"}),"Vimeo"]}),(0,a.jsxs)(d.Z,{variant:"dribbble",children:[(0,a.jsx)("i",{className:"fa fa-dribbble me-2"}),"Dribble"]}),(0,a.jsxs)(d.Z,{variant:"github",children:[(0,a.jsx)("i",{className:"fa fa-github me-2"}),"Github"]}),(0,a.jsxs)(d.Z,{variant:"instagram",children:[(0,a.jsx)("i",{className:"fa fa-instagram me-2"}),"Instagram"]}),(0,a.jsxs)(d.Z,{variant:"pinterest",children:[(0,a.jsx)("i",{className:"fa fa-pinterest me-2"}),"Pinterest"]}),(0,a.jsxs)(d.Z,{variant:"vk",children:[(0,a.jsx)("i",{className:"fa fa-vk me-2"}),"VKontakte"]}),(0,a.jsxs)(d.Z,{variant:"rss",children:[(0,a.jsx)("i",{className:"fa fa-rss me-2"}),"RSS"]}),(0,a.jsxs)(d.Z,{variant:"flickr",children:[(0,a.jsx)("i",{className:"fa fa-flickr me-2"}),"Flickr"]})]})})]}),(0,a.jsx)(o.Z,{in:U,className:"mt-2",children:(0,a.jsx)("pre",{children:(0,a.jsx)("code",{children:'\n <div className="btn-list">\n <Button variant="facebook"><i className="fa fa-facebook me-2"></i>Facebook</Button>\n <Button variant="twitter"><i className="fa fa-twitter me-2"></i>Twitter</Button>\n <Button variant="google"><i className="fa fa-google me-2"></i>Google</Button>\n <Button variant="youtube"><i className="fa fa-youtube me-2"></i>Youtube</Button>\n <Button variant="vimeo"><i className="fa fa-vimeo me-2"></i>Vimeo</Button>\n <Button variant="dribbble"><i className="fa fa-dribbble me-2"></i>Dribble</Button>\n <Button variant="github"><i className="fa fa-github me-2"></i>Github</Button>\n <Button variant="instagram"><i className="fa fa-instagram me-2"></i>Instagram</Button>\n <Button variant="pinterest"><i className="fa fa-pinterest me-2"></i>Pinterest</Button>\n <Button variant="vk"><i className="fa fa-vk me-2"></i>VKontakte</Button>\n <Button variant="rss"><i className="fa fa-rss me-2"></i>RSS</Button>\n <Button variant="flickr"><i className="fa fa-flickr me-2"></i>Flickr</Button>\n</div>\n'})})})]})]})})]}),(0,a.jsxs)(i.Z,{children:[(0,a.jsx)(l.Z,{md:12,xl:6,children:(0,a.jsxs)(r.Z,{children:[(0,a.jsxs)(r.Z.Header,{children:[(0,a.jsx)(r.Z.Title,{children:"Loading button"}),(0,a.jsx)(c.Z,{className:"ms-auto",children:(0,a.jsx)(c.Z.Check,{type:"switch",label:"Show Code",id:"custom-switch",onClick:()=>A(!_),className:"showcode d-flex ms-auto mx-2"})})]}),(0,a.jsxs)(r.Z.Body,{children:[(0,a.jsxs)("div",{className:"text-wrap",children:[(0,a.jsxs)("p",{children:["Add ",(0,a.jsx)("code",{className:"highlighter-rouge",children:".btn-loading"})," to use a loading state on a button. The width of the button depends on the length of the text inside Since the loading spinner is implemented using the element."]}),(0,a.jsx)("div",{className:"example",children:(0,a.jsxs)("div",{className:"btn-list",children:[(0,a.jsx)(d.Z,{className:"btn-loading",variant:"primary",children:"Button text"}),(0,a.jsx)("br",{}),(0,a.jsx)(d.Z,{className:"btn-loading btn-icon",variant:"success",children:(0,a.jsx)("i",{className:"fe fe-check"})}),(0,a.jsx)(d.Z,{className:"btn-loading btn-sm",variant:"warning",children:"Button text"}),(0,a.jsx)("br",{}),(0,a.jsx)(d.Z,{className:"btn-loading btn-lg",variant:"danger",children:"Button text"}),(0,a.jsx)(d.Z,{className:"btn-loading d-grid",variant:"info",children:"Button text"})]})})]}),(0,a.jsx)(o.Z,{in:_,className:"mt-2",children:(0,a.jsx)("pre",{children:(0,a.jsx)("code",{children:'\n <div className="btn-list">\n <Button className="btn-loading" variant=\'primary\'>Button text</Button><br />\n <Button className="btn-loading btn-icon" variant=\'success\'><i className="fe fe-check"></i></Button>\n <Button className="btn-loading btn-sm" variant=\'warning\'>Button text</Button><br />\n <Button className="btn-loading btn-lg" variant=\'danger\'>Button text</Button>\n <Button className="btn-loading d-grid" variant=\'info\'>Button text</Button>\n</div>\n'})})})]})]})}),(0,a.jsx)(l.Z,{md:12,xl:6,children:(0,a.jsxs)(r.Z,{children:[(0,a.jsxs)(r.Z.Header,{children:[(0,a.jsx)(r.Z.Title,{children:"Button dropdown"}),(0,a.jsx)(c.Z,{className:"ms-auto",children:(0,a.jsx)(c.Z.Check,{type:"switch",label:"Show Code",id:"custom-switch",onClick:()=>F(!E),className:"showcode d-flex ms-auto mx-2"})})]}),(0,a.jsxs)(r.Z.Body,{children:[(0,a.jsxs)("div",{className:"text-wrap",children:[(0,a.jsxs)("p",{children:["Wrap the dropdownâs toggle using different c
1olors and icons implemented in different dropdowns styles (your button or link) and the dropdown menu within ",(0,a.jsx)("code",{className:"highlighter-rouge",children:".dropdown"}),", or another element that declares ",(0,a.jsx)("code",{className:"highlighter-rouge",children:"position: relative;"}),". Dropdowns can be triggered from ",(0,a.jsx)("code",{className:"highlighter-rouge",children:"<a>"})," or ",(0,a.jsx)("code",{className:"highlighter-rouge",children:"<button>"})," elements to better fit your potential needs."]}),(0,a.jsx)("div",{className:"example",children:(0,a.jsxs)("div",{className:"btn-list",children:[(0,a.jsxs)(h.Z,{children:[(0,a.jsx)(h.Z.Toggle,{variant:"secondary",children:(0,a.jsx)("i",{className:"fe fe-calendar"})}),(0,a.jsxs)(h.Z.Menu,{children:[(0,a.jsx)(h.Z.Item,{eventKey:"1",children:"Dropdown Link"}),(0,a.jsx)(h.Z.Item,{eventKey:"2",children:"Dropdown Link"})]})]}),(0,a.jsxs)(h.Z,{children:[(0,a.jsxs)(h.Z.Toggle,{variant:"info",children:[(0,a.jsx)("i",{className:"fe fe-calendar me-2"}),"Show calendar"]}),(0,a.jsxs)(h.Z.Menu,{children:[(0,a.jsx)(h.Z.Item,{eventKey:"1",children:"Dropdown Link"}),(0,a.jsx)(h.Z.Item,{eventKey:"2",children:"Dropdown Link"})]})]}),(0,a.jsxs)(h.Z,{children:[(0,a.jsx)(h.Z.Toggle,{variant:"danger",children:"Show calendar"}),(0,a.jsxs)(h.Z.Menu,{children:[(0,a.jsx)(h.Z.Item,{eventKey:"1",children:"Dropdown Link"}),(0,a.jsx)(h.Z.Item,{eventKey:"2",children:"Dropdown Link"})]})]})]})})]}),(0,a.jsx)(o.Z,{in:E,className:"mt-2",children:(0,a.jsx)("pre",{children:(0,a.jsx)("code",{children:'\n <div className="btn-list">\n\n <Dropdown>\n <Dropdown.Toggle variant="secondary">\n <i className="fe fe-calendar"></i>\n </Dropdown.Toggle>\n <Dropdown.Menu>\n <Dropdown.Item eventKey="1">Dropdown Link</Dropdown.Item>\n <Dropdown.Item eventKey="2">Dropdown Link</Dropdown.Item>\n </Dropdown.Menu>\n </Dropdown>\n\n <Dropdown>\n <Dropdown.Toggle variant="info">\n <i className="fe fe-calendar me-2"></i>Show calendar\n </Dropdown.Toggle>\n <Dropdown.Menu>\n <Dropdown.Item eventKey="1">Dropdown Link</Dropdown.Item>\n <Dropdown.Item eventKey="2">Dropdown Link</Dropdown.Item>\n </Dropdown.Menu>\n </Dropdown>\n\n <Dropdown>\n <Dropdown.Toggle variant="danger">\n Show calendar\n </Dropdown.Toggle>\n <Dropdown.Menu>\n <Dropdown.Item eventKey="1">Dropdown Link</Dropdown.Item>\n <Dropdown.Item eventKey="2">Dropdown Link</Dropdown.Item>\n </Dropdown.Menu>\n </Dropdown>\n</div>\n'})})})]})]})})]}),(0,a.jsxs)(i.Z,{children:[(0,a.jsx)(l.Z,{md:12,xl:6,children:(0,a.jsxs)(r.Z,{children:[(0,a.jsxs)(r.Z.Header,{children:[(0,a.jsx)(r.Z.Title,{children:"Basic Button Group"}),(0,a.jsx)(c.Z,{className:"ms-auto",children:(0,a.jsx)(c.Z.Check,{type:"switch",label:"Show Code",id:"custom-switch",onClick:()=>V(!z),className:"showcode d-flex ms-auto mx-2"})})]}),(0,a.jsxs)(r.Z.Body,{children:[(0,a.jsxs)("div",{className:"text-wrap",children:[(0,a.jsxs)("p",{children:["Use any of the available ",(0,a.jsx)("code",{className:"highlighter-rouge",children:".btn"})," in ",(0,a.jsx)("code",{className:"highlighter-rouge",children:".btn-group"})," classes to quickly create a styled button."]}),(0,a.jsx)("div",{className:"example",children:(0,a.jsxs)("div",{className:"btn-group",role:"group","aria-label":"Basic example",children:[(0,a.jsx)(d.Z,{variant:"primary",children:"Left"}),(0,a.jsx)(d.Z,{variant:"primary",children:"Middle"}),(0,a.jsx)(d.Z,{variant:"primary",children:"Right"})]})})]}),(0,a.jsx)(o.Z,{in:z,className:"mt-2",children:(0,a.jsx)("pre",{children:(0,a.jsx)("code",{children:"\n <div className=\"btn-group\" role=\"group\" aria-label=\"Basic example\">\n <Button variant='primary'>Left</Button>\n <Button variant='primary'>Middle</Button>\n <Button variant='primary'>Right</Button>\n</div>\n\n"})})})]})]})}),(0,a.jsx)(l.Z,{md:12,xl:6,children:(0,a.jsxs)(r.Z,{children:[(0,a.jsxs)(r.Z.Header,{children:[(0,a.jsx)(r.Z.Title,{children:"Button Toolbar"}),(0,a.jsx)(c.Z,{className:"ms-auto",children:(0,a.jsx)(c.Z.Check,{type:"switch",label:"Show Code",id:"custom-switch",onClick:()=>X(!Y),className:"showcode d-flex ms-auto mx-2"})})]}),(0,a.jsxs)(r.Z.Body,{children:[(0,a.jsxs)("div",{className:"text-wrap",children:[(0,a.jsx)("p",{children:"Combine sets of button groups into button toolbars for more complex components."}),(0,a.jsx)("div",{className:"example",children:(0,a.jsxs)("div",{className:"btn-toolbar",role:"toolbar","aria-label":"Toolbar with button groups",children:[(0,a.jsxs)(m.Z,{className:"me-2 mb-1",children:[(0,a.jsx)(d.Z,{variant:"primary",children:"1"}),(0,a.jsx)(d.Z,{variant:"primary",children:"2"}),(0,a.jsx)(d.Z,{variant:"primary",children:"3"}),(0,a.jsx)(d.Z,{variant:"primary",children:"4"})]}),(0,a.jsxs)(m.Z,{className:"me-2 mb-1",children:[(0,a.jsx)(d.Z,{variant:"secondary",children:"5"}),(0,a.jsx)(d.Z,{variant:"secondary",children:"6"}),(0,a.jsx)(d.Z,{variant:"secondary",children:"7"})]}),(0,a.jsx)(m.Z,{className:"mb-1",children:(0,a.jsx)(d.Z,{variant:"info",children:"8"})})]})})]}),(0,a.jsx)(o.Z,{in:Y,className:"mt-2",children:(0,a.jsx)("pre",{children:(0,a.jsx)("code",{children:"\n <div className=\"btn-toolbar\" role=\"toolbar\" aria-label=\"Toolbar with button groups\">\n <ButtonGroup className=\"me-2 mb-1\">\n <Button variant='primary'>1</Button>\n <Button variant='primary'>2</Button>\n <Button variant='primary'>3</Button>\n <Button variant='primary'>4</Button>\n </ButtonGroup>\n <ButtonGroup className=\"me-2 mb-1\">\n <Button variant='secondary'>5</Button>\n <Button variant='secondary'>6</Button>\n <Button variant='secondary'>7</Button>\n </ButtonGroup>\n <ButtonGroup className=\"mb-1\">\n <Button variant='info'>8</Button>\n </ButtonGroup>\n</div>\n\n"})})})]})]})})]}),(0,a.jsxs)(i.Z,{children:[(0,a.jsx)(l.Z,{md:12,xl:6,children:(0,a.jsxs)(r.Z,{children:[(0,a.jsxs)(r.Z.Header,{children:[(0,a.jsx)(r.Z.Title,{children:"Outline Button Group"}),(0,a.jsx)(c.Z,{className:"ms-auto",children:(0,a.jsx)(c.Z.Check,{type:"switch",label:"Show Code",id:"custom-switch",onClick:()=>J(!$),className:"showcode d-flex ms-auto mx-2"})})]}),(0,a.jsxs)(r.Z.Body,{children:[(0,a.jsxs)("div",{className:"text-wrap",children:[(0,a.jsxs)("p",{children:["Use any of the available ",(0,a.jsx)("code",{className:"highlighter-rouge",children:".btn .btn-outline-"})," in ",(0,a.jsx)("code",{className:"highlighter-rouge",children:".btn-group"})," classes to quickly create a styled button."]}),(0,a.jsx)("div",{className:"example",children:(0,a.jsxs)(m.Z,{children:[(0,a.jsx)(d.Z,{variant:"outline-primary",children:"Left"}),(0,a.jsx)(d.Z,{variant:"outline-primary",children:"Middle"}),(0,a.jsx)(d.Z,{variant:"outline-primary",children:"Right"})]})})]}),(0,a.jsx)(o.Z,{in:$,className:"mt-2",children:(0,a.jsx)("pre",{children:(0,a.jsx)("code",{children:"\n <div className=\"example\">\n <ButtonGroup>\n <Button variant='outline-primary'>Left</Button>\n <Button variant='outline-primary'>
1Middle</Button>\n <Button variant='outline-primary'>Right</Button>\n </ButtonGroup>\n</div>\n"})})})]})]})}),(0,a.jsx)(l.Z,{md:12,xl:6,children:(0,a.jsxs)(r.Z,{children:[(0,a.jsxs)(r.Z.Header,{children:[(0,a.jsx)(r.Z.Title,{children:"Min-Width Buttons"}),(0,a.jsx)(c.Z,{className:"ms-auto",children:(0,a.jsx)(c.Z.Check,{type:"switch",label:"Show Code",id:"custom-switch",onClick:()=>ee(!Q),className:"showcode d-flex ms-auto mx-2"})})]}),(0,a.jsxs)(r.Z.Body,{children:[(0,a.jsxs)("div",{className:"text-wrap",children:[(0,a.jsxs)("p",{children:["Add ",(0,a.jsx)("code",{className:"highlighter-rouge",children:".btn"}),", ",(0,a.jsx)("code",{className:"highlighter-rouge",children:".w-xs"}),", ",(0,a.jsx)("code",{className:"highlighter-rouge",children:".w-sm"}),", ",(0,a.jsx)("code",{className:"highlighter-rouge",children:".w-md"}),", ",(0,a.jsx)("code",{className:"highlighter-rouge",children:".w-lg"}),", classes to quickly create a styled button.."]}),(0,a.jsx)("div",{className:"example",children:(0,a.jsxs)("div",{className:"btn-list",children:[(0,a.jsx)(d.Z,{className:"w-xs mb-1",variant:"primary",children:"Min-XS"}),(0,a.jsx)(d.Z,{className:"w-sm mb-1",variant:"secondary",children:"Min-SM"}),(0,a.jsx)(d.Z,{className:"w-md mb-1",variant:"danger",children:"Min-MD"}),(0,a.jsx)(d.Z,{className:"w-lg mb-1",variant:"success",children:"Min-LG"})]})})]}),(0,a.jsx)(o.Z,{in:Q,className:"mt-2",children:(0,a.jsx)("pre",{children:(0,a.jsx)("code",{children:'\n <div className="btn-list">\n <Button className="w-xs mb-1" variant="primary">Min-XS</Button>\n <Button className="w-sm mb-1" variant="secondary">Min-SM</Button>\n <Button className="w-md mb-1" variant="danger">Min-MD</Button>\n <Button className="w-lg mb-1" variant="success">Min-LG</Button>\n</div>\n\n'})})})]})]})})]}),(0,a.jsxs)(i.Z,{children:[(0,a.jsx)(l.Z,{md:12,xl:6,children:(0,a.jsxs)(r.Z,{children:[(0,a.jsxs)(r.Z.Header,{children:[(0,a.jsx)(r.Z.Title,{children:"Checkbox Button Group"}),(0,a.jsx)(c.Z,{className:"ms-auto",children:(0,a.jsx)(c.Z.Check,{type:"switch",label:"Show Code",id:"custom-switch",onClick:()=>es(!en),className:"showcode d-flex ms-auto mx-2"})})]}),(0,a.jsxs)(r.Z.Body,{children:[(0,a.jsxs)("div",{className:"text-wrap",children:[(0,a.jsxs)("p",{children:["Use any of the available ",(0,a.jsx)("code",{className:"highlighter-rouge",children:".btn"})," in ",(0,a.jsx)("code",{className:"highlighter-rouge",children:".btn-group"})," classes to quickly create a styled button."]}),(0,a.jsx)("div",{className:"example",children:(0,a.jsx)("div",{className:"btn-list checkboxbtns",children:(0,a.jsx)(m.Z,{children:(0,a.jsxs)(x.Z,{type:"checkbox",children:[(0,a.jsx)(u.Z,{className:"mb-2",id:"toggle-check",checked:eo,variant:"outline-primary",value:1,onChange:eh,children:"Checkbox "}),(0,a.jsx)(u.Z,{className:"mb-2",id:"toggle-check1",checked:eo,variant:"outline-primary",value:2,onChange:eh,children:"Checkbox "}),(0,a.jsx)(u.Z,{className:"mb-2",id:"toggle-check2",checked:eo,variant:"outline-primary",value:3,onChange:eh,children:"Checkbox "})]})})})})]}),(0,a.jsx)(o.Z,{in:en,className:"mt-2",children:(0,a.jsx)("pre",{children:(0,a.jsx)("code",{children:'\nexport function Checkedbutton() {\n const [isChecked, setIsChecked] = useState(false);\n \n const handleOnChange = () => {\n setIsChecked(!isChecked);\n };\n \n return (\n <div className="btn-list checkboxbtns">\n <ButtonGroup>\n <ToggleButtonGroup type="checkbox" >\n <ToggleButton className="mb-2" id="toggle-check" checked={isChecked} variant="outline-primary" value={1} onChange={handleOnChange}>Checkbox </ToggleButton>\n <ToggleButton className="mb-2" id="toggle-check1" checked={isChecked} variant="outline-primary" value={2} onChange={handleOnChange}>Checkbox </ToggleButton>\n <ToggleButton className="mb-2" id="toggle-check2" checked={isChecked} variant="outline-primary" value={3} onChange={handleOnChange}>Checkbox </ToggleButton>\n </ToggleButtonGroup>\n </ButtonGroup>\n </div>\n );\n }\n'})})})]})]})}),(0,a.jsx)(l.Z,{md:12,lg:6,children:(0,a.jsxs)(r.Z,{children:[(0,a.jsxs)(r.Z.Header,{children:[(0,a.jsx)(r.Z.Title,{children:"Radio Button Group"}),(0,a.jsx)(c.Z,{className:"ms-auto",children:(0,a.jsx)(c.Z.Check,{type:"switch",label:"Show Code",id:"custom-switch",onClick:()=>et(!ea),className:"showcode d-flex ms-auto mx-2"})})]}),(0,a.jsxs)(r.Z.Body,{children:[(0,a.jsxs)("div",{className:"text-wrap",children:[(0,a.jsxs)("p",{children:["Use any of the available ",(0,a.jsx)("code",{className:"highlighter-rouge",children:".btn"})," in ",(0,a.jsx)("code",{className:"highlighter-rouge",children:".btn-group"})," classes to quickly create a styled button."]}),(0,a.jsx)("div",{className:"example",children:(0,a.jsx)("div",{className:"btn-group radiobtns",role:"group","aria-label":"Basic radio toggle button group",children:(0,a.jsxs)(x.Z,{type:"radio",name:"options",defaultValue:1,children:[(0,a.jsx)(u.Z,{id:"tbg-radio-1",variant:"outline-primary",value:1,children:"Radio 1"}),(0,a.jsx)(u.Z,{id:"tbg-radio-2",variant:"outline-primary",value:2,children:"Radio 2"}),(0,a.jsx)(u.Z,{id:"tbg-radio-3",variant:"outline-primary",value:3,children:"Radio 3"})]})})})]}),(0,a.jsx)(o.Z,{in:ea,className:"mt-2",children:(0,a.jsx)("pre",{children:(0,a.jsx)("code",{children:'\nexport function Buttondata() {\
1n return (\n <div className="btn-group radiobtns" role="group" aria-label="Basic radio toggle button group">\n <ToggleButtonGroup type="radio" name="options" defaultValue={1}>\n <ToggleButton id="tbg-radio-1" variant=\'outline-primary\' value={1} >\n Radio 1\n </ToggleButton>\n <ToggleButton id="tbg-radio-2" variant=\'outline-primary\' value={2}>\n Radio 2\n </ToggleButton>\n <ToggleButton id="tbg-radio-3" variant=\'outline-primary\' value={3}>\n Radio 3\n </ToggleButton>\n </ToggleButtonGroup>\n </div>\n )\n}\n\n'})})})]})]})})]}),(0,a.jsxs)(i.Z,{children:[(0,a.jsx)(l.Z,{md:12,xl:6,children:(0,a.jsxs)(r.Z,{children:[(0,a.jsxs)(r.Z.Header,{children:[(0,a.jsx)(r.Z.Title,{children:"Button Group Sizes"}),(0,a.jsx)(c.Z,{className:"ms-auto",children:(0,a.jsx)(c.Z.Check,{type:"switch",label:"Show Code",id:"custom-switch",onClick:()=>el(!ei),className:"showcode d-flex ms-auto mx-2"})})]}),(0,a.jsxs)(r.Z.Body,{children:[(0,a.jsxs)("div",{className:"text-wrap",children:[(0,a.jsxs)("p",{children:["Use any of the available ",(0,a.jsx)("code",{className:"highlighter-rouge",children:".btn-group-*"})," in ",(0,a.jsx)("code",{className:"highlighter-rouge",children:".btn-group"})," classes to quickly create a styled button."]}),(0,a.jsxs)("div",{className:"example",children:[(0,a.jsxs)(m.Z,{className:"btn-group-lg mb-3",children:[(0,a.jsx)(d.Z,{variant:"primary",children:"Left"}),(0,a.jsx)(d.Z,{variant:"primary",children:"Middle"}),(0,a.jsx)(d.Z,{variant:"primary",children:"Right"})]}),(0,a.jsx)("br",{}),(0,a.jsxs)(m.Z,{className:"mb-3",children:[(0,a.jsx)(d.Z,{variant:"primary",children:"Left"}),(0,a.jsx)(d.Z,{variant:"primary",children:"Middle"}),(0,a.jsx)(d.Z,{variant:"primary",children:"Right"})]}),(0,a.jsx)("br",{}),(0,a.jsxs)(m.Z,{className:"btn-group-sm",children:[(0,a.jsx)(d.Z,{variant:"primary",children:"Left"}),(0,a.jsx)(d.Z,{variant:"primary",children:"Middle"}),(0,a.jsx)(d.Z,{variant:"primary",children:"Right"})]})]})]}),(0,a.jsx)(o.Z,{in:ei,className:"mt-2",children:(0,a.jsx)("pre",{children:(0,a.jsx)("code",{children:"\n <div className=\"example\">\n <ButtonGroup className=\"btn-group-lg mb-3\">\n <Button variant='primary'>Left</Button>\n <Button variant='primary'>Middle</Button>\n <Button variant='primary'>Right</Button>\n </ButtonGroup><br />\n <ButtonGroup className=\"mb-3\">\n <Button variant='primary'>Left</Button>\n <Button variant='primary'>Middle</Button>\n <Button variant='primary'>Right</Button>\n </ButtonGroup><br />\n <ButtonGroup className=\"btn-group-sm\">\n <Button variant='primary'>Left</Button>\n <Button variant='primary'>Middle</Button>\n <Button variant='primary'>Right</Button>\n </ButtonGroup>\n</div>\n\n"})})})]})]})}),(0,a.jsx)(l.Z,{md:12,xl:6,children:(0,a.jsxs)(r.Z,{children:[(0,a.jsxs)(r.Z.Header,{children:[(0,a.jsx)(r.Z.Title,{children:"Vertical Button Group"}),(0,a.jsx)(c.Z,{className:"ms-auto",children:(0,a.jsx)(c.Z.Check,{type:"switch",label:"Show Code",id:"custom-switch",onClick:()=>ec(!er),className:"showcode d-flex ms-auto mx-2"})})]}),(0,a.jsxs)(r.Z.Body,{children:[(0,a.jsxs)("div",{className:"text-wrap",children:[(0,a.jsxs)("p",{children:["Use any of the available ",(0,a.jsx)("code",{className:"highlighter-rouge",children:".btn-group-vertical"})," classes to quickly create a styled button."]}),(0,a.jsx)("div",{className:"example",children:(0,a.jsxs)(m.Z,{vertical:!0,children:[(0,a.jsx)(d.Z,{variant:"primary",children:"Button"}),(0,a.jsx)(d.Z,{variant:"primary",children:"Button"}),(0,a.jsxs)(h.Z,{children:[(0,a.jsx)(h.Z.Toggle,{className:"br-0",children:"Dropdown"}),(0,a.jsxs)(h.Z.Menu,{children:[(0,a.jsx)(h.Z.Item,{eventKey:"1",children:"Dropdown Link"}),(0,a.jsx)(h.Z.Item,{eventKey:"2",children:"Dropdown Link"})]})]}),(0,a.jsx)(d.Z,{variant:"primary",children:"Button"}),(0,a.jsx)(d.Z,{variant:"primary",children:"Button"})]})})]}),(0,a.jsx)(o.Z,{in:er,className:"mt-2",children:(0,a.jsx)("pre",{children:(0,a.jsx)("code",{children:"\n <div className=\"example\">\n <ButtonGroup vertical>\n <Button variant='primary'>Button</Button>\n <Button variant='primary'>Button</Button>\n <Dropdown >\n <Dropdown.Toggle className='br-0'>\n Dropdown\n </Dropdown.Toggle>\n <Dropdown.Menu>\n <Dropdown.Item eventKey=\"1\">Dropdown Link</Dropdown.Item>\n <Dropdown.Item eventKey=\"2\">Dropdown Link</Dropdown.Item>\n </Dropdown.Menu>\n </Dropdown>\n <Button variant='primary'>Button</Button>\n <Button variant='primary'>Button</Button>\n </ButtonGroup>\n</div>\n\n"})})})]})]})})]})]})};p.layout="Contentlayout",n.default=p},72867:function(e,n,s){"use strict";var a=s(85893);s(67294);var t=s(26699);let i=e=>(0,a.jsx)("div",{children:(0,a.jsxs)("div",{className:"page-header",children:[(0,a.jsx)("h1",{className:"page-title",children:e.titles}),(0,a.jsx)("div",{children:(0,a.jsxs)(t.Z,{children:[e.items.map((e,n)=>(0,a.jsx)(t.Z.Item,{href:"#!",children:e},n)),(0,a.jsx)(t.Z.Item,{href:"#!",active:!0,children:e.active})]})})]})});n.Z=i},33272:function(e,n,s){"use strict";s.d(n,{Z:function(){return c}});var a=s(85893);s(67294);var t=s(9008),i=s.n(t),l={src:"/_next/static/media/favicon.00e6795d.ico",height:16,width:16,blurWidth:0,blurHeight:0};let r=e=>{let{title:n}=e;return(0,a.jsxs)(i(),{children:[(0,a.jsx)("title",{children:" Fandoro Technologies
1- Making Businesses Responsible"}),(0,a.jsx)("link",{rel:"icon",href:l.src}),(0,a.jsx)("meta",{name:"description",content:"Fandoro Technologies - making businesses responsible"}),(0,a.jsx)("meta",{name:"author",content:"Fandoro Technologies Private Limited"}),(0,a.jsx)("meta",{name:"keywords",content:"next js dashboard template, admin dashboard nextjs, next js admin template, next js admin panel, admin dashboard, nextjs react bootstrap, react bootstrap with next js, next js admin dashboard, nextjs admin dashboard template, admin panel template, admin template react bootstrap, nextjs dashboard,next js react bootstrap"})]})};var c=r},9008:function(e,n,s){e.exports=s(42636)},26699:function(e,n,s){"use strict";s.d(n,{Z:function(){return h}});var a=s(93967),t=s.n(a),i=s(67294),l=s(76792),r=s(13551),c=s(85893);let o=i.forwardRef(({bsPrefix:e,active:n=!1,children:s,className:a,as:i="li",linkAs:o=r.Z,linkProps:d={},href:h,title:m,target:x,...u},b)=>{let j=(0,l.vE)(e,"breadcrumb-item");return(0,c.jsx)(i,{ref:b,...u,className:t()(j,a,{active:n}),"aria-current":n?"page":void 0,children:n?s:(0,c.jsx)(o,{...d,href:h,title:m,target:x,children:s})})});o.displayName="BreadcrumbItem";let d=i.forwardRef(({bsPrefix:e,className:n,listProps:s={},children:a,label:i="breadcrumb",as:r="nav",...o},d)=>{let h=(0,l.vE)(e,"breadcrumb");return(0,c.jsx)(r,{"aria-label":i,className:n,ref:d,...o,children:(0,c.jsx)("ol",{...s,className:t()(h,null==s?void 0:s.className),children:a})})});d.displayName="Breadcrumb";var h=Object.assign(d,{Item:o})},2086:function(e,n,s){"use strict";var a=s(93967),t=s.n(a),i=s(67294),l=s(76792),r=s(85893);let c=i.forwardRef(({bsPrefix:e,size:n,vertical:s=!1,className:a,role:i="group",as:c="div",...o},d)=>{let h=(0,l.vE)(e,"btn-group"),m=h;return s&&(m=`${h}-vertical`),(0,r.jsx)(c,{...o,ref:d,role:i,className:t()(a,m,n&&`${h}-${n}`)})});c.displayName="ButtonGroup",n.Z=c},28984:function(e,n,s){"use strict";var a=s(93967),t=s.n(a),i=s(67294),l=s(76792),r=s(35005),c=s(85893);let o=()=>void 0,d=i.forwardRef(({bsPrefix:e,name:n,className:s,checked:a,type:i,onChange:d,value:h,disabled:m,id:x,inputRef:u,...b},j)=>(e=(0,l.vE)(e,"btn-check"),(0,c.jsxs)(c.Fragment,{children:[(0,c.jsx)("input",{className:e,name:n,type:i,value:h,ref:u,autoComplete:"off",checked:!!a,disabled:!!m,onChange:d||o,id:x}),(0,c.jsx)(r.Z,{...b,ref:j,className:t()(s,m&&"disabled"),type:void 0,role:void 0,as:"label",htmlFor:x})]})));d.displayName="ToggleButton",n.Z=d},17954:function(e,n,s){"use strict";var a=s(67294),t=s(41143),i=s.n(t),l=s(47150),r=s(16833),c=s(53439),o=s(2086),d=s(28984),h=s(85893);let m=a.forwardRef((e,n)=>{let{children:s,type:t="radio",name:d,value:m,onChange:x,vertical:u=!1,...b}=(0,l.Ch)(e,{value:"onChange"}),j=()=>null==m?[]:[].concat(m),N=(e,n)=>{if(!x)return;let s=j(),a=-1!==s.indexOf(e);if("radio"===t){a||x(e,n);return}a?x(s.filter(n=>n!==e),n):x([...s,e],n)};return"radio"!==t||d||i()(!1),(0,h.jsx)(o.Z,{...b,ref:n,vertical:u,children:(0,c.UI)(s,e=>{let n=j(),{value:s,onChange:i}=e.props,l=e=>N(s,e);return a.cloneElement(e,{type:t,name:e.name||d,checked:-1!==n.indexOf(s),onChange:(0,r.Z)(i,l)})})})});n.Z=Object.assign(m,{Button:d.Z})}},function(e){e.O(0,[9774,2888,179],function(){return e(e.s=53712)}),_N_E=e.O()}]);
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.