UNPKG

@allakando/allakando-web-ui

Version:

Allakando's web component library

14 lines (12 loc) 2.83 kB
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};