@allakando/allakando-web-ui
Version:
Allakando's web component library
14 lines (12 loc) • 2.83 kB
JavaScript
const a=`# Allakando Button
The button component is used as a drop-in alternative to \\<button\\>.
The button's look and feel can be configured using type (configures the color), size, as well as the "hollow". It is possible to fully customize the button by using the akostyle attribute, which will be applied as inline styles directly to the internal \\<button\\> element.`,s={title:"Atomic Components/Button",component:"ako-button",tags:["autodocs"],parameters:{docs:{description:{component:a}}},argTypes:{type:{options:["primary","neutral","warning","error"],control:{type:"select"}},size:{options:["small","medium","large"],control:{type:"radio"}},hollow:{options:[!0,!1],control:{type:"radio"}},"icon-placement":{options:["before","after"],control:{type:"radio"}},akostyle:{control:"text"},disabled:{options:[!0,!1],control:{type:"radio"}},icon:{control:"text"}}},e=o=>`<ako-button
${o.hollow?`hollow="${o.hollow}"`:""}
${o.akostyle?`akostyle="${o.akostyle}"`:""}
${o.disabled?`disabled="${o.disabled}"`:""}
${o.icon?`icon="${o.icon}"`:""}
${o.type?`type="${o.type}"`:""}
${o["icon-placement"]?`icon-placement="${o["icon-placement"]}"`:""}
${o.akostyle?`akostyle="${o.akostyle}"`:""}
${o.size?`size="${o.size}"`:""}
>Click me!</ako-button>`;e.args={icon:"data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTciIGhlaWdodD0iMTciIHZpZXdCb3g9IjAgMCAxNyAxNyIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik00LjM1Nzg5IDIuODU1MDNMOS43MjU2NCA4LjAwMDczTDQuMzU3ODkgMTMuMTQ2NEMzLjg5MTEyIDEzLjU1MjIgMy44ODE0IDEzLjk1NzkgNC4zMjg3MSAxNC4zNjM3QzQuNzc2MDMgMTQuNzY5NCA1LjIxMzYxIDE0Ljc2OTQgNS42NDE0OCAxNC4zNjM3TDExLjcwOTQgOC42MDkzNkMxMS45MDM5IDguNDYxODEgMTIuMDAxMSA4LjI1ODk0IDEyLjAwMTEgOC4wMDA3M0MxMi4wMDExIDcuNzQyNTIgMTEuOTAzOSA3LjUzOTY0IDExLjcwOTQgNy4zOTIxTDUuNjQxNDggMS42Mzc3N0M1LjIxMzYxIDEuMjMyMDEgNC43NzYwMyAxLjIzMjAxIDQuMzI4NzEgMS42Mzc3N0MzLjg4MTQgMi4wNDM1MiAzLjg5MTEyIDIuNDQ5MjcgNC4zNTc4OSAyLjg1NTAzWiIgZmlsbD0iI2VlZWVlZSIvPgo8L3N2Zz4="};var t,n,l;e.parameters={...e.parameters,docs:{...(t=e.parameters)==null?void 0:t.docs,source:{originalSource:'args => {\n return `<ako-button \n ${args.hollow ? `hollow="${args.hollow}"` : ""}\n ${args.akostyle ? `akostyle="${args.akostyle}"` : ""}\n ${args.disabled ? `disabled="${args.disabled}"` : ""}\n ${args.icon ? `icon="${args.icon}"` : ""}\n ${args.type ? `type="${args.type}"` : ""}\n ${args["icon-placement"] ? `icon-placement="${args["icon-placement"]}"` : ""}\n ${args.akostyle ? `akostyle="${args.akostyle}"` : ""}\n ${args.size ? `size="${args.size}"` : ""}\n >Click me!</ako-button>`;\n}',...(l=(n=e.parameters)==null?void 0:n.docs)==null?void 0:l.source}}};const i=["Template"];export{e as Template,i as __namedExportsOrder,s as default};