https://app.onafis.com/assets/Button-DrnKAVEy.js

1import{C as m}from"./CopyToClipboard-B6B_Suy9.js";import{L as c}from"./LinkToDoc-BgYY2HNl.js";import{j as r,r as d,o as _,k as y,w as g,Y as i,W as l,m as o,Q as s,_ as z}from"./index-CxjOM-st.js";import{Q as p}from"./QPage-Cc70yT69.js";import"./copy-to-clipboard-5eZOcKTQ.js";(function(){try{var n=typeof window<"u"?window:typeof global<"u"?global:typeof globalThis<"u"?globalThis:typeof self<"u"?self:{};n.SENTRY_RELEASE={id:"42f86b07ff9e6b123a747812b60de094d599d0d7"}}catch{}})();try{(function(){var n=typeof window<"u"?window:typeof global<"u"?global:typeof globalThis<"u"?globalThis:typeof self<"u"?self:{},a=new n.Error().stack;a&&(n._sentryDebugIds=n._sentryDebugIds||{},n._sentryDebugIds[a]="c752816d-4ec5-490b-aa58-776851bb67bf",n._sentryDebugIdIdentifier="sentry-dbid-c752816d-4ec5-490b-aa58-776851bb67bf")})()}catch{}const u=r({__name:"Button",setup(n,{expose:a}){a();const b={CopyToClipboard:m,LinkToDoc:c};return Object.defineProperty(b,"__isScriptSetup",{enumerable:!1,value:!0}),b}}),f={class:"grid grid-cols-table items-center justify-items-start ml-md"},x={class:"flex items-start gap-16 scroll-x py-8"},h={class:"flex gap-8"},v={class:"flex flex-col items-start gap-4"},P={class:"flex flex-col items-start gap-4"},O={class:"flex gap-8"},C={class:"flex flex-col items-start gap-4"},T={class:"flex flex-col items-start gap-4"},w={class:"flex gap-8"},S={class:"flex flex-col items-start gap-4"},L={class:"flex flex-col items-start gap-4"},D={class:"flex gap-8"},B={class:"flex flex-col items-start gap-4"},M={class:"flex flex-col items-start gap-4"},k={class:"flex items-start gap-16 scroll-x py-8"},I={class:"flex gap-8"},E={class:"flex flex-col items-start gap-4"},G={class:"flex flex-col items-start gap-4"},q={class:"flex gap-8"},N={class:"flex flex-col items-start gap-4"},Q={class:"flex flex-col items-start gap-4"},X={class:"flex gap-8"},j={class:"flex flex-col items-start gap-4"},V={class:"flex flex-col items-start gap-4"},W={class:"flex gap-8"},R={class:"flex flex-col items-start gap-4"},Y={class:"flex flex-col items-start gap-4"},A={class:"flex items-start gap-16 scroll-x py-8"},F={class:"flex gap-8"},H={class:"flex flex-col items-start gap-4"},J={class:"flex flex-col items-start gap-4"},K={class:"flex gap-8"},U={class:"flex flex-col items-start gap-4"},Z={class:"flex flex-col items-start gap-4"},$={class:"flex gap-8"},ll={class:"flex flex-col items-start gap-4"},sl={class:"flex flex-col items-start gap-4"},il={class:"flex gap-8"},al={class:"flex flex-col items-start gap-4"},el={class:"flex flex-col items-start gap-4"};function nl(n,a,b,t,tl,ol){const e=d("qs-btn-icon");return _(),y(p,null,{default:g(()=>[a[25]||(a[25]=i("h1",{class:"mb-5"},"Button",-1)),l(t.LinkToDoc,{href:"https://quasar.dev/vue-components/button",label:"Button"}),a[26]||(a[26]=i("h4",{class:"mt-sm"},"Sizes",-1)),a[27]||(a[27]=i("p",null,"Button size is applied with a css class:",-1)),i("div",f,[a[0]||(a[0]=i("div",null,"SM",-1)),l(t.CopyToClipboard,{value:".btn-size-sm"}),a[1]||(a[1]=i("div",null,"MD",-1)),l(t.CopyToClipboard,{value:".btn-size-md"}),a[2]||(a[2]=i("div",null,"LG",-1)),l(t.CopyToClipboard,{value:".btn-size-lg"}),a[3]||(a[3]=i("div",null,"XL",-1)),l(t.CopyToClipboard,{value:".btn-size-xl"})]),a[28]||(a[28]=i("h4",{class:"mt-sm"},"Icons",-1)),a[29]||(a[29]=i("p",null,"To display both label and icon with proper spacing, the label needs to be a prop and not a slot",-1)),i("p",null,[a[4]||(a[4]=o("To use a button with only an icon, you can either use the CSS class")),l(t.CopyToClipboard,{value:".btn-icon"}),a[5]||(a[5]=o("or the component")),l(t.CopyToClipboard,{value:"qs-btn-icon"}),a[6]||(a[6]=o(". This component applies the CSS correct class and displays the ")),a[7]||(a[7]=i("code",null,"label",-1)),a[8]||(a[8]=o(" prop"))]),i("div",x,[a[13]||(a[13]=i("div",null,[i("h3",null,"Primary"),i("span",null,"Default style")],-1)),i("div",h,[a[9]||(a[9]=i("p",null,"SM",-1)),i("div",v,[l(s,{class:"btn-size-sm",label:"Primary"}),l(s,{class:"btn-size-sm",label:"Primary",loading:""}),l(s,{class:"btn-size-sm",label:"icon",icon:"sym_r_mail"}),l(s,{class:"btn-size-sm",label:"icon","icon-right":"sym_r_mail"}),l(e,{class:"btn-size-sm",label:"Only icon",icon:"sym_r_mail"})]),i("div",P,[l(s,{class:"btn-size-sm",label:"Primary",disable:""}),l(s,{class:"btn-size-sm",label:"Primary",loading:"",disable:""}),l(s,{class:"btn-size-sm",label:"icon",icon:"sym_r_mail",disable:""}),l(s,{class:"btn-size-sm",label:"icon","icon-right":"sym_r_mail",disable:""}),l(e,{class:"btn-size-sm",label:"Only icon",icon:"sym_r_mail",disable:""})])]),i("div",O,[a[10]||(a[10]=i("p",null,"MD",-1)),i("div",C,[l(s,{class:"btn-size-md",label:"Primary"}),l(s,{class:"btn-size-md",label:"Primary",loading:""}),l(s,{class:"btn-size-md",label:"icon",icon:"sym_r_mail"}),l(s,{class:"btn-size-md",label:"icon","icon-right":"sym_r_mail"}),l(e,{class:"btn-size-md",label:"Only icon",icon:"sym_r_mail"})]),i("div",T,[l(s,{class:"btn-size-md",label:"Primary",disable:""}),l(s,{class:"btn-size-md",label:"Primary",loading:"",disable:""}),l(s,{class:"btn-size-md",label:"icon",icon:"sym_r_mail",disable:""}),l(s,{class:"btn-size-md",label:"icon","icon-right":"sym_r_mail",disable:""}),l(e,{class:"btn-size-md",label:"Only icon",icon:"sym_r_mail",disable:""})])]),i("div",w,[a[11]||(a[11]=i("p",null,"LG",-1)),i("div",S,[l(s,{class:"btn-size-lg",label:"Primary"}),l(s,{class:"btn-size-lg",label:"Primary",loading:""}),l(s,{class:"btn-size-lg",label:"icon",icon:"sym_r_mail"}),l(s,{class:"btn-size-lg",label:"icon","icon-right":"sym_r_mail"}),l(e,{class:"btn-size-lg",label:"Only icon",icon:"sym_r_mail"})]),i("div",L,[l(s,{class:"btn-size-lg",label:"Primary",disable:""}),l(s,{class:"btn-size-lg",label:"Primary",loading:"",disable:""}),l(s,{class:"btn-size-lg",label:"icon",icon:"sym_r_mail",disable:""}),l(s,{class:"btn-size-lg",label:"icon","icon-right":"sym_r_mail",disable:""}),l(e,{class:"btn-size-lg",label:"Only icon",icon:"sym_r_mail",disable:""})])]),i("div",D,[a[12]||(a[12]=i("p",null,"XL",-1)),i("div",B,[l(s,{class:"btn-size-xl",label:"Primary"}),l(s,{class:"btn-size-xl",label:"Primary",loading:""}),l(s,{class:"btn-size-xl",label:"icon",icon:"sym_r_mail"}),l(s,{class:"btn-size-xl",label:"icon","icon-right":"sym_r_mail"}),l(e,{class:"btn-size-xl",label:"Only icon",icon:"sym_r_mail"})]),i("div",M,[l(s,{class:"btn-size-xl",label:"Primary",disable:""}),l(s,{class:"btn-size-xl",label:"Primary",loading:"",disable:""}),l(s,{class:"btn-size-xl",label:"icon",icon:"sym_r_mail",disable:""}),l(s,{class:"btn-size-xl",label:"icon","icon-right":"sym_r_mail",disable:""}),l(e,{class:"btn-size-xl",label:"Only icon",icon:"sym_r_mail",disable:""})])])]),i("div",k,[a[18]||(a[18]=i("div",null,[i("h3",null,"Outline"),i("span",null,[o("With prop"),i("code",null,"outline")])],-1)),i("div",I,[a[14]||(a[14]=i("p",null,"SM",-1)),i("div",E,[l(s,{class:"btn-size-sm",outline:"",label:"Primary"}),l(s,{class:"btn-size-sm",outline:"",label:"Primary",loading:""}),l(s,{class:"btn-size-sm",outline:"",label:"icon",icon:"sym_r_mail"}),l(s,{class:"btn-size-sm",outline:"",label:"icon","icon-right":"sym_r_mail"}),l(e,{class:"btn-size-sm",label:"Only icon",outline:"",icon:"sym_r_mail"})]),i("div",G,[l(s,{class:"btn-size-sm",outline:"",label:"Primary",disable:""}),l(s,{class:"btn-size-sm",outline:"",label:"Primary",loading:"",disable:""}),l(s,{class:"btn-size-sm",outline:"",label:"icon",icon:"sym_r_mail",disable:""}),l(s,{class:"btn-size-sm",outline:"",label:"icon","icon-right":"sym_r_mail",disable:""}),l(e,{class:"btn-size-sm",label:"Only icon",outline:"",icon:"sym_r_mail",disable:""})])]),i("div",q,[a[15]||(a[15]=i("p",null,"MD",-1)),i("div",N,[l(s,{class:"btn-size-md",outline:"",label:"Primary"}),l(s,{class:"btn-size-md",outline:"",label:"Primary",loading:""}),l(s,{class:"btn-size-md",outline:"",label:"icon",icon:"sym_r_mail"}),l(s,{class:"btn-size-md",outline:"",label:"icon","icon-right":"sym_r_mail"}),l(e,{class:"btn-size-md",label:"Only icon",outline:"",icon:"sym_r_mail"})]),i("div",Q,[l(s,{class:"btn-size-md",outline:"",label:"Primary",disable:""}),l(s,{class:"btn-size-md",outline:"",label:"Primary",loading:"",disable:""}),l(s,{class:"btn-size-md",outline:"",label:"icon",icon:"sym_r_mail",disable:""}),l(s,{class:"btn-size-md",outline:"",label:"icon","icon-right":"sym_r_mail",disable:""}),l(e,{class:"btn-size-md",label:"Only icon",outline:"",icon:"sym_r_mail",disable:""})])]),i("div",X,[a[16]||(a[16]=i("p",null,"LG",-1)),i("div",j,[l(s,{class:"btn-size-lg",outline:"",label:"Primary"}),l(s,{class:"btn-size-lg",outline:"",label:"Primary",loading:""}),l(s,{class:"btn-size-lg",outline:"",label:"icon",icon:"sym_r_mail"}),l(s,{class:"btn-size-lg",outline:"",label:"icon","icon-right":"sym_r_mail"}),l(e,{class:"btn-size-lg",label:"Only icon",outline:"",icon:"sym_r_mail"})]),i("div",V,[l(s,{class:"btn-size-lg",outline:"",label:"Primary",disable:""}),l(s,{class:"btn-size-lg",outline:"",label:"Primary",loading:"",disable:""}),l(s,{class:"btn-size-lg",outline:"",label:"icon",icon:"sym_r_mail",disable:""}),l(s,{class:"btn-size-lg",outline:"",label:"icon","icon-right":"sym_r_mail",disable:""}),l(e,{class:"btn-size-lg",label:"Only icon",outline:"",icon:"sym_r_mail",disable:""})])]),i("div",W,[a[17]||(a[17]=i("p",null,"XL",-1)),i("div",R,[l(s,{class:"btn-size-xl",outline:"",label:"Primary"}),l(s,{class:"btn-size-xl",outline:"",label:"Primary",loading:""}),l(s,{class:"btn-size-xl",outline:"",label:"icon",icon:"sym_r_mail"}),l(s,{class:"btn-size-xl",outline:"",label:"icon","icon-right":"sym_r_mail"}),l(e,{class:"btn-size-xl",label:"Only icon",outline:"",icon:"sym_r_mail"})]),i("div",Y,[l(s,{class:"btn-size-xl",outline:"",label:"Primary",disable:""}),l(s,{class:"btn-size-xl",outline:"",label:"Primary",loading:"",disable:""}),l(s,{class:"btn-size-xl",outline:"",label:"icon",icon:"sym_r_mail",disable:""}),l(s,{class:"btn-size-xl",outline:"",label:"icon","icon-right":"sym_r_mail",disable:""}),l(e,{class:"btn-size-xl",label:"Only icon",outline:"",icon:"sym_r_mail",disable:""})])])]),i("div",A,[i("div",null,[a[19]||(a[19]=i("h3",null,"Ghost",-1)),a[20]||(a[20]=i("span",null,"With class",-1)),l(t.CopyToClipboard,{value:".ghost"})]),i("div",F,[a[21]||(a[21]=i("p",null,"SM",-1)),i("div",H,[l(s,{class:"ghost btn-size-sm",label:"Primary"}),l(s,{class:"ghost btn-size-sm",label:"Primary",loading:""}),l(s,{class:"ghost btn-size-sm",label:"icon",icon:"sym_r_mail"}),l(s,{class:"ghost btn-size-sm",label:"icon","icon-right":"sym_r_mail"}),l(e,{class:"ghost btn-size-sm",label:"Only icon",icon:"sym_r_mail"})]),i("div",J,[l(s,{class:"ghost btn-size-sm",label:"Primary",disable:""}),l(s,{class:"ghost btn-size-sm",label:"Primary",loading:"",disable:""}),l(s,{class:"ghost btn-size-sm",label:"icon",icon:"sym_r_mail",disable:""}),l(s,{class:"ghost btn-size-sm",label:"icon","icon-right":"sym_r_mail",disable:""}),l(e,{class:"ghost btn-size-sm",label:"Only icon",icon:"sym_r_mail",disable:""})])]),i("div",K,[a[22]||(a[22]=i("p",null,"MD",-1)),i("div",U,[l(s,{class:"ghost btn-size-md",label:"Primary"}),l(s,{class:"ghost btn-size-md",label:"Primary",loading:""}),l(s,{class:"ghost btn-size-md",label:"icon",icon:"sym_r_mail"}),l(s,{class:"ghost btn-size-md",label:"icon","icon-right":"sym_r_mail"}),l(e,{class:"ghost btn-size-md",label:"Only icon",icon:"sym_r_mail"})]),i("div",Z,[l(s,{class:"ghost btn-size-md",label:"Primary",disable:""}),l(s,{class:"ghost btn-size-md",label:"Primary",loading:"",disable:""}),l(s,{class:"ghost btn-size-md",label:"icon",icon:"sym_r_mail",disable:""}),l(s,{class:"ghost btn-size-md",label:"icon","icon-right":"sym_r_mail",disable:""}),l(e,{class:"ghost btn-size-md",label:"Only icon",icon:"sym_r_mail",disable:""})])]),i("div",$,[a[23]||(a[23]=i("p",null,"LG",-1)),i("div",ll,[l(s,{class:"ghost btn-size-lg",label:"Primary"}),l(s,{class:"ghost btn-size-lg",label:"Primary",loading:""}),l(s,{class:"ghost btn-size-lg",label:"icon",icon:"sym_r_mail"}),l(s,{class:"ghost btn-size-lg",label:"icon","icon-right":"sym_r_mail"}),l(e,{class:"ghost btn-size-lg",label:"Only icon",icon:"sym_r_mail"})]),i("div",sl,[l(s,{class:"ghost btn-size-lg",label:"Primary",disable:""}),l(s,{class:"ghost btn-size-lg",label:"Primary",loading:"",disable:""}),l(s,{class:"ghost btn-size-lg",label:"icon",icon:"sym_r_mail",disable:""}),l(s,{class:"ghost btn-size-lg",label:"icon","icon-right":"sym_r_mail",disable:""}),l(e,{class:"ghost btn-size-lg",label:"Only icon",icon:"sym_r_mail",disable:""})])]),i("div",il,[a[24]||(a[24]=i("p",null,"XL",-1)),i("div",al,[l(s,{class:"ghost btn-size-xl",label:"Primary"}),l(s,{class:"ghost btn-size-xl",label:"Primary",loading:""}),l(s,{class:"ghost btn-size-xl",label:"icon",icon:"sym_r_mail"}),l(s,{class:"ghost btn-size-xl",label:"icon","icon-right":"sym_r_mail"}),l(e,{class:"ghost btn-size-xl",label:"Only icon",icon:"sym_r_mail"})]),i("div",el,[l(s,{class:"ghost btn-size-xl",label:"Primary",disable:""}),l(s,{class:"ghost btn-size-xl",label:"Primary",loading:"",disable:""}),l(s,{class:"ghost btn-size-xl",label:"icon",icon:"sym_r_mail",disable:""}),l(s,{class:"ghost btn-size-xl",label:"icon","icon-right":"sym_r_mail",disable:""}),l(e,{class:"ghost btn-size-xl",label:"Only icon",icon:"sym_r_mail",disable:""})])])])]),_:1})}const _l=z(u,[["render",nl],["__file","Button.vue"]]);export{_l as default};