var Component=(()=>{var b=Object.create;var p=Object.defineProperty;var E=Object.getOwnPropertyDescriptor;var C=Object.getOwnPropertyNames;var A=Object.getPrototypeOf,v=Object.prototype.hasOwnProperty;var S=(l,e)=>()=>(e||l((e={exports:{}}).exports,e),e.exports),x=(l,e)=>{for(var s in e)p(l,s,{get:e[s],enumerable:!0})},u=(l,e,s,h)=>{if(e&&typeof e=="object"||typeof e=="function")for(let i of C(e))!v.call(l,i)&&i!==s&&p(l,i,{get:()=>e[i],enumerable:!(h=E(e,i))||h.enumerable});return l};var w=(l,e,s)=>(s=l!=null?b(A(l)):{},u(e||!l||!l.__esModule?p(s,"default",{value:l,enumerable:!0}):s,l)),k=l=>u(p({},"__esModule",{value:!0}),l);var g=S((L,m)=>{m.exports=_jsx_runtime});var I={};x(I,{default:()=>f,frontmatter:()=>T});var n=w(g()),T={title:"Button",caption:"Buttons allow users to trigger actions."};function B(l){let e={a:"a",code:"code",figure:"figure",h2:"h2",h3:"h3",li:"li",p:"p",pre:"pre",span:"span",ul:"ul",...l.components},{AppearanceDemo:s,AppearanceTable:h,ComponentDemo:i,Do:t,Dont:r,GuidelineTiles:d,Image:c,PropsTable:y,SectionMessage:a,StorybookHintMessage:F,Toc:D}=e;return s||o("AppearanceDemo",!0),h||o("AppearanceTable",!0),i||o("ComponentDemo",!0),t||o("Do",!0),t.Description||o("Do.Description",!0),t.Figure||o("Do.Figure",!0),r||o("Dont",!0),r.Description||o("Dont.Description",!0),r.Figure||o("Dont.Figure",!0),d||o("GuidelineTiles",!0),c||o("Image",!0),y||o("PropsTable",!0),a||o("SectionMessage",!0),a.Content||o("SectionMessage.Content",!0),a.Title||o("SectionMessage.Title",!0),F||o("StorybookHintMessage",!0),D||o("Toc",!0),(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(D,{data:'[{"anchor":"#anatomy","title":"Anatomy","id":"anatomy","level":"h2"},{"anchor":"#appearance","title":"Appearance","id":"appearance","level":"h2"},{"anchor":"#usage","title":"Usage","id":"usage","level":"h2"},{"anchor":"#visual-hierarchy","title":"Visual hierarchy","id":"visual-hierarchy","level":"h3"},{"anchor":"#icons-and-labels","title":"Icons and labels","id":"icons-and-labels","level":"h3"},{"anchor":"#avoid-disabled-buttons","title":"Avoid disabled buttons","id":"avoid-disabled-buttons","level":"h3"},{"anchor":"#loading-state","title":"Loading state","id":"loading-state","level":"h3"},{"anchor":"#full-width","title":"Full-width","id":"full-width","level":"h3"},{"anchor":"#button-or-link","title":"Button or link","id":"button-or-link","level":"h3"},{"anchor":"#press-event","title":"Press Event","id":"press-event","level":"h3"},{"anchor":"#props","title":"Props","id":"props","level":"h2"},{"anchor":"#alternative-components","title":"Alternative components","id":"alternative-components","level":"h2"}]'}),` `,(0,n.jsxs)(e.p,{children:["The ",(0,n.jsx)(e.code,{children:" ); `,children:(0,n.jsx)(e.figure,{raw:`import { Button, Inline } from '@marigold/components'; import { Edit } from '@marigold/icons'; export default () => ( ); `,"data-rehype-pretty-code-figure":"",children:(0,n.jsx)(e.pre,{style:{backgroundColor:"#292D3E",color:"#babed8"},tabIndex:"0","data-language":"tsx","data-theme":"material-theme-palenight",children:(0,n.jsxs)(e.code,{"data-language":"tsx","data-theme":"material-theme-palenight",style:{display:"grid"},children:[(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#89DDFF",fontStyle:"italic"},children:"import"}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:" {"}),(0,n.jsx)(e.span,{style:{color:"#BABED8"},children:" Button"}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:","}),(0,n.jsx)(e.span,{style:{color:"#BABED8"},children:" Inline"}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:" }"}),(0,n.jsx)(e.span,{style:{color:"#89DDFF",fontStyle:"italic"},children:" from"}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:" '"}),(0,n.jsx)(e.span,{style:{color:"#C3E88D"},children:"@marigold/components"}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:"'"}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:";"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#89DDFF",fontStyle:"italic"},children:"import"}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:" {"}),(0,n.jsx)(e.span,{style:{color:"#BABED8"},children:" Edit"}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:" }"}),(0,n.jsx)(e.span,{style:{color:"#89DDFF",fontStyle:"italic"},children:" from"}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:" '"}),(0,n.jsx)(e.span,{style:{color:"#C3E88D"},children:"@marigold/icons"}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:"'"}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:";"})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#89DDFF",fontStyle:"italic"},children:"export"}),(0,n.jsx)(e.span,{style:{color:"#89DDFF",fontStyle:"italic"},children:" default"}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:" ()"}),(0,n.jsx)(e.span,{style:{color:"#C792EA"},children:" =>"}),(0,n.jsx)(e.span,{style:{color:"#BABED8"},children:" ("})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#FFCB6B"},children:"Inline"}),(0,n.jsx)(e.span,{style:{color:"#C792EA"},children:" space"}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:"={"}),(0,n.jsx)(e.span,{style:{color:"#F78C6C"},children:"5"}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:"} "}),(0,n.jsx)(e.span,{style:{color:"#C792EA"},children:"alignY"}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:'"'}),(0,n.jsx)(e.span,{style:{color:"#C3E88D"},children:"center"}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:'"'}),(0,n.jsx)(e.span,{style:{color:"#C792EA"},children:" alignX"}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:'"'}),(0,n.jsx)(e.span,{style:{color:"#C3E88D"},children:"center"}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:'"'}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:">"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#FFCB6B"},children:"Button"}),(0,n.jsx)(e.span,{style:{color:"#C792EA"},children:" variant"}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:'"'}),(0,n.jsx)(e.span,{style:{color:"#C3E88D"},children:"primary"}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:'"'}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:">"}),(0,n.jsx)(e.span,{style:{color:"#BABED8"},children:"Edit"}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:""})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#FFCB6B"},children:"Button"}),(0,n.jsx)(e.span,{style:{color:"#C792EA"},children:" variant"}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:'"'}),(0,n.jsx)(e.span,{style:{color:"#C3E88D"},children:"primary"}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:'"'}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:">"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#FFCB6B"},children:"Edit"}),(0,n.jsx)(e.span,{style:{color:"#C792EA"},children:" size"}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:"={"}),(0,n.jsx)(e.span,{style:{color:"#F78C6C"},children:"16"}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:"} />"}),(0,n.jsx)(e.span,{style:{color:"#BABED8"},children:" Edit"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:" "})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#FFCB6B"},children:"Button"}),(0,n.jsx)(e.span,{style:{color:"#C792EA"},children:" variant"}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:'"'}),(0,n.jsx)(e.span,{style:{color:"#C3E88D"},children:"icon"}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:'"'}),(0,n.jsx)(e.span,{style:{color:"#C792EA"},children:" aria-label"}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:'"'}),(0,n.jsx)(e.span,{style:{color:"#C3E88D"},children:"Edit"}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:'"'}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:">"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#FFCB6B"},children:"Edit"}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:" />"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:" "})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:" "})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#BABED8"},children:")"}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:";"})]})]})})})}),` `,(0,n.jsxs)(a,{variant:"info",children:[(0,n.jsx)(a.Title,{children:"Keep it accessible"}),(0,n.jsx)(a.Content,{children:(0,n.jsxs)(e.p,{children:["For icon-only buttons, ensure you set an ",(0,n.jsx)(e.code,{children:"aria-label"})," or ",(0,n.jsx)(e.code,{children:"aria-labelledby"}),` attribute to provide context and maintain accessibility.`]})})]}),` `,(0,n.jsxs)(d,{children:[(0,n.jsxs)(t,{children:[(0,n.jsx)(t.Figure,{children:(0,n.jsx)(c,{width:700,height:700,unoptimized:!0,src:"/button/button-icon-do.jpg",alt:"Use icons in buttons to provide additional clarity when the icon is highly relevant to the action."})}),(0,n.jsx)(t.Description,{children:(0,n.jsx)(e.p,{children:`Use icons in buttons to provide additional clarity when the icon is highly relevant to the action.`})})]}),(0,n.jsxs)(r,{children:[(0,n.jsx)(r.Figure,{children:(0,n.jsx)(c,{width:700,height:700,unoptimized:!0,src:"/button/button-icon-dont.jpg",alt:"Icons should not be used for decoration."})}),(0,n.jsx)(r.Description,{children:(0,n.jsx)(e.p,{children:"Icons should not be used for decoration."})})]})]}),` `,(0,n.jsx)(e.h3,{id:"avoid-disabled-buttons",children:(0,n.jsx)(e.a,{href:"#avoid-disabled-buttons",children:"Avoid disabled buttons"})}),` `,(0,n.jsx)(e.p,{children:"A disabled button can't be actioned. Keep buttons active and use validation and error messages to guide users on what needs to be done to proceed."}),` `,(0,n.jsx)(e.p,{children:"Disabled buttons are problematic as they offer no feedback on why an action is unavailable, are often hard to see due to low contrast, and are inaccessible to keyboard users who cannot focus on them."}),` `,(0,n.jsxs)(d,{children:[(0,n.jsxs)(t,{children:[(0,n.jsx)(t.Figure,{children:(0,n.jsx)(c,{width:700,height:700,unoptimized:!0,src:"/button/button-disabled-do.jpg",alt:"Use validation and error messages to guide users on the necessary steps."})}),(0,n.jsx)(t.Description,{children:(0,n.jsx)(e.p,{children:"Use validation and error messages to guide users on the necessary steps."})})]}),(0,n.jsxs)(r,{children:[(0,n.jsx)(r.Figure,{children:(0,n.jsx)(c,{width:700,height:700,unoptimized:!0,src:"/button/button-disabled-dont.jpg",alt:"Don't disable form submission buttons, as this doesn't clearly guide users on how to proceed."})}),(0,n.jsx)(r.Description,{children:(0,n.jsx)(e.p,{children:`Don't disable form submission buttons, as this doesn't clearly guide users on how to proceed.`})})]})]}),` `,(0,n.jsx)(e.p,{children:"In general, it's best to avoid using disabled buttons. However, if they are necessary, take steps to make them more inclusive. Ensure users don't get stuck by providing additional information. Place a message near the disabled button that explains why it is unavailable and what actions are needed to enable it."}),` `,(0,n.jsx)(i,{file:"./button-disabled.demo.tsx",name:"button-disabled",source:`import { Button, Stack, Text } from '@marigold/components'; export default () => ( Only Fanclub members can add a discount code. If you're a Fanclub member, please log in first. ); `,children:(0,n.jsx)(e.figure,{raw:`import { Button, Stack, Text } from '@marigold/components'; export default () => ( Only Fanclub members can add a discount code. If you're a Fanclub member, please log in first. ); `,"data-rehype-pretty-code-figure":"",children:(0,n.jsx)(e.pre,{style:{backgroundColor:"#292D3E",color:"#babed8"},tabIndex:"0","data-language":"tsx","data-theme":"material-theme-palenight",children:(0,n.jsxs)(e.code,{"data-language":"tsx","data-theme":"material-theme-palenight",style:{display:"grid"},children:[(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#89DDFF",fontStyle:"italic"},children:"import"}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:" {"}),(0,n.jsx)(e.span,{style:{color:"#BABED8"},children:" Button"}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:","}),(0,n.jsx)(e.span,{style:{color:"#BABED8"},children:" Stack"}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:","}),(0,n.jsx)(e.span,{style:{color:"#BABED8"},children:" Text"}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:" }"}),(0,n.jsx)(e.span,{style:{color:"#89DDFF",fontStyle:"italic"},children:" from"}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:" '"}),(0,n.jsx)(e.span,{style:{color:"#C3E88D"},children:"@marigold/components"}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:"'"}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:";"})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#89DDFF",fontStyle:"italic"},children:"export"}),(0,n.jsx)(e.span,{style:{color:"#89DDFF",fontStyle:"italic"},children:" default"}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:" ()"}),(0,n.jsx)(e.span,{style:{color:"#C792EA"},children:" =>"}),(0,n.jsx)(e.span,{style:{color:"#BABED8"},children:" ("})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#FFCB6B"},children:"Stack"}),(0,n.jsx)(e.span,{style:{color:"#C792EA"},children:" space"}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:"={"}),(0,n.jsx)(e.span,{style:{color:"#F78C6C"},children:"1"}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:"} "}),(0,n.jsx)(e.span,{style:{color:"#C792EA"},children:"alignX"}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:'"'}),(0,n.jsx)(e.span,{style:{color:"#C3E88D"},children:"left"}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:'"'}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:">"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#FFCB6B"},children:"Button"}),(0,n.jsx)(e.span,{style:{color:"#C792EA"},children:" disabled"}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:">"}),(0,n.jsx)(e.span,{style:{color:"#BABED8"},children:"Add discount code"}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:""})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#FFCB6B"},children:"Text"}),(0,n.jsx)(e.span,{style:{color:"#C792EA"},children:" color"}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:'"'}),(0,n.jsx)(e.span,{style:{color:"#C3E88D"},children:"text-base-disabled"}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:'"'}),(0,n.jsx)(e.span,{style:{color:"#C792EA"},children:" fontSize"}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:'"'}),(0,n.jsx)(e.span,{style:{color:"#C3E88D"},children:"xs"}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:'"'}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:">"})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#BABED8"},children:" Only Fanclub members can add a discount code. If you're a Fanclub member,"})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#BABED8"},children:" please log in first."})}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:" "})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:" "})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#BABED8"},children:")"}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:";"})]})]})})})}),` `,(0,n.jsxs)(a,{variant:"warning",children:[(0,n.jsx)(a.Title,{children:(0,n.jsx)(e.p,{children:"Never put tooltips on disabled buttons"})}),(0,n.jsx)(a.Content,{children:(0,n.jsxs)(e.p,{children:[`Tooltips aren't accessible on all devices or by some assistive technologies, and they should never be used on non-interactive elements. For more information see the `,(0,n.jsx)(e.a,{href:"/components/overlay/tooltip",children:"tooltip page"}),"."]})})]}),` `,(0,n.jsx)(e.h3,{id:"loading-state",children:(0,n.jsx)(e.a,{href:"#loading-state",children:"Loading state"})}),` `,(0,n.jsxs)(e.p,{children:["The ",(0,n.jsx)(e.code,{children:" ); }; `,children:(0,n.jsx)(e.figure,{raw:`import { useState } from 'react'; import { Button, Inline } from '@marigold/components'; export default () => { const [loading, setLoading] = useState(false); const handleLoading = async () => { setLoading(true); try { await new Promise(resolve => setTimeout(resolve, 7000)); } finally { setLoading(false); } }; return ( ); }; `,"data-rehype-pretty-code-figure":"",children:(0,n.jsx)(e.pre,{style:{backgroundColor:"#292D3E",color:"#babed8"},tabIndex:"0","data-language":"tsx","data-theme":"material-theme-palenight",children:(0,n.jsxs)(e.code,{"data-language":"tsx","data-theme":"material-theme-palenight",style:{display:"grid"},children:[(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#89DDFF",fontStyle:"italic"},children:"import"}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:" {"}),(0,n.jsx)(e.span,{style:{color:"#BABED8"},children:" useState"}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:" }"}),(0,n.jsx)(e.span,{style:{color:"#89DDFF",fontStyle:"italic"},children:" from"}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:" '"}),(0,n.jsx)(e.span,{style:{color:"#C3E88D"},children:"react"}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:"'"}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:";"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#89DDFF",fontStyle:"italic"},children:"import"}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:" {"}),(0,n.jsx)(e.span,{style:{color:"#BABED8"},children:" Button"}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:","}),(0,n.jsx)(e.span,{style:{color:"#BABED8"},children:" Inline"}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:" }"}),(0,n.jsx)(e.span,{style:{color:"#89DDFF",fontStyle:"italic"},children:" from"}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:" '"}),(0,n.jsx)(e.span,{style:{color:"#C3E88D"},children:"@marigold/components"}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:"'"}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:";"})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#89DDFF",fontStyle:"italic"},children:"export"}),(0,n.jsx)(e.span,{style:{color:"#89DDFF",fontStyle:"italic"},children:" default"}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:" ()"}),(0,n.jsx)(e.span,{style:{color:"#C792EA"},children:" =>"}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:" {"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#C792EA"},children:" const"}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:" ["}),(0,n.jsx)(e.span,{style:{color:"#BABED8"},children:"loading"}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:","}),(0,n.jsx)(e.span,{style:{color:"#BABED8"},children:" setLoading"}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:"]"}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:" ="}),(0,n.jsx)(e.span,{style:{color:"#82AAFF"},children:" useState"}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:"<"}),(0,n.jsx)(e.span,{style:{color:"#FFCB6B"},children:"boolean"}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:">"}),(0,n.jsx)(e.span,{style:{color:"#F07178"},children:"("}),(0,n.jsx)(e.span,{style:{color:"#FF9CAC"},children:"false"}),(0,n.jsx)(e.span,{style:{color:"#F07178"},children:")"}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:";"})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#C792EA"},children:" const"}),(0,n.jsx)(e.span,{style:{color:"#BABED8"},children:" handleLoading"}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:" ="}),(0,n.jsx)(e.span,{style:{color:"#C792EA"},children:" async"}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:" ()"}),(0,n.jsx)(e.span,{style:{color:"#C792EA"},children:" =>"}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:" {"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#82AAFF"},children:" setLoading"}),(0,n.jsx)(e.span,{style:{color:"#F07178"},children:"("}),(0,n.jsx)(e.span,{style:{color:"#FF9CAC"},children:"true"}),(0,n.jsx)(e.span,{style:{color:"#F07178"},children:")"}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:";"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#89DDFF",fontStyle:"italic"},children:" try"}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:" {"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#89DDFF",fontStyle:"italic"},children:" await"}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:" new"}),(0,n.jsx)(e.span,{style:{color:"#FFCB6B"},children:" Promise"}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:"<"}),(0,n.jsx)(e.span,{style:{color:"#FFCB6B"},children:"void"}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:">"}),(0,n.jsx)(e.span,{style:{color:"#F07178"},children:"("}),(0,n.jsx)(e.span,{style:{color:"#BABED8",fontStyle:"italic"},children:"resolve"}),(0,n.jsx)(e.span,{style:{color:"#C792EA"},children:" =>"}),(0,n.jsx)(e.span,{style:{color:"#82AAFF"},children:" setTimeout"}),(0,n.jsx)(e.span,{style:{color:"#F07178"},children:"("}),(0,n.jsx)(e.span,{style:{color:"#BABED8"},children:"resolve"}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:","}),(0,n.jsx)(e.span,{style:{color:"#F78C6C"},children:" 7000"}),(0,n.jsx)(e.span,{style:{color:"#F07178"},children:"))"}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:";"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:" }"}),(0,n.jsx)(e.span,{style:{color:"#89DDFF",fontStyle:"italic"},children:" finally"}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:" {"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#82AAFF"},children:" setLoading"}),(0,n.jsx)(e.span,{style:{color:"#F07178"},children:"("}),(0,n.jsx)(e.span,{style:{color:"#FF9CAC"},children:"false"}),(0,n.jsx)(e.span,{style:{color:"#F07178"},children:")"}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:";"})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:" }"})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:" };"})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#89DDFF",fontStyle:"italic"},children:" return"}),(0,n.jsx)(e.span,{style:{color:"#F07178"},children:" ("})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#FFCB6B"},children:"Inline"}),(0,n.jsx)(e.span,{style:{color:"#C792EA"},children:" space"}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:"={"}),(0,n.jsx)(e.span,{style:{color:"#F78C6C"},children:"4"}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:"}>"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#FFCB6B"},children:"Button"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#C792EA"},children:" variant"}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:'"'}),(0,n.jsx)(e.span,{style:{color:"#C3E88D"},children:"primary"}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:'"'})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#C792EA"},children:" onPress"}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:"={()"}),(0,n.jsx)(e.span,{style:{color:"#C792EA"},children:" =>"}),(0,n.jsx)(e.span,{style:{color:"#82AAFF"},children:" handleLoading"}),(0,n.jsx)(e.span,{style:{color:"#BABED8"},children:"()"}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:"}"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#C792EA"},children:" loading"}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:"={"}),(0,n.jsx)(e.span,{style:{color:"#BABED8"},children:"loading"}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:"}"})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:" >"})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#BABED8"},children:" Save"})}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:" "})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:" "})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#F07178"},children:" )"}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:";"})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:"};"})})]})})})}),` `,(0,n.jsx)(e.h3,{id:"full-width",children:(0,n.jsx)(e.a,{href:"#full-width",children:"Full-width"})}),` `,(0,n.jsx)(e.p,{children:"Full-width buttons are especially useful for emphasizing primary actions like submitting a form or completing a purchase, as they attract attention and create a strong visual hierarchy. They also enhance usability on mobile devices or in narrow layouts by providing a larger, easier-to-tap target."}),` `,(0,n.jsx)(i,{file:"./button-full-width.demo.tsx",name:"button-full-width",source:`import { Button } from '@marigold/components'; export default () => ( ); `,children:(0,n.jsx)(e.figure,{raw:`import { Button } from '@marigold/components'; export default () => ( ); `,"data-rehype-pretty-code-figure":"",children:(0,n.jsx)(e.pre,{style:{backgroundColor:"#292D3E",color:"#babed8"},tabIndex:"0","data-language":"tsx","data-theme":"material-theme-palenight",children:(0,n.jsxs)(e.code,{"data-language":"tsx","data-theme":"material-theme-palenight",style:{display:"grid"},children:[(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#89DDFF",fontStyle:"italic"},children:"import"}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:" {"}),(0,n.jsx)(e.span,{style:{color:"#BABED8"},children:" Button"}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:" }"}),(0,n.jsx)(e.span,{style:{color:"#89DDFF",fontStyle:"italic"},children:" from"}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:" '"}),(0,n.jsx)(e.span,{style:{color:"#C3E88D"},children:"@marigold/components"}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:"'"}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:";"})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#89DDFF",fontStyle:"italic"},children:"export"}),(0,n.jsx)(e.span,{style:{color:"#89DDFF",fontStyle:"italic"},children:" default"}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:" ()"}),(0,n.jsx)(e.span,{style:{color:"#C792EA"},children:" =>"}),(0,n.jsx)(e.span,{style:{color:"#BABED8"},children:" ("})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#FFCB6B"},children:"Button"}),(0,n.jsx)(e.span,{style:{color:"#C792EA"},children:" variant"}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:'"'}),(0,n.jsx)(e.span,{style:{color:"#C3E88D"},children:"primary"}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:'"'}),(0,n.jsx)(e.span,{style:{color:"#C792EA"},children:" fullWidth"}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:">"})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#BABED8"},children:" Proceed to checkout"})}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:" "})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#BABED8"},children:")"}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:";"})]})]})})})}),` `,(0,n.jsx)(e.h3,{id:"button-or-link",children:(0,n.jsx)(e.a,{href:"#button-or-link",children:"Button or link"})}),` `,(0,n.jsxs)(e.p,{children:["If the user interacts with the element and it results in navigation to another page without submitting a form, use an anchor element (",(0,n.jsx)(e.code,{children:""}),"). For all other interactions that perform actions on the same page, use a button (",(0,n.jsx)(e.code,{children:" Cancel ); `,children:(0,n.jsx)(e.figure,{raw:`import { Button, Inline, Link } from '@marigold/components'; export default () => ( Cancel ); `,"data-rehype-pretty-code-figure":"",children:(0,n.jsx)(e.pre,{style:{backgroundColor:"#292D3E",color:"#babed8"},tabIndex:"0","data-language":"tsx","data-theme":"material-theme-palenight",children:(0,n.jsxs)(e.code,{"data-language":"tsx","data-theme":"material-theme-palenight",style:{display:"grid"},children:[(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#89DDFF",fontStyle:"italic"},children:"import"}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:" {"}),(0,n.jsx)(e.span,{style:{color:"#BABED8"},children:" Button"}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:","}),(0,n.jsx)(e.span,{style:{color:"#BABED8"},children:" Inline"}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:","}),(0,n.jsx)(e.span,{style:{color:"#BABED8"},children:" Link"}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:" }"}),(0,n.jsx)(e.span,{style:{color:"#89DDFF",fontStyle:"italic"},children:" from"}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:" '"}),(0,n.jsx)(e.span,{style:{color:"#C3E88D"},children:"@marigold/components"}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:"'"}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:";"})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#89DDFF",fontStyle:"italic"},children:"export"}),(0,n.jsx)(e.span,{style:{color:"#89DDFF",fontStyle:"italic"},children:" default"}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:" ()"}),(0,n.jsx)(e.span,{style:{color:"#C792EA"},children:" =>"}),(0,n.jsx)(e.span,{style:{color:"#BABED8"},children:" ("})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#FFCB6B"},children:"Inline"}),(0,n.jsx)(e.span,{style:{color:"#C792EA"},children:" space"}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:"={"}),(0,n.jsx)(e.span,{style:{color:"#F78C6C"},children:"2"}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:"} "}),(0,n.jsx)(e.span,{style:{color:"#C792EA"},children:"alignY"}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:'"'}),(0,n.jsx)(e.span,{style:{color:"#C3E88D"},children:"center"}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:'"'}),(0,n.jsx)(e.span,{style:{color:"#C792EA"},children:" alignX"}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:'"'}),(0,n.jsx)(e.span,{style:{color:"#C3E88D"},children:"center"}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:'"'}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:">"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#FFCB6B"},children:"Button"}),(0,n.jsx)(e.span,{style:{color:"#C792EA"},children:" variant"}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:'"'}),(0,n.jsx)(e.span,{style:{color:"#C3E88D"},children:"primary"}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:'"'}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:">"}),(0,n.jsx)(e.span,{style:{color:"#BABED8"},children:"Save"}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:""})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#FFCB6B"},children:"Link"}),(0,n.jsx)(e.span,{style:{color:"#C792EA"},children:" variant"}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:'"'}),(0,n.jsx)(e.span,{style:{color:"#C3E88D"},children:"secondary"}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:'"'}),(0,n.jsx)(e.span,{style:{color:"#C792EA"},children:" href"}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:'"'}),(0,n.jsx)(e.span,{style:{color:"#C3E88D"},children:"#"}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:'"'}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:">"})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#BABED8"},children:" Cancel"})}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:" "})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:" "})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#BABED8"},children:")"}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:";"})]})]})})})}),` `,(0,n.jsxs)(d,{children:[(0,n.jsx)(t,{children:(0,n.jsx)(t.Description,{children:(0,n.jsx)(e.p,{children:"Use buttons to trigger an event or an action."})})}),(0,n.jsx)(r,{children:(0,n.jsx)(r.Description,{children:(0,n.jsx)(e.p,{children:"Don't use buttons for navigation purposes."})})})]}),` `,(0,n.jsx)(e.h3,{id:"press-event",children:(0,n.jsx)(e.a,{href:"#press-event",children:"Press Event"})}),` `,(0,n.jsxs)(e.p,{children:["The ",(0,n.jsx)(e.code,{children:" Number of times pressed: {count} ( {pointerType ? \`Button is pressed via \${pointerType}.\` : 'Button not pressed.'} ) ); }; `,children:(0,n.jsx)(e.figure,{raw:`import { useState } from 'react'; import { Button, Stack, Text } from '@marigold/components'; export default () => { const [pointerType, setPointerType] = useState(''); const [count, setCount] = useState(0); return ( Number of times pressed: {count} ( {pointerType ? \`Button is pressed via \${pointerType}.\` : 'Button not pressed.'} ) ); }; `,"data-rehype-pretty-code-figure":"",children:(0,n.jsx)(e.pre,{style:{backgroundColor:"#292D3E",color:"#babed8"},tabIndex:"0","data-language":"tsx","data-theme":"material-theme-palenight",children:(0,n.jsxs)(e.code,{"data-language":"tsx","data-theme":"material-theme-palenight",style:{display:"grid"},children:[(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#89DDFF",fontStyle:"italic"},children:"import"}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:" {"}),(0,n.jsx)(e.span,{style:{color:"#BABED8"},children:" useState"}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:" }"}),(0,n.jsx)(e.span,{style:{color:"#89DDFF",fontStyle:"italic"},children:" from"}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:" '"}),(0,n.jsx)(e.span,{style:{color:"#C3E88D"},children:"react"}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:"'"}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:";"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#89DDFF",fontStyle:"italic"},children:"import"}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:" {"}),(0,n.jsx)(e.span,{style:{color:"#BABED8"},children:" Button"}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:","}),(0,n.jsx)(e.span,{style:{color:"#BABED8"},children:" Stack"}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:","}),(0,n.jsx)(e.span,{style:{color:"#BABED8"},children:" Text"}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:" }"}),(0,n.jsx)(e.span,{style:{color:"#89DDFF",fontStyle:"italic"},children:" from"}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:" '"}),(0,n.jsx)(e.span,{style:{color:"#C3E88D"},children:"@marigold/components"}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:"'"}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:";"})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#89DDFF",fontStyle:"italic"},children:"export"}),(0,n.jsx)(e.span,{style:{color:"#89DDFF",fontStyle:"italic"},children:" default"}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:" ()"}),(0,n.jsx)(e.span,{style:{color:"#C792EA"},children:" =>"}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:" {"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#C792EA"},children:" const"}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:" ["}),(0,n.jsx)(e.span,{style:{color:"#BABED8"},children:"pointerType"}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:","}),(0,n.jsx)(e.span,{style:{color:"#BABED8"},children:" setPointerType"}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:"]"}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:" ="}),(0,n.jsx)(e.span,{style:{color:"#82AAFF"},children:" useState"}),(0,n.jsx)(e.span,{style:{color:"#F07178"},children:"("}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:"''"}),(0,n.jsx)(e.span,{style:{color:"#F07178"},children:")"}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:";"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#C792EA"},children:" const"}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:" ["}),(0,n.jsx)(e.span,{style:{color:"#BABED8"},children:"count"}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:","}),(0,n.jsx)(e.span,{style:{color:"#BABED8"},children:" setCount"}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:"]"}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:" ="}),(0,n.jsx)(e.span,{style:{color:"#82AAFF"},children:" useState"}),(0,n.jsx)(e.span,{style:{color:"#F07178"},children:"("}),(0,n.jsx)(e.span,{style:{color:"#F78C6C"},children:"0"}),(0,n.jsx)(e.span,{style:{color:"#F07178"},children:")"}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:";"})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#89DDFF",fontStyle:"italic"},children:" return"}),(0,n.jsx)(e.span,{style:{color:"#F07178"},children:" ("})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#FFCB6B"},children:"Stack"}),(0,n.jsx)(e.span,{style:{color:"#C792EA"},children:" space"}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:"={"}),(0,n.jsx)(e.span,{style:{color:"#F78C6C"},children:"3"}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:"} "}),(0,n.jsx)(e.span,{style:{color:"#C792EA"},children:"alignX"}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:'"'}),(0,n.jsx)(e.span,{style:{color:"#C3E88D"},children:"left"}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:'"'}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:">"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#FFCB6B"},children:"Button"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#C792EA"},children:" variant"}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:'"'}),(0,n.jsx)(e.span,{style:{color:"#C3E88D"},children:"primary"}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:'"'})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#C792EA"},children:" onPress"}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:"={()"}),(0,n.jsx)(e.span,{style:{color:"#C792EA"},children:" =>"}),(0,n.jsx)(e.span,{style:{color:"#82AAFF"},children:" setCount"}),(0,n.jsx)(e.span,{style:{color:"#BABED8"},children:"(count "}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:"+"}),(0,n.jsx)(e.span,{style:{color:"#F78C6C"},children:" 1"}),(0,n.jsx)(e.span,{style:{color:"#BABED8"},children:")"}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:"}"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#C792EA"},children:" onPressStart"}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:"={"}),(0,n.jsx)(e.span,{style:{color:"#BABED8",fontStyle:"italic"},children:"e"}),(0,n.jsx)(e.span,{style:{color:"#C792EA"},children:" =>"}),(0,n.jsx)(e.span,{style:{color:"#82AAFF"},children:" setPointerType"}),(0,n.jsx)(e.span,{style:{color:"#BABED8"},children:"(e"}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:"."}),(0,n.jsx)(e.span,{style:{color:"#BABED8"},children:"pointerType)"}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:"}"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#C792EA"},children:" onPressEnd"}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:"={()"}),(0,n.jsx)(e.span,{style:{color:"#C792EA"},children:" =>"}),(0,n.jsx)(e.span,{style:{color:"#82AAFF"},children:" setPointerType"}),(0,n.jsx)(e.span,{style:{color:"#BABED8"},children:"("}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:"''"}),(0,n.jsx)(e.span,{style:{color:"#BABED8"},children:")"}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:"}"})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:" >"})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#BABED8"},children:" Press me"})}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:" "})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#FFCB6B"},children:"Text"}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:">"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#BABED8"},children:" Number of times pressed: "}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:"{"}),(0,n.jsx)(e.span,{style:{color:"#BABED8"},children:"count"}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:"}"}),(0,n.jsx)(e.span,{style:{color:"#BABED8"},children:" ("})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:" {"}),(0,n.jsx)(e.span,{style:{color:"#BABED8"},children:"pointerType"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:" ?"}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:" `"}),(0,n.jsx)(e.span,{style:{color:"#C3E88D"},children:"Button is pressed via "}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:"${"}),(0,n.jsx)(e.span,{style:{color:"#BABED8"},children:"pointerType"}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:"}"}),(0,n.jsx)(e.span,{style:{color:"#C3E88D"},children:"."}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:"`"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:" :"}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:" '"}),(0,n.jsx)(e.span,{style:{color:"#C3E88D"},children:"Button not pressed."}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:"'"}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:"}"})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#BABED8"},children:" )"})}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:" "})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:" "})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#F07178"},children:" )"}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:";"})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:"};"})})]})})})}),` `,(0,n.jsx)(e.h2,{id:"props",children:(0,n.jsx)(e.a,{href:"#props",children:"Props"})}),` `,(0,n.jsx)(F,{component:title}),` `,(0,n.jsx)(y,{component:title}),` `,(0,n.jsx)(e.h2,{id:"alternative-components",children:(0,n.jsx)(e.a,{href:"#alternative-components",children:"Alternative components"})}),` `,(0,n.jsxs)(e.ul,{children:[` `,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.a,{href:"/components/content/link",children:"Link"}),": A component to navigate to another page."]}),` `]})]})}function f(l={}){let{wrapper:e}=l.components||{};return e?(0,n.jsx)(e,{...l,children:(0,n.jsx)(B,{...l})}):B(l)}function o(l,e){throw new Error("Expected "+(e?"component":"object")+" `"+l+"` to be defined: you likely forgot to import, pass, or provide it.")}return k(I);})(); ;return Component;