12:[["$","main",null,{"children":[["$","$L5",null,{"maxW":"100%","children":[["$","$L20","div-0",{"code":"import { Button } from 'welcome-ui/Button'\n\nconst Example = () => {\n return \n}\n\nexport default Example\n","isOverview":true,"mt":0,"name":"Button","pathToFile":"/Button/docs/examples/overview.tsx","withCodeEditor":true}]]}],["$","$L5",null,{"maxW":"100%","children":[["$","$Lf","h2-0",{"alignItems":"center","as":"h2","borderBottom":"1px solid","borderBottomColor":"neutral-30","display":"flex","id":"examples","mt":"3xl","pb":"sm","style":{"scrollMarginTop":170},"variant":"h3","children":["$","$L5",null,{"as":"a","color":"inherit","href":"#examples","textDecoration":{"hover":"underline"},"children":"Examples"}]}]]}],["$","$L5",null,{"maxW":"100%","children":[["$","$Lf","h3-0",{"as":"h3","id":"variants","mb":"lg","mt":"xxl","style":{"scrollMarginTop":170},"variant":"h4","children":["$","$L5",null,{"as":"a","color":"inherit","href":"#variants","textDecoration":{"hover":"underline"},"children":"Variants"}]}],"\n",["$","$Lf","h4-0",{"as":"h4","id":"basics","mb":"md","mt":"xl","variant":"h5","children":"Basics"}],"\n",["$","$L20","div-0",{"code":"import { Button } from 'welcome-ui/Button'\n\nconst Example = () => {\n return (\n <>\n \n \n \n \n \n )\n}\n\nexport default Example\n","isOverview":false,"mt":"$undefined","name":"Button","pathToFile":"/Button/docs/examples/variants.tsx","withCodeEditor":true}],"\n",["$","$Lf","h4-1",{"as":"h4","id":"danger","mb":"md","mt":"xl","variant":"h5","children":"Danger"}],"\n",["$","$L21","p-0",{"node":{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Add ","position":{"start":{"line":10,"column":1,"offset":109},"end":{"line":10,"column":5,"offset":113}}},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"danger","position":{"start":{"line":10,"column":5,"offset":113},"end":{"line":10,"column":13,"offset":121}}}],"position":{"start":{"line":10,"column":5,"offset":113},"end":{"line":10,"column":13,"offset":121}}},{"type":"text","value":" property to transform variant button with red color. Do not include secondary!","position":{"start":{"line":10,"column":13,"offset":121},"end":{"line":10,"column":92,"offset":200}}}],"position":{"start":{"line":10,"column":1,"offset":109},"end":{"line":10,"column":92,"offset":200}}},"children":["Add ",["$","$L5","code-0",{"alignItems":"center","as":"code","backgroundColor":"neutral-30","borderRadius":"md","color":"neutral-90","display":"inline-flex","px":"sm","py":"xxs","text":"sm","whiteSpace":"break-spaces","children":"danger"}]," property to transform variant button with red color. Do not include secondary!"]}],"\n",["$","$L20","div-1",{"code":"import { Button } from 'welcome-ui/Button'\n\nconst Example = () => {\n return (\n <>\n \n \n \n \n )\n}\n\nexport default Example\n","isOverview":false,"mt":"$undefined","name":"Button","pathToFile":"/Button/docs/examples/danger.tsx","withCodeEditor":true}],"\n",["$","$Lf","h4-2",{"as":"h4","id":"ai","mb":"md","mt":"xl","variant":"h5","children":"AI"}],"\n",["$","$L21","p-1",{"node":{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Add ","position":{"start":{"line":16,"column":1,"offset":277},"end":{"line":16,"column":5,"offset":281}}},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"ai","position":{"start":{"line":16,"column":5,"offset":281},"end":{"line":16,"column":9,"offset":285}}}],"position":{"start":{"line":16,"column":5,"offset":281},"end":{"line":16,"column":9,"offset":285}}},{"type":"text","value":" property to transform variant button with purple color. Do not include secondary!","position":{"start":{"line":16,"column":9,"offset":285},"end":{"line":16,"column":91,"offset":367}}}],"position":{"start":{"line":16,"column":1,"offset":277},"end":{"line":16,"column":91,"offset":367}}},"children":["Add ",["$","$L5","code-0",{"alignItems":"center","as":"code","backgroundColor":"neutral-30","borderRadius":"md","color":"neutral-90","display":"inline-flex","px":"sm","py":"xxs","text":"sm","whiteSpace":"break-spaces","children":"ai"}]," property to transform variant button with purple color. Do not include secondary!"]}],"\n",["$","$L20","div-2",{"code":"import { Button } from 'welcome-ui/Button'\n\nconst Example = () => {\n return (\n <>\n \n \n \n \n )\n}\n\nexport default Example\n","isOverview":false,"mt":"$undefined","name":"Button","pathToFile":"/Button/docs/examples/ai.tsx","withCodeEditor":true}],"\n",["$","$Lf","h3-1",{"as":"h3","id":"sizes","mb":"lg","mt":"xxl","style":{"scrollMarginTop":170},"variant":"h4","children":["$","$L5",null,{"as":"a","color":"inherit","href":"#sizes","textDecoration":{"hover":"underline"},"children":"Sizes"}]}],"\n",["$","$L21","p-2",{"node":{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Use size property with ","position":{"start":{"line":22,"column":1,"offset":442},"end":{"line":22,"column":24,"offset":465}}},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"xs","position":{"start":{"line":22,"column":24,"offset":465},"end":{"line":22,"column":28,"offset":469}}}],"position":{"start":{"line":22,"column":24,"offset":465},"end":{"line":22,"column":28,"offset":469}}},{"type":"text","value":", ","position":{"start":{"line":22,"column":28,"offset":469},"end":{"line":22,"column":30,"offset":471}}},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"sm","position":{"start":{"line":22,"column":30,"offset":471},"end":{"line":22,"column":34,"offset":475}}}],"position":{"start":{"line":22,"column":30,"offset":471},"end":{"line":22,"column":34,"offset":475}}},{"type":"text","value":", ","position":{"start":{"line":22,"column":34,"offset":475},"end":{"line":22,"column":36,"offset":477}}},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"md","position":{"start":{"line":22,"column":36,"offset":477},"end":{"line":22,"column":40,"offset":481}}}],"position":{"start":{"line":22,"column":36,"offset":477},"end":{"line":22,"column":40,"offset":481}}},{"type":"text","value":" (default) or ","position":{"start":{"line":22,"column":40,"offset":481},"end":{"line":22,"column":54,"offset":495}}},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"lg","position":{"start":{"line":22,"column":54,"offset":495},"end":{"line":22,"column":58,"offset":499}}}],"position":{"start":{"line":22,"column":54,"offset":495},"end":{"line":22,"column":58,"offset":499}}},{"type":"text","value":".","position":{"start":{"line":22,"column":58,"offset":499},"end":{"line":22,"column":59,"offset":500}}}],"position":{"start":{"line":22,"column":1,"offset":442},"end":{"line":22,"column":59,"offset":500}}},"children":["Use size property with ",["$","$L5","code-0",{"alignItems":"center","as":"code","backgroundColor":"neutral-30","borderRadius":"md","color":"neutral-90","display":"inline-flex","px":"sm","py":"xxs","text":"sm","whiteSpace":"break-spaces","children":"xs"}],", ",["$","$L5","code-1",{"alignItems":"center","as":"code","backgroundColor":"neutral-30","borderRadius":"md","color":"neutral-90","display":"inline-flex","px":"sm","py":"xxs","text":"sm","whiteSpace":"break-spaces","children":"sm"}],", ",["$","$L5","code-2",{"alignItems":"center","as":"code","backgroundColor":"neutral-30","borderRadius":"md","color":"neutral-90","display":"inline-flex","px":"sm","py":"xxs","text":"sm","whiteSpace":"break-spaces","children":"md"}]," (default) or ",["$","$L5","code-3",{"alignItems":"center","as":"code","backgroundColor":"neutral-30","borderRadius":"md","color":"neutral-90","display":"inline-flex","px":"sm","py":"xxs","text":"sm","whiteSpace":"break-spaces","children":"lg"}],"."]}],"\n",["$","$L20","div-3",{"code":"import { Button } from 'welcome-ui/Button'\n\nconst Example = () => {\n return (\n <>\n \n \n \n \n \n )\n}\n\nexport default Example\n","isOverview":false,"mt":"$undefined","name":"Button","pathToFile":"/Button/docs/examples/sizes.tsx","withCodeEditor":true}],"\n",["$","$Lf","h3-2",{"as":"h3","id":"disabled","mb":"lg","mt":"xxl","style":{"scrollMarginTop":170},"variant":"h4","children":["$","$L5",null,{"as":"a","color":"inherit","href":"#disabled","textDecoration":{"hover":"underline"},"children":"Disabled"}]}],"\n",["$","$L21","p-3",{"node":{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"All disabled buttons have the same style.","position":{"start":{"line":28,"column":1,"offset":581},"end":{"line":28,"column":42,"offset":622}}}],"position":{"start":{"line":28,"column":1,"offset":581},"end":{"line":28,"column":42,"offset":622}}},"children":"All disabled buttons have the same style."}],"\n",["$","$L20","div-4",{"code":"import { Button } from 'welcome-ui/Button'\n\nconst Example = () => {\n return \n}\n\nexport default Example\n","isOverview":false,"mt":"$undefined","name":"Button","pathToFile":"/Button/docs/examples/disabled.tsx","withCodeEditor":true}],"\n",["$","$Lf","h3-3",{"as":"h3","id":"with-icons","mb":"lg","mt":"xxl","style":{"scrollMarginTop":170},"variant":"h4","children":["$","$L5",null,{"as":"a","color":"inherit","href":"#with-icons","textDecoration":{"hover":"underline"},"children":"With icons"}]}],"\n",["$","$L20","div-5",{"code":"import { Button } from 'welcome-ui/Button'\nimport { WttjIcon } from 'welcome-ui/Icons'\n\nconst Example = () => {\n return (\n <>\n \n \n \n \n \n )\n}\n\nexport default Example\n","isOverview":false,"mt":"$undefined","name":"Button","pathToFile":"/Button/docs/examples/icons.tsx","withCodeEditor":true}],"\n",["$","$Lf","h3-4",{"as":"h3","id":"shape","mb":"lg","mt":"xxl","style":{"scrollMarginTop":170},"variant":"h4","children":["$","$L5",null,{"as":"a","color":"inherit","href":"#shape","textDecoration":{"hover":"underline"},"children":"Shape"}]}],"\n",["$","$L21","p-4",{"node":{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"You can set a ","position":{"start":{"line":38,"column":1,"offset":784},"end":{"line":38,"column":15,"offset":798}}},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"cirle","position":{"start":{"line":38,"column":15,"offset":798},"end":{"line":38,"column":22,"offset":805}}}],"position":{"start":{"line":38,"column":15,"offset":798},"end":{"line":38,"column":22,"offset":805}}},{"type":"text","value":" or ","position":{"start":{"line":38,"column":22,"offset":805},"end":{"line":38,"column":26,"offset":809}}},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"square","position":{"start":{"line":38,"column":26,"offset":809},"end":{"line":38,"column":34,"offset":817}}}],"position":{"start":{"line":38,"column":26,"offset":809},"end":{"line":38,"column":34,"offset":817}}},{"type":"text","value":" shape with ","position":{"start":{"line":38,"column":34,"offset":817},"end":{"line":38,"column":46,"offset":829}}},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"w","position":{"start":{"line":38,"column":46,"offset":829},"end":{"line":38,"column":49,"offset":832}}}],"position":{"start":{"line":38,"column":46,"offset":829},"end":{"line":38,"column":49,"offset":832}}},{"type":"text","value":" & ","position":{"start":{"line":38,"column":49,"offset":832},"end":{"line":38,"column":52,"offset":835}}},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"h","position":{"start":{"line":38,"column":52,"offset":835},"end":{"line":38,"column":55,"offset":838}}}],"position":{"start":{"line":38,"column":52,"offset":835},"end":{"line":38,"column":55,"offset":838}}},{"type":"text","value":" to have buttons perfect for icons.","position":{"start":{"line":38,"column":55,"offset":838},"end":{"line":38,"column":90,"offset":873}}}],"position":{"start":{"line":38,"column":1,"offset":784},"end":{"line":38,"column":90,"offset":873}}},"children":["You can set a ",["$","$L5","code-0",{"alignItems":"center","as":"code","backgroundColor":"neutral-30","borderRadius":"md","color":"neutral-90","display":"inline-flex","px":"sm","py":"xxs","text":"sm","whiteSpace":"break-spaces","children":"cirle"}]," or ",["$","$L5","code-1",{"alignItems":"center","as":"code","backgroundColor":"neutral-30","borderRadius":"md","color":"neutral-90","display":"inline-flex","px":"sm","py":"xxs","text":"sm","whiteSpace":"break-spaces","children":"square"}]," shape with ",["$","$L5","code-2",{"alignItems":"center","as":"code","backgroundColor":"neutral-30","borderRadius":"md","color":"neutral-90","display":"inline-flex","px":"sm","py":"xxs","text":"sm","whiteSpace":"break-spaces","children":"w"}]," & ",["$","$L5","code-3",{"alignItems":"center","as":"code","backgroundColor":"neutral-30","borderRadius":"md","color":"neutral-90","display":"inline-flex","px":"sm","py":"xxs","text":"sm","whiteSpace":"break-spaces","children":"h"}]," to have buttons perfect for icons."]}],"\n",["$","$L20","div-6",{"code":"import { Button } from 'welcome-ui/Button'\nimport { WttjIcon } from 'welcome-ui/Icons'\n\nconst Example = () => {\n return (\n <>\n \n \n \n \n \n \n \n \n \n )\n}\n\nexport default Example\n","isOverview":false,"mt":"$undefined","name":"Button","pathToFile":"/Button/docs/examples/shapes.tsx","withCodeEditor":true}],"\n",["$","$Lf","h3-5",{"as":"h3","id":"loading","mb":"lg","mt":"xxl","style":{"scrollMarginTop":170},"variant":"h4","children":["$","$L5",null,{"as":"a","color":"inherit","href":"#loading","textDecoration":{"hover":"underline"},"children":"Loading"}]}],"\n",["$","$L21","p-5",{"node":{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"You can set an ","position":{"start":{"line":44,"column":1,"offset":954},"end":{"line":44,"column":16,"offset":969}}},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"isLoading","position":{"start":{"line":44,"column":16,"offset":969},"end":{"line":44,"column":27,"offset":980}}}],"position":{"start":{"line":44,"column":16,"offset":969},"end":{"line":44,"column":27,"offset":980}}},{"type":"text","value":" property to display a loading indicator that matches the button’s size and disables it.","position":{"start":{"line":44,"column":27,"offset":980},"end":{"line":44,"column":115,"offset":1068}}}],"position":{"start":{"line":44,"column":1,"offset":954},"end":{"line":44,"column":115,"offset":1068}}},"children":["You can set an ",["$","$L5","code-0",{"alignItems":"center","as":"code","backgroundColor":"neutral-30","borderRadius":"md","color":"neutral-90","display":"inline-flex","px":"sm","py":"xxs","text":"sm","whiteSpace":"break-spaces","children":"isLoading"}]," property to display a loading indicator that matches the button’s size and disables it."]}],"\n",["$","$L20","div-7",{"code":"import * as React from 'react'\n\nimport { Button } from 'welcome-ui/Button'\n\nconst Example = () => {\n const [isLoading, setIsLoading] = React.useState(false)\n\n return (\n <>\n \n \n \n )\n}\n\nexport default Example\n","isOverview":false,"mt":"$undefined","name":"Button","pathToFile":"/Button/docs/examples/is-loading.tsx","withCodeEditor":true}],"\n",["$","$Lf","h3-6",{"as":"h3","id":"transform-to-a-link","mb":"lg","mt":"xxl","style":{"scrollMarginTop":170},"variant":"h4","children":["$","$L5",null,{"as":"a","color":"inherit","href":"#transform-to-a-link","textDecoration":{"hover":"underline"},"children":"Transform to a link"}]}],"\n",["$","$L21","p-6",{"node":{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"You can transform your Button component with ","position":{"start":{"line":50,"column":1,"offset":1165},"end":{"line":50,"column":46,"offset":1210}}},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"as","position":{"start":{"line":50,"column":46,"offset":1210},"end":{"line":50,"column":50,"offset":1214}}}],"position":{"start":{"line":50,"column":46,"offset":1210},"end":{"line":50,"column":50,"offset":1214}}},{"type":"text","value":" property to add you linker, ","position":{"start":{"line":50,"column":50,"offset":1214},"end":{"line":50,"column":79,"offset":1243}}},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"href","position":{"start":{"line":50,"column":79,"offset":1243},"end":{"line":50,"column":85,"offset":1249}}}],"position":{"start":{"line":50,"column":79,"offset":1243},"end":{"line":50,"column":85,"offset":1249}}},{"type":"text","value":" or ","position":{"start":{"line":50,"column":85,"offset":1249},"end":{"line":50,"column":89,"offset":1253}}},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"to","position":{"start":{"line":50,"column":89,"offset":1253},"end":{"line":50,"column":93,"offset":1257}}}],"position":{"start":{"line":50,"column":89,"offset":1253},"end":{"line":50,"column":93,"offset":1257}}},{"type":"text","value":"... all that you want.","position":{"start":{"line":50,"column":93,"offset":1257},"end":{"line":50,"column":115,"offset":1279}}}],"position":{"start":{"line":50,"column":1,"offset":1165},"end":{"line":50,"column":115,"offset":1279}}},"children":["You can transform your Button component with ",["$","$L5","code-0",{"alignItems":"center","as":"code","backgroundColor":"neutral-30","borderRadius":"md","color":"neutral-90","display":"inline-flex","px":"sm","py":"xxs","text":"sm","whiteSpace":"break-spaces","children":"as"}]," property to add you linker, ",["$","$L5","code-1",{"alignItems":"center","as":"code","backgroundColor":"neutral-30","borderRadius":"md","color":"neutral-90","display":"inline-flex","px":"sm","py":"xxs","text":"sm","whiteSpace":"break-spaces","children":"href"}]," or ",["$","$L5","code-2",{"alignItems":"center","as":"code","backgroundColor":"neutral-30","borderRadius":"md","color":"neutral-90","display":"inline-flex","px":"sm","py":"xxs","text":"sm","whiteSpace":"break-spaces","children":"to"}],"... all that you want."]}],"\n",["$","$L20","div-8",{"code":"import { Button } from 'welcome-ui/Button'\nimport { WttjIcon } from 'welcome-ui/Icons'\n\nconst Example = () => {\n return (\n \n \n Welcome\n \n )\n}\n\nexport default Example\n","isOverview":false,"mt":"$undefined","name":"Button","pathToFile":"/Button/docs/examples/link.tsx","withCodeEditor":true}],"\n",["$","$Lf","h3-7",{"as":"h3","id":"button-group","mb":"lg","mt":"xxl","style":{"scrollMarginTop":170},"variant":"h4","children":["$","$L5",null,{"as":"a","color":"inherit","href":"#button-group","textDecoration":{"hover":"underline"},"children":"ButtonGroup"}]}],"\n",["$","$L21","p-7",{"node":{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"See documentation from ","position":{"start":{"line":56,"column":1,"offset":1362},"end":{"line":56,"column":24,"offset":1385}}},{"type":"element","tagName":"a","properties":{"href":"/components/button-group"},"children":[{"type":"text","value":"ButtonGroup","position":{"start":{"line":56,"column":25,"offset":1386},"end":{"line":56,"column":36,"offset":1397}}}],"position":{"start":{"line":56,"column":24,"offset":1385},"end":{"line":56,"column":63,"offset":1424}}},{"type":"text","value":" component.","position":{"start":{"line":56,"column":63,"offset":1424},"end":{"line":56,"column":74,"offset":1435}}}],"position":{"start":{"line":56,"column":1,"offset":1362},"end":{"line":56,"column":74,"offset":1435}}},"children":["See documentation from ",["$","$L22","a-0",{"href":"/components/button-group","isExternal":true,"rel":"noreferrer noopener","target":"_blank","node":"$12:0:props:children:2:props:children:54:props:node:children:1","children":"ButtonGroup"}]," component."]}]]}]]}],["$","$L23",null,{"isSubPage":true,"tree":[{"href":"#","id":"definition","title":"Definition"},{"href":"#installation","id":"installation","title":"Installation"},{"href":"#examples","id":"examples","title":"Examples","children":[{"href":"#variants","id":"variants","title":"Variants"},{"href":"#sizes","id":"sizes","title":"Sizes"},{"href":"#disabled","id":"disabled","title":"Disabled"},{"href":"#with-icons","id":"with-icons","title":"With icons"},{"href":"#shape","id":"shape","title":"Shape"},{"href":"#loading","id":"loading","title":"Loading"},{"href":"#transform-to-a-link","id":"transform-to-a-link","title":"Transform to a link"},{"href":"#button-group","id":"button-group","title":"ButtonGroup"}]}]}]]