475 lines
233 KiB
HTML
475 lines
233 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en-US" dir="ltr">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||
<title>Vue Button - Flowbite | Flowbite Vue 3</title>
|
||
<meta name="description" content="A VitePress site">
|
||
<link rel="preload stylesheet" href="/assets/style.a165892e.css" as="style">
|
||
|
||
<script type="module" src="/assets/app.8d65fb2d.js"></script>
|
||
<link rel="preload" href="/assets/inter-roman-latin.2ed14f66.woff2" as="font" type="font/woff2" crossorigin="">
|
||
<link rel="modulepreload" href="/assets/chunks/framework.3f630664.js">
|
||
<link rel="modulepreload" href="/assets/chunks/theme.3359535a.js">
|
||
<link rel="modulepreload" href="/assets/chunks/FwbRange.vue_vue_type_style_index_0_scoped_fadec9c5_lang.66ff4c69.js">
|
||
<link rel="modulepreload" href="/assets/chunks/FwbButton.vue_vue_type_script_setup_true_lang.47b4329e.js">
|
||
<link rel="modulepreload" href="/assets/chunks/useMergeClasses.5cec3a4e.js">
|
||
<link rel="modulepreload" href="/assets/chunks/FwbSpinner.vue_vue_type_script_setup_true_lang.40262df1.js">
|
||
<link rel="modulepreload" href="/assets/components_button.md.39f535da.lean.js">
|
||
<link rel="icon" type="image/svg" href="/assets/logo.svg">
|
||
<script>(function(n,e,r,s,t,c){e[s]=e[s]||function(){(e[s].q=e[s].q||[]).push(arguments)},t=n.createElement("script"),c=n.getElementsByTagName("script")[0],t.async=1,t.src=r,t.id="fathom-script",c.parentNode.insertBefore(t,c)})(document,window,"https://cdn.usefathom.com/tracker.js","fathom"),fathom("set","siteId","MPNTKCVJ"),fathom("trackPageview");</script>
|
||
<script id="check-dark-light">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"auto",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
|
||
<script id="check-mac-os">document.documentElement.classList.toggle("mac",/Mac|iPhone|iPod|iPad/i.test(navigator.platform));</script>
|
||
</head>
|
||
<body>
|
||
<div id="app"><div class="Layout" data-v-1919c326><!--[--><!--]--><!--[--><span tabindex="-1" data-v-0f60ec36></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-0f60ec36> Skip to content </a><!--]--><!----><header class="VPNav" data-v-1919c326 data-v-7e5bc4a5><div class="VPNavBar has-sidebar" data-v-7e5bc4a5 data-v-a0fd61f4><div class="container" data-v-a0fd61f4><div class="title" data-v-a0fd61f4><div class="VPNavBarTitle has-sidebar" data-v-a0fd61f4 data-v-86d1bed8><a class="title" href="/" data-v-86d1bed8><!--[--><!--]--><!--[--><img class="VPImage logo" src="/assets/logo.svg" alt data-v-8426fc1a><!--]--><!--[-->Flowbite Vue 3<!--]--><!--[--><!--]--></a></div></div><div class="content" data-v-a0fd61f4><div class="curtain" data-v-a0fd61f4></div><div class="content-body" data-v-a0fd61f4><!--[--><!--]--><div class="VPNavBarSearch search" data-v-a0fd61f4><!----></div><!----><!----><div class="VPNavBarAppearance appearance" data-v-a0fd61f4 data-v-f6a63727><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="toggle dark mode" aria-checked="false" data-v-f6a63727 data-v-ce54a7d1 data-v-b1685198><span class="check" data-v-b1685198><span class="icon" data-v-b1685198><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-ce54a7d1><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-ce54a7d1><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></div><div class="VPSocialLinks VPNavBarSocialLinks social-links" data-v-a0fd61f4 data-v-0394ad82 data-v-7bc22406><!--[--><a class="VPSocialLink no-icon" href="https://github.com/themesberg/flowbite-vue" aria-label="github" target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>GitHub</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg></a><a class="VPSocialLink no-icon" href="https://discord.gg/4eeurUVvTy" aria-label="discord" target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Discord</title><path d="M20.317 4.3698a19.7913 19.7913 0 00-4.8851-1.5152.0741.0741 0 00-.0785.0371c-.211.3753-.4447.8648-.6083 1.2495-1.8447-.2762-3.68-.2762-5.4868 0-.1636-.3933-.4058-.8742-.6177-1.2495a.077.077 0 00-.0785-.037 19.7363 19.7363 0 00-4.8852 1.515.0699.0699 0 00-.0321.0277C.5334 9.0458-.319 13.5799.0992 18.0578a.0824.0824 0 00.0312.0561c2.0528 1.5076 4.0413 2.4228 5.9929 3.0294a.0777.0777 0 00.0842-.0276c.4616-.6304.8731-1.2952 1.226-1.9942a.076.076 0 00-.0416-.1057c-.6528-.2476-1.2743-.5495-1.8722-.8923a.077.077 0 01-.0076-.1277c.1258-.0943.2517-.1923.3718-.2914a.0743.0743 0 01.0776-.0105c3.9278 1.7933 8.18 1.7933 12.0614 0a.0739.0739 0 01.0785.0095c.1202.099.246.1981.3728.2924a.077.077 0 01-.0066.1276 12.2986 12.2986 0 01-1.873.8914.0766.0766 0 00-.0407.1067c.3604.698.7719 1.3628 1.225 1.9932a.076.076 0 00.0842.0286c1.961-.6067 3.9495-1.5219 6.0023-3.0294a.077.077 0 00.0313-.0552c.5004-5.177-.8382-9.6739-3.5485-13.6604a.061.061 0 00-.0312-.0286zM8.02 15.3312c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9555-2.4189 2.157-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.9555 2.4189-2.1569 2.4189zm7.9748 0c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9554-2.4189 2.1569-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.946 2.4189-2.1568 2.4189Z"/></svg></a><!--]--></div><div class="VPFlyout VPNavBarExtra extra" data-v-a0fd61f4 data-v-40855f84 data-v-9c007e85><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-9c007e85><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="icon" data-v-9c007e85><circle cx="12" cy="12" r="2"></circle><circle cx="19" cy="12" r="2"></circle><circle cx="5" cy="12" r="2"></circle></svg></button><div class="menu" data-v-9c007e85><div class="VPMenu" data-v-9c007e85 data-v-e7ea1737><!----><!--[--><!--[--><!----><div class="group" data-v-40855f84><div class="item appearance" data-v-40855f84><p class="label" data-v-40855f84>Appearance</p><div class="appearance-action" data-v-40855f84><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="toggle dark mode" aria-checked="false" data-v-40855f84 data-v-ce54a7d1 data-v-b1685198><span class="check" data-v-b1685198><span class="icon" data-v-b1685198><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-ce54a7d1><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-ce54a7d1><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></div></div></div><div class="group" data-v-40855f84><div class="item social-links" data-v-40855f84><div class="VPSocialLinks social-links-list" data-v-40855f84 data-v-7bc22406><!--[--><a class="VPSocialLink no-icon" href="https://github.com/themesberg/flowbite-vue" aria-label="github" target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>GitHub</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg></a><a class="VPSocialLink no-icon" href="https://discord.gg/4eeurUVvTy" aria-label="discord" target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Discord</title><path d="M20.317 4.3698a19.7913 19.7913 0 00-4.8851-1.5152.0741.0741 0 00-.0785.0371c-.211.3753-.4447.8648-.6083 1.2495-1.8447-.2762-3.68-.2762-5.4868 0-.1636-.3933-.4058-.8742-.6177-1.2495a.077.077 0 00-.0785-.037 19.7363 19.7363 0 00-4.8852 1.515.0699.0699 0 00-.0321.0277C.5334 9.0458-.319 13.5799.0992 18.0578a.0824.0824 0 00.0312.0561c2.0528 1.5076 4.0413 2.4228 5.9929 3.0294a.0777.0777 0 00.0842-.0276c.4616-.6304.8731-1.2952 1.226-1.9942a.076.076 0 00-.0416-.1057c-.6528-.2476-1.2743-.5495-1.8722-.8923a.077.077 0 01-.0076-.1277c.1258-.0943.2517-.1923.3718-.2914a.0743.0743 0 01.0776-.0105c3.9278 1.7933 8.18 1.7933 12.0614 0a.0739.0739 0 01.0785.0095c.1202.099.246.1981.3728.2924a.077.077 0 01-.0066.1276 12.2986 12.2986 0 01-1.873.8914.0766.0766 0 00-.0407.1067c.3604.698.7719 1.3628 1.225 1.9932a.076.076 0 00.0842.0286c1.961-.6067 3.9495-1.5219 6.0023-3.0294a.077.077 0 00.0313-.0552c.5004-5.177-.8382-9.6739-3.5485-13.6604a.061.061 0 00-.0312-.0286zM8.02 15.3312c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9555-2.4189 2.157-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.9555 2.4189-2.1569 2.4189zm7.9748 0c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9554-2.4189 2.1569-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.946 2.4189-2.1568 2.4189Z"/></svg></a><!--]--></div></div></div><!--]--><!--]--></div></div></div><!--[--><!--]--><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-a0fd61f4 data-v-e5dd9c1c><span class="container" data-v-e5dd9c1c><span class="top" data-v-e5dd9c1c></span><span class="middle" data-v-e5dd9c1c></span><span class="bottom" data-v-e5dd9c1c></span></span></button></div></div></div></div><!----></header><div class="VPLocalNav reached-top" data-v-1919c326 data-v-79c8c1df><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-79c8c1df><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="menu-icon" data-v-79c8c1df><path d="M17,11H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,11,17,11z"></path><path d="M21,7H3C2.4,7,2,6.6,2,6s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,7,21,7z"></path><path d="M21,15H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,15,21,15z"></path><path d="M17,19H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,19,17,19z"></path></svg><span class="menu-text" data-v-79c8c1df>Menu</span></button><div class="VPLocalNavOutlineDropdown" style="--vp-vh:0px;" data-v-79c8c1df data-v-1c15a60a><button data-v-1c15a60a>Return to top</button><!----></div></div><aside class="VPSidebar" data-v-1919c326 data-v-b00e2fdd><div class="curtain" data-v-b00e2fdd></div><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-b00e2fdd><span class="visually-hidden" id="sidebar-aria-label" data-v-b00e2fdd> Sidebar Navigation </span><!--[--><!--]--><!--[--><div class="group" data-v-b00e2fdd><section class="VPSidebarItem level-0" data-v-b00e2fdd data-v-e31bd47b><!----><div class="items" data-v-e31bd47b><!--[--><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Home</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/pages/getting-started" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Quickstart</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-b00e2fdd><section class="VPSidebarItem level-0 has-active" data-v-b00e2fdd data-v-e31bd47b><div class="item" role="button" tabindex="0" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><h2 class="text" data-v-e31bd47b>Components</h2><!----></div><div class="items" data-v-e31bd47b><!--[--><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/components/accordion" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Accordion</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/components/alert" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Alert</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/components/avatar" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Avatar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/components/badge" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Badge</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/components/breadcrumb" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Breadcrumb</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/components/button" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Button</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/components/button-group" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Button Group</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/components/card" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Card</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/components/carousel" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Carousel</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/components/dropdown" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Dropdown</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/components/jumbotron" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Jumbotron</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/components/list-group" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>ListGroup</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/components/pagination" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Pagination</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/components/progress" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Progress</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/components/rating" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Rating</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/components/spinner" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Spinner</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/components/table" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Table</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/components/tabs" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Tabs</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/components/timeline" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Timeline</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/components/toast" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Toast</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/components/tooltip" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Tooltip</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/components/modal" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Modal</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/components/navbar" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Navbar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/components/footer" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Footer</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/components/sidebar" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Sidebar</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-b00e2fdd><section class="VPSidebarItem level-0" data-v-b00e2fdd data-v-e31bd47b><div class="item" role="button" tabindex="0" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><h2 class="text" data-v-e31bd47b>Form</h2><!----></div><div class="items" data-v-e31bd47b><!--[--><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/components/input" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Input</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/components/fileInput" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>File Input</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/components/select" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Select</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/components/textarea" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Textarea</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/components/checkbox" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Checkbox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/components/radio" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Radio</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/components/toggle" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Toggle</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/components/range" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Range</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-b00e2fdd><section class="VPSidebarItem level-0" data-v-b00e2fdd data-v-e31bd47b><div class="item" role="button" tabindex="0" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><h2 class="text" data-v-e31bd47b>Typography</h2><!----></div><div class="items" data-v-e31bd47b><!--[--><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/components/heading" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Heading</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/components/paragraph" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Paragraph</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/components/image" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Image</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/components/link" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Link</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-b00e2fdd><section class="VPSidebarItem level-0" data-v-b00e2fdd data-v-e31bd47b><div class="item" role="button" tabindex="0" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><h2 class="text" data-v-e31bd47b>Utils</h2><!----></div><div class="items" data-v-e31bd47b><!--[--><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/components/flowbiteThemable/flowbiteThemable" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Flowbite Themable</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/components/toastProvider/toastProvider" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Toast Provider</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><!--]--><!--[--><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-1919c326 data-v-669faec9><div class="VPDoc has-sidebar has-aside" data-v-669faec9 data-v-6b87e69f><!--[--><!--]--><div class="container" data-v-6b87e69f><div class="aside" data-v-6b87e69f><div class="aside-curtain" data-v-6b87e69f></div><div class="aside-container" data-v-6b87e69f><div class="aside-content" data-v-6b87e69f><div class="VPDocAside" data-v-6b87e69f data-v-3f215769><!--[--><!--]--><!--[--><!--]--><div class="VPDocAsideOutline" role="navigation" data-v-3f215769 data-v-d330b1bb><div class="content" data-v-d330b1bb><div class="outline-marker" data-v-d330b1bb></div><div class="outline-title" role="heading" aria-level="2" data-v-d330b1bb>On this page</div><nav aria-labelledby="doc-outline-aria-label" data-v-d330b1bb><span class="visually-hidden" id="doc-outline-aria-label" data-v-d330b1bb> Table of Contents for current page </span><ul class="root" data-v-d330b1bb data-v-d0ee3533><!--[--><!--]--></ul></nav></div></div><!--[--><!--]--><div class="spacer" data-v-3f215769></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-6b87e69f><div class="content-container" data-v-6b87e69f><!--[--><!--]--><!----><main class="main" data-v-6b87e69f><div style="position:relative;" class="vp-doc _components_button" data-v-6b87e69f><div><h1 id="vue-button-flowbite" tabindex="-1">Vue Button - Flowbite <a class="header-anchor" href="#vue-button-flowbite" aria-label="Permalink to "Vue Button - Flowbite""></a></h1><h4 id="use-the-button-component-inside-forms-as-links-social-login-payment-options-with-support-for-multiple-styles-colors-sizes-gradients-and-shadows" tabindex="-1">Use the button component inside forms, as links, social login, payment options with support for multiple styles, colors, sizes, gradients, and shadows <a class="header-anchor" href="#use-the-button-component-inside-forms-as-links-social-login-payment-options-with-support-for-multiple-styles-colors-sizes-gradients-and-shadows" aria-label="Permalink to "Use the button component inside forms, as links, social login, payment options with support for multiple styles, colors, sizes, gradients, and shadows""></a></h4><hr><div class="tip custom-block"><p class="custom-block-title">TIP</p><p>Original reference: <a href="https://flowbite.com/docs/components/buttons/" target="_blank" rel="noreferrer">https://flowbite.com/docs/components/buttons/</a></p></div><p>The button component is probably the most widely used element in any user interface or website as it can be used to launch an action but also to link to other pages.</p><p>Flowbite provides a large variety of styles and sizes for the button component including outlined buttons, multiple colors, sizes, buttons with icons, and more.</p><h2 id="prop-color" tabindex="-1">Prop - color <a class="header-anchor" href="#prop-color" aria-label="Permalink to "Prop - color""></a></h2><div class="vp-raw flex flex-wrap gap-2"><button class="text-white bg-blue-700 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg dark:bg-blue-600 focus:outline-none dark:focus:ring-blue-800 hover:bg-blue-800 dark:hover:bg-blue-700 text-sm px-4 py-2" href><!----><span class=""><!----><!--[--> Default <!--]--><!----></span><!----></button><button class="font-medium text-gray-900 focus:outline-none bg-white rounded-lg border border-gray-200 focus:z-10 focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 hover:bg-gray-100 hover:text-blue-700 dark:hover:text-white dark:hover:bg-gray-700 text-sm px-4 py-2" href><!----><span class=""><!----><!--[--> Alternative <!--]--><!----></span><!----></button><button class="text-white bg-gray-800 focus:outline-none focus:ring-4 focus:ring-gray-300 font-medium rounded-lg dark:bg-gray-800 dark:focus:ring-gray-700 dark:border-gray-700 hover:bg-gray-900 dark:hover:bg-gray-700 text-sm px-4 py-2" href><!----><span class=""><!----><!--[--> Dark <!--]--><!----></span><!----></button><button class="text-gray-900 bg-white border border-gray-300 focus:outline-none focus:ring-4 focus:ring-gray-200 font-medium rounded-lg dark:bg-gray-800 dark:text-white dark:border-gray-600 dark:focus:ring-gray-700 hover:bg-gray-100 dark:hover:border-gray-600 text-sm px-4 py-2" href><!----><span class=""><!----><!--[--> Light <!--]--><!----></span><!----></button><button class="focus:outline-none text-white bg-green-700 focus:ring-4 focus:ring-green-300 font-medium rounded-lg dark:bg-green-600 dark:focus:ring-green-800 hover:bg-green-800 dark:hover:bg-green-700 text-sm px-4 py-2" href><!----><span class=""><!----><!--[--> Green <!--]--><!----></span><!----></button><button class="focus:outline-none text-white bg-red-700 focus:ring-4 focus:ring-red-300 font-medium rounded-lg dark:bg-red-600 dark:focus:ring-red-900 hover:bg-red-800 dark:hover:bg-red-700 text-sm px-4 py-2" href><!----><span class=""><!----><!--[--> Red <!--]--><!----></span><!----></button><button class="focus:outline-none text-white bg-yellow-400 focus:ring-4 focus:ring-yellow-300 font-medium rounded-lg dark:focus:ring-yellow-900 hover:bg-yellow-500 text-sm px-4 py-2" href><!----><span class=""><!----><!--[--> Yellow <!--]--><!----></span><!----></button><button class="focus:outline-none text-white bg-purple-700 focus:ring-4 focus:ring-purple-300 font-medium rounded-lg dark:bg-purple-600 dark:focus:ring-purple-900 hover:bg-purple-800 dark:hover:bg-purple-700 text-sm px-4 py-2" href><!----><span class=""><!----><!--[--> Purple <!--]--><!----></span><!----></button><button class="focus:outline-none text-white bg-pink-700 focus:ring-4 focus:ring-pink-300 font-medium rounded-lg dark:bg-pink-600 dark:focus:ring-pink-900 hover:bg-pink-800 dark:hover:bg-pink-700 text-sm px-4 py-2" href><!----><span class=""><!----><!--[--> Pink <!--]--><!----></span><!----></button></div><div class="language-vue vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki github-dark vp-code-dark"><code><span class="line"><span style="color:#E1E4E8;"><</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> <</span><span style="color:#85E89D;">fwb-button</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">color</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">"default"</span><span style="color:#E1E4E8;">>Default</</span><span style="color:#85E89D;">fwb-button</span><span style="color:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> <</span><span style="color:#85E89D;">fwb-button</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">color</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">"alternative"</span><span style="color:#E1E4E8;">>Alternative</</span><span style="color:#85E89D;">fwb-button</span><span style="color:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> <</span><span style="color:#85E89D;">fwb-button</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">color</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">"dark"</span><span style="color:#E1E4E8;">>Dark</</span><span style="color:#85E89D;">fwb-button</span><span style="color:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> <</span><span style="color:#85E89D;">fwb-button</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">color</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">"light"</span><span style="color:#E1E4E8;">>Light</</span><span style="color:#85E89D;">fwb-button</span><span style="color:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> <</span><span style="color:#85E89D;">fwb-button</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">color</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">"green"</span><span style="color:#E1E4E8;">>Green</</span><span style="color:#85E89D;">fwb-button</span><span style="color:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> <</span><span style="color:#85E89D;">fwb-button</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">color</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">"red"</span><span style="color:#E1E4E8;">>Red</</span><span style="color:#85E89D;">fwb-button</span><span style="color:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> <</span><span style="color:#85E89D;">fwb-button</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">color</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">"yellow"</span><span style="color:#E1E4E8;">>Yellow</</span><span style="color:#85E89D;">fwb-button</span><span style="color:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> <</span><span style="color:#85E89D;">fwb-button</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">color</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">"purple"</span><span style="color:#E1E4E8;">>Purple</</span><span style="color:#85E89D;">fwb-button</span><span style="color:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> <</span><span style="color:#85E89D;">fwb-button</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">color</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">"pink"</span><span style="color:#E1E4E8;">>Pink</</span><span style="color:#85E89D;">fwb-button</span><span style="color:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"></</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;">></span></span>
|
||
<span class="line"></span>
|
||
<span class="line"><span style="color:#E1E4E8;"><</span><span style="color:#85E89D;">script</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">setup</span><span style="color:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="color:#F97583;">import</span><span style="color:#E1E4E8;"> { FwbButton } </span><span style="color:#F97583;">from</span><span style="color:#E1E4E8;"> </span><span style="color:#9ECBFF;">'flowbite-vue'</span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"></</span><span style="color:#85E89D;">script</span><span style="color:#E1E4E8;">></span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#24292E;"><</span><span style="color:#22863A;">template</span><span style="color:#24292E;">></span></span>
|
||
<span class="line"><span style="color:#24292E;"> <</span><span style="color:#22863A;">fwb-button</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">color</span><span style="color:#24292E;">=</span><span style="color:#032F62;">"default"</span><span style="color:#24292E;">>Default</</span><span style="color:#22863A;">fwb-button</span><span style="color:#24292E;">></span></span>
|
||
<span class="line"><span style="color:#24292E;"> <</span><span style="color:#22863A;">fwb-button</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">color</span><span style="color:#24292E;">=</span><span style="color:#032F62;">"alternative"</span><span style="color:#24292E;">>Alternative</</span><span style="color:#22863A;">fwb-button</span><span style="color:#24292E;">></span></span>
|
||
<span class="line"><span style="color:#24292E;"> <</span><span style="color:#22863A;">fwb-button</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">color</span><span style="color:#24292E;">=</span><span style="color:#032F62;">"dark"</span><span style="color:#24292E;">>Dark</</span><span style="color:#22863A;">fwb-button</span><span style="color:#24292E;">></span></span>
|
||
<span class="line"><span style="color:#24292E;"> <</span><span style="color:#22863A;">fwb-button</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">color</span><span style="color:#24292E;">=</span><span style="color:#032F62;">"light"</span><span style="color:#24292E;">>Light</</span><span style="color:#22863A;">fwb-button</span><span style="color:#24292E;">></span></span>
|
||
<span class="line"><span style="color:#24292E;"> <</span><span style="color:#22863A;">fwb-button</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">color</span><span style="color:#24292E;">=</span><span style="color:#032F62;">"green"</span><span style="color:#24292E;">>Green</</span><span style="color:#22863A;">fwb-button</span><span style="color:#24292E;">></span></span>
|
||
<span class="line"><span style="color:#24292E;"> <</span><span style="color:#22863A;">fwb-button</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">color</span><span style="color:#24292E;">=</span><span style="color:#032F62;">"red"</span><span style="color:#24292E;">>Red</</span><span style="color:#22863A;">fwb-button</span><span style="color:#24292E;">></span></span>
|
||
<span class="line"><span style="color:#24292E;"> <</span><span style="color:#22863A;">fwb-button</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">color</span><span style="color:#24292E;">=</span><span style="color:#032F62;">"yellow"</span><span style="color:#24292E;">>Yellow</</span><span style="color:#22863A;">fwb-button</span><span style="color:#24292E;">></span></span>
|
||
<span class="line"><span style="color:#24292E;"> <</span><span style="color:#22863A;">fwb-button</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">color</span><span style="color:#24292E;">=</span><span style="color:#032F62;">"purple"</span><span style="color:#24292E;">>Purple</</span><span style="color:#22863A;">fwb-button</span><span style="color:#24292E;">></span></span>
|
||
<span class="line"><span style="color:#24292E;"> <</span><span style="color:#22863A;">fwb-button</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">color</span><span style="color:#24292E;">=</span><span style="color:#032F62;">"pink"</span><span style="color:#24292E;">>Pink</</span><span style="color:#22863A;">fwb-button</span><span style="color:#24292E;">></span></span>
|
||
<span class="line"><span style="color:#24292E;"></</span><span style="color:#22863A;">template</span><span style="color:#24292E;">></span></span>
|
||
<span class="line"></span>
|
||
<span class="line"><span style="color:#24292E;"><</span><span style="color:#22863A;">script</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">setup</span><span style="color:#24292E;">></span></span>
|
||
<span class="line"><span style="color:#D73A49;">import</span><span style="color:#24292E;"> { FwbButton } </span><span style="color:#D73A49;">from</span><span style="color:#24292E;"> </span><span style="color:#032F62;">'flowbite-vue'</span></span>
|
||
<span class="line"><span style="color:#24292E;"></</span><span style="color:#22863A;">script</span><span style="color:#24292E;">></span></span></code></pre></div><h2 id="prop-size" tabindex="-1">Prop - size <a class="header-anchor" href="#prop-size" aria-label="Permalink to "Prop - size""></a></h2><div class="vp-raw flex flex-wrap gap-2 items-center"><button class="text-white bg-blue-700 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg dark:bg-blue-600 focus:outline-none dark:focus:ring-blue-800 hover:bg-blue-800 dark:hover:bg-blue-700 text-xs px-2 py-1" href><!----><span class=""><!----><!--[--> Extra Small - xs <!--]--><!----></span><!----></button><button class="text-white bg-blue-700 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg dark:bg-blue-600 focus:outline-none dark:focus:ring-blue-800 hover:bg-blue-800 dark:hover:bg-blue-700 text-sm px-3 py-1.5" href><!----><span class=""><!----><!--[--> Small - sm <!--]--><!----></span><!----></button><button class="text-white bg-blue-700 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg dark:bg-blue-600 focus:outline-none dark:focus:ring-blue-800 hover:bg-blue-800 dark:hover:bg-blue-700 text-sm px-4 py-2" href><!----><span class=""><!----><!--[--> Medium - md <!--]--><!----></span><!----></button><button class="text-white bg-blue-700 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg dark:bg-blue-600 focus:outline-none dark:focus:ring-blue-800 hover:bg-blue-800 dark:hover:bg-blue-700 text-base px-5 py-2.5" href><!----><span class=""><!----><!--[--> Large - lg <!--]--><!----></span><!----></button><button class="text-white bg-blue-700 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg dark:bg-blue-600 focus:outline-none dark:focus:ring-blue-800 hover:bg-blue-800 dark:hover:bg-blue-700 text-base px-6 py-3" href><!----><span class=""><!----><!--[--> Extra Large - xl <!--]--><!----></span><!----></button></div><div class="language-vue vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki github-dark vp-code-dark"><code><span class="line"><span style="color:#E1E4E8;"><</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> <</span><span style="color:#85E89D;">fwb-button</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">size</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">"xs"</span><span style="color:#E1E4E8;">>Extra Small - xs</</span><span style="color:#85E89D;">fwb-button</span><span style="color:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> <</span><span style="color:#85E89D;">fwb-button</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">size</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">"sm"</span><span style="color:#E1E4E8;">>Small - sm</</span><span style="color:#85E89D;">fwb-button</span><span style="color:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> <</span><span style="color:#85E89D;">fwb-button</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">size</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">"md"</span><span style="color:#E1E4E8;">>Medium - md</</span><span style="color:#85E89D;">fwb-button</span><span style="color:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> <</span><span style="color:#85E89D;">fwb-button</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">size</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">"lg"</span><span style="color:#E1E4E8;">>Large - lg</</span><span style="color:#85E89D;">fwb-button</span><span style="color:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> <</span><span style="color:#85E89D;">fwb-button</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">size</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">"xl"</span><span style="color:#E1E4E8;">>Extra Large - xl</</span><span style="color:#85E89D;">fwb-button</span><span style="color:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"></</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;">></span></span>
|
||
<span class="line"></span>
|
||
<span class="line"><span style="color:#E1E4E8;"><</span><span style="color:#85E89D;">script</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">setup</span><span style="color:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="color:#F97583;">import</span><span style="color:#E1E4E8;"> { FwbButton } </span><span style="color:#F97583;">from</span><span style="color:#E1E4E8;"> </span><span style="color:#9ECBFF;">'flowbite-vue'</span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"></</span><span style="color:#85E89D;">script</span><span style="color:#E1E4E8;">></span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#24292E;"><</span><span style="color:#22863A;">template</span><span style="color:#24292E;">></span></span>
|
||
<span class="line"><span style="color:#24292E;"> <</span><span style="color:#22863A;">fwb-button</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">size</span><span style="color:#24292E;">=</span><span style="color:#032F62;">"xs"</span><span style="color:#24292E;">>Extra Small - xs</</span><span style="color:#22863A;">fwb-button</span><span style="color:#24292E;">></span></span>
|
||
<span class="line"><span style="color:#24292E;"> <</span><span style="color:#22863A;">fwb-button</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">size</span><span style="color:#24292E;">=</span><span style="color:#032F62;">"sm"</span><span style="color:#24292E;">>Small - sm</</span><span style="color:#22863A;">fwb-button</span><span style="color:#24292E;">></span></span>
|
||
<span class="line"><span style="color:#24292E;"> <</span><span style="color:#22863A;">fwb-button</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">size</span><span style="color:#24292E;">=</span><span style="color:#032F62;">"md"</span><span style="color:#24292E;">>Medium - md</</span><span style="color:#22863A;">fwb-button</span><span style="color:#24292E;">></span></span>
|
||
<span class="line"><span style="color:#24292E;"> <</span><span style="color:#22863A;">fwb-button</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">size</span><span style="color:#24292E;">=</span><span style="color:#032F62;">"lg"</span><span style="color:#24292E;">>Large - lg</</span><span style="color:#22863A;">fwb-button</span><span style="color:#24292E;">></span></span>
|
||
<span class="line"><span style="color:#24292E;"> <</span><span style="color:#22863A;">fwb-button</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">size</span><span style="color:#24292E;">=</span><span style="color:#032F62;">"xl"</span><span style="color:#24292E;">>Extra Large - xl</</span><span style="color:#22863A;">fwb-button</span><span style="color:#24292E;">></span></span>
|
||
<span class="line"><span style="color:#24292E;"></</span><span style="color:#22863A;">template</span><span style="color:#24292E;">></span></span>
|
||
<span class="line"></span>
|
||
<span class="line"><span style="color:#24292E;"><</span><span style="color:#22863A;">script</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">setup</span><span style="color:#24292E;">></span></span>
|
||
<span class="line"><span style="color:#D73A49;">import</span><span style="color:#24292E;"> { FwbButton } </span><span style="color:#D73A49;">from</span><span style="color:#24292E;"> </span><span style="color:#032F62;">'flowbite-vue'</span></span>
|
||
<span class="line"><span style="color:#24292E;"></</span><span style="color:#22863A;">script</span><span style="color:#24292E;">></span></span></code></pre></div><h2 id="prop-pill" tabindex="-1">Prop - pill <a class="header-anchor" href="#prop-pill" aria-label="Permalink to "Prop - pill""></a></h2><div class="vp-raw flex flex-wrap gap-2"><button class="text-white bg-blue-700 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg dark:bg-blue-600 focus:outline-none dark:focus:ring-blue-800 hover:bg-blue-800 dark:hover:bg-blue-700 !rounded-full text-sm px-4 py-2" href><!----><span class=""><!----><!--[--> Default <!--]--><!----></span><!----></button><button class="font-medium text-gray-900 focus:outline-none bg-white rounded-lg border border-gray-200 focus:z-10 focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 hover:bg-gray-100 hover:text-blue-700 dark:hover:text-white dark:hover:bg-gray-700 !rounded-full text-sm px-4 py-2" href><!----><span class=""><!----><!--[--> Alternative <!--]--><!----></span><!----></button><button class="text-white bg-gray-800 focus:outline-none focus:ring-4 focus:ring-gray-300 font-medium rounded-lg dark:bg-gray-800 dark:focus:ring-gray-700 dark:border-gray-700 hover:bg-gray-900 dark:hover:bg-gray-700 !rounded-full text-sm px-4 py-2" href><!----><span class=""><!----><!--[--> Dark <!--]--><!----></span><!----></button><button class="text-gray-900 bg-white border border-gray-300 focus:outline-none focus:ring-4 focus:ring-gray-200 font-medium rounded-lg dark:bg-gray-800 dark:text-white dark:border-gray-600 dark:focus:ring-gray-700 hover:bg-gray-100 dark:hover:border-gray-600 !rounded-full text-sm px-4 py-2" href><!----><span class=""><!----><!--[--> Light <!--]--><!----></span><!----></button><button class="focus:outline-none text-white bg-green-700 focus:ring-4 focus:ring-green-300 font-medium rounded-lg dark:bg-green-600 dark:focus:ring-green-800 hover:bg-green-800 dark:hover:bg-green-700 !rounded-full text-sm px-4 py-2" href><!----><span class=""><!----><!--[--> Green <!--]--><!----></span><!----></button><button class="focus:outline-none text-white bg-red-700 focus:ring-4 focus:ring-red-300 font-medium rounded-lg dark:bg-red-600 dark:focus:ring-red-900 hover:bg-red-800 dark:hover:bg-red-700 !rounded-full text-sm px-4 py-2" href><!----><span class=""><!----><!--[--> Red <!--]--><!----></span><!----></button><button class="focus:outline-none text-white bg-yellow-400 focus:ring-4 focus:ring-yellow-300 font-medium rounded-lg dark:focus:ring-yellow-900 hover:bg-yellow-500 !rounded-full text-sm px-4 py-2" href><!----><span class=""><!----><!--[--> Yellow <!--]--><!----></span><!----></button><button class="focus:outline-none text-white bg-purple-700 focus:ring-4 focus:ring-purple-300 font-medium rounded-lg dark:bg-purple-600 dark:focus:ring-purple-900 hover:bg-purple-800 dark:hover:bg-purple-700 !rounded-full text-sm px-4 py-2" href><!----><span class=""><!----><!--[--> Purple <!--]--><!----></span><!----></button></div><div class="language-vue vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki github-dark vp-code-dark"><code><span class="line"><span style="color:#E1E4E8;"><</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> <</span><span style="color:#85E89D;">fwb-button</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">color</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">"default"</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">pill</span><span style="color:#E1E4E8;">>Default</</span><span style="color:#85E89D;">fwb-button</span><span style="color:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> <</span><span style="color:#85E89D;">fwb-button</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">color</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">"alternative"</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">pill</span><span style="color:#E1E4E8;">>Alternative</</span><span style="color:#85E89D;">fwb-button</span><span style="color:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> <</span><span style="color:#85E89D;">fwb-button</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">color</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">"dark"</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">pill</span><span style="color:#E1E4E8;">>Dark</</span><span style="color:#85E89D;">fwb-button</span><span style="color:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> <</span><span style="color:#85E89D;">fwb-button</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">color</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">"light"</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">pill</span><span style="color:#E1E4E8;">>Light</</span><span style="color:#85E89D;">fwb-button</span><span style="color:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> <</span><span style="color:#85E89D;">fwb-button</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">color</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">"green"</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">pill</span><span style="color:#E1E4E8;">>Green</</span><span style="color:#85E89D;">fwb-button</span><span style="color:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> <</span><span style="color:#85E89D;">fwb-button</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">color</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">"red"</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">pill</span><span style="color:#E1E4E8;">>Red</</span><span style="color:#85E89D;">fwb-button</span><span style="color:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> <</span><span style="color:#85E89D;">fwb-button</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">color</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">"yellow"</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">pill</span><span style="color:#E1E4E8;">>Yellow</</span><span style="color:#85E89D;">fwb-button</span><span style="color:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> <</span><span style="color:#85E89D;">fwb-button</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">color</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">"purple"</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">pill</span><span style="color:#E1E4E8;">>Purple</</span><span style="color:#85E89D;">fwb-button</span><span style="color:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"></</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;">></span></span>
|
||
<span class="line"></span>
|
||
<span class="line"><span style="color:#E1E4E8;"><</span><span style="color:#85E89D;">script</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">setup</span><span style="color:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="color:#F97583;">import</span><span style="color:#E1E4E8;"> { FwbButton } </span><span style="color:#F97583;">from</span><span style="color:#E1E4E8;"> </span><span style="color:#9ECBFF;">'flowbite-vue'</span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"></</span><span style="color:#85E89D;">script</span><span style="color:#E1E4E8;">></span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#24292E;"><</span><span style="color:#22863A;">template</span><span style="color:#24292E;">></span></span>
|
||
<span class="line"><span style="color:#24292E;"> <</span><span style="color:#22863A;">fwb-button</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">color</span><span style="color:#24292E;">=</span><span style="color:#032F62;">"default"</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">pill</span><span style="color:#24292E;">>Default</</span><span style="color:#22863A;">fwb-button</span><span style="color:#24292E;">></span></span>
|
||
<span class="line"><span style="color:#24292E;"> <</span><span style="color:#22863A;">fwb-button</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">color</span><span style="color:#24292E;">=</span><span style="color:#032F62;">"alternative"</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">pill</span><span style="color:#24292E;">>Alternative</</span><span style="color:#22863A;">fwb-button</span><span style="color:#24292E;">></span></span>
|
||
<span class="line"><span style="color:#24292E;"> <</span><span style="color:#22863A;">fwb-button</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">color</span><span style="color:#24292E;">=</span><span style="color:#032F62;">"dark"</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">pill</span><span style="color:#24292E;">>Dark</</span><span style="color:#22863A;">fwb-button</span><span style="color:#24292E;">></span></span>
|
||
<span class="line"><span style="color:#24292E;"> <</span><span style="color:#22863A;">fwb-button</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">color</span><span style="color:#24292E;">=</span><span style="color:#032F62;">"light"</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">pill</span><span style="color:#24292E;">>Light</</span><span style="color:#22863A;">fwb-button</span><span style="color:#24292E;">></span></span>
|
||
<span class="line"><span style="color:#24292E;"> <</span><span style="color:#22863A;">fwb-button</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">color</span><span style="color:#24292E;">=</span><span style="color:#032F62;">"green"</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">pill</span><span style="color:#24292E;">>Green</</span><span style="color:#22863A;">fwb-button</span><span style="color:#24292E;">></span></span>
|
||
<span class="line"><span style="color:#24292E;"> <</span><span style="color:#22863A;">fwb-button</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">color</span><span style="color:#24292E;">=</span><span style="color:#032F62;">"red"</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">pill</span><span style="color:#24292E;">>Red</</span><span style="color:#22863A;">fwb-button</span><span style="color:#24292E;">></span></span>
|
||
<span class="line"><span style="color:#24292E;"> <</span><span style="color:#22863A;">fwb-button</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">color</span><span style="color:#24292E;">=</span><span style="color:#032F62;">"yellow"</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">pill</span><span style="color:#24292E;">>Yellow</</span><span style="color:#22863A;">fwb-button</span><span style="color:#24292E;">></span></span>
|
||
<span class="line"><span style="color:#24292E;"> <</span><span style="color:#22863A;">fwb-button</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">color</span><span style="color:#24292E;">=</span><span style="color:#032F62;">"purple"</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">pill</span><span style="color:#24292E;">>Purple</</span><span style="color:#22863A;">fwb-button</span><span style="color:#24292E;">></span></span>
|
||
<span class="line"><span style="color:#24292E;"></</span><span style="color:#22863A;">template</span><span style="color:#24292E;">></span></span>
|
||
<span class="line"></span>
|
||
<span class="line"><span style="color:#24292E;"><</span><span style="color:#22863A;">script</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">setup</span><span style="color:#24292E;">></span></span>
|
||
<span class="line"><span style="color:#D73A49;">import</span><span style="color:#24292E;"> { FwbButton } </span><span style="color:#D73A49;">from</span><span style="color:#24292E;"> </span><span style="color:#032F62;">'flowbite-vue'</span></span>
|
||
<span class="line"><span style="color:#24292E;"></</span><span style="color:#22863A;">script</span><span style="color:#24292E;">></span></span></code></pre></div><h2 id="prop-gradient-monochrome" tabindex="-1">Prop - gradient (monochrome) <a class="header-anchor" href="#prop-gradient-monochrome" aria-label="Permalink to "Prop - gradient (monochrome)""></a></h2><div class="vp-raw flex flex-wrap gap-2"><button class="text-white bg-gradient-to-r from-blue-500 via-blue-600 to-blue-700 focus:ring-4 focus:outline-none focus:ring-blue-300 dark:focus:ring-blue-800 rounded-lg hover:bg-gradient-to-br text-sm px-4 py-2" href><!----><span class=""><!----><!--[--> Blue <!--]--><!----></span><!----></button><button class="text-white bg-gradient-to-r from-cyan-500 via-cyan-600 to-cyan-700 focus:ring-4 focus:outline-none focus:ring-cyan-300 dark:focus:ring-cyan-800 rounded-lg hover:bg-gradient-to-br text-sm px-4 py-2" href><!----><span class=""><!----><!--[--> Cyan <!--]--><!----></span><!----></button><button class="text-white bg-gradient-to-r from-green-500 via-green-600 to-green-700 focus:ring-4 focus:outline-none focus:ring-green-300 dark:focus:ring-green-800 rounded-lg hover:bg-gradient-to-br text-sm px-4 py-2" href><!----><span class=""><!----><!--[--> Green <!--]--><!----></span><!----></button><button class="text-gray-900 bg-gradient-to-r from-lime-500 via-lime-600 to-lime-700 focus:ring-4 focus:outline-none focus:ring-lime-300 dark:focus:ring-lime-800 rounded-lg hover:bg-gradient-to-br text-sm px-4 py-2" href><!----><span class=""><!----><!--[--> Lime <!--]--><!----></span><!----></button><button class="text-white bg-gradient-to-r from-pink-500 via-pink-600 to-pink-700 focus:ring-4 focus:outline-none focus:ring-pink-300 dark:focus:ring-pink-800 rounded-lg hover:bg-gradient-to-br text-sm px-4 py-2" href><!----><span class=""><!----><!--[--> Pink <!--]--><!----></span><!----></button><button class="text-white bg-gradient-to-r from-purple-500 via-purple-600 to-purple-700 focus:ring-4 focus:outline-none focus:ring-purple-300 dark:focus:ring-purple-800 rounded-lg hover:bg-gradient-to-br text-sm px-4 py-2" href><!----><span class=""><!----><!--[--> Purple <!--]--><!----></span><!----></button><button class="text-white bg-gradient-to-r from-red-500 via-red-600 to-red-700 focus:ring-4 focus:outline-none focus:ring-red-300 dark:focus:ring-red-800 rounded-lg hover:bg-gradient-to-br text-sm px-4 py-2" href><!----><span class=""><!----><!--[--> Red <!--]--><!----></span><!----></button><button class="text-white bg-gradient-to-r from-teal-500 via-teal-600 to-teal-700 focus:ring-4 focus:outline-none focus:ring-teal-300 dark:focus:ring-teal-800 rounded-lg hover:bg-gradient-to-br text-sm px-4 py-2" href><!----><span class=""><!----><!--[--> Teal <!--]--><!----></span><!----></button></div><div class="language-vue vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki github-dark vp-code-dark"><code><span class="line"><span style="color:#E1E4E8;"><</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> <</span><span style="color:#85E89D;">fwb-button</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">gradient</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">"blue"</span><span style="color:#E1E4E8;">>Blue</</span><span style="color:#85E89D;">fwb-button</span><span style="color:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> <</span><span style="color:#85E89D;">fwb-button</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">gradient</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">"cyan"</span><span style="color:#E1E4E8;">>Cyan</</span><span style="color:#85E89D;">fwb-button</span><span style="color:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> <</span><span style="color:#85E89D;">fwb-button</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">gradient</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">"green"</span><span style="color:#E1E4E8;">>Green</</span><span style="color:#85E89D;">fwb-button</span><span style="color:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> <</span><span style="color:#85E89D;">fwb-button</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">gradient</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">"lime"</span><span style="color:#E1E4E8;">>Lime</</span><span style="color:#85E89D;">fwb-button</span><span style="color:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> <</span><span style="color:#85E89D;">fwb-button</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">gradient</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">"pink"</span><span style="color:#E1E4E8;">>Pink</</span><span style="color:#85E89D;">fwb-button</span><span style="color:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> <</span><span style="color:#85E89D;">fwb-button</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">gradient</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">"purple"</span><span style="color:#E1E4E8;">>Purple</</span><span style="color:#85E89D;">fwb-button</span><span style="color:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> <</span><span style="color:#85E89D;">fwb-button</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">gradient</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">"red"</span><span style="color:#E1E4E8;">>Red</</span><span style="color:#85E89D;">fwb-button</span><span style="color:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> <</span><span style="color:#85E89D;">fwb-button</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">gradient</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">"teal"</span><span style="color:#E1E4E8;">>Teal</</span><span style="color:#85E89D;">fwb-button</span><span style="color:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"></</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;">></span></span>
|
||
<span class="line"></span>
|
||
<span class="line"><span style="color:#E1E4E8;"><</span><span style="color:#85E89D;">script</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">setup</span><span style="color:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="color:#F97583;">import</span><span style="color:#E1E4E8;"> { FwbButton } </span><span style="color:#F97583;">from</span><span style="color:#E1E4E8;"> </span><span style="color:#9ECBFF;">'flowbite-vue'</span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"></</span><span style="color:#85E89D;">script</span><span style="color:#E1E4E8;">></span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#24292E;"><</span><span style="color:#22863A;">template</span><span style="color:#24292E;">></span></span>
|
||
<span class="line"><span style="color:#24292E;"> <</span><span style="color:#22863A;">fwb-button</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">gradient</span><span style="color:#24292E;">=</span><span style="color:#032F62;">"blue"</span><span style="color:#24292E;">>Blue</</span><span style="color:#22863A;">fwb-button</span><span style="color:#24292E;">></span></span>
|
||
<span class="line"><span style="color:#24292E;"> <</span><span style="color:#22863A;">fwb-button</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">gradient</span><span style="color:#24292E;">=</span><span style="color:#032F62;">"cyan"</span><span style="color:#24292E;">>Cyan</</span><span style="color:#22863A;">fwb-button</span><span style="color:#24292E;">></span></span>
|
||
<span class="line"><span style="color:#24292E;"> <</span><span style="color:#22863A;">fwb-button</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">gradient</span><span style="color:#24292E;">=</span><span style="color:#032F62;">"green"</span><span style="color:#24292E;">>Green</</span><span style="color:#22863A;">fwb-button</span><span style="color:#24292E;">></span></span>
|
||
<span class="line"><span style="color:#24292E;"> <</span><span style="color:#22863A;">fwb-button</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">gradient</span><span style="color:#24292E;">=</span><span style="color:#032F62;">"lime"</span><span style="color:#24292E;">>Lime</</span><span style="color:#22863A;">fwb-button</span><span style="color:#24292E;">></span></span>
|
||
<span class="line"><span style="color:#24292E;"> <</span><span style="color:#22863A;">fwb-button</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">gradient</span><span style="color:#24292E;">=</span><span style="color:#032F62;">"pink"</span><span style="color:#24292E;">>Pink</</span><span style="color:#22863A;">fwb-button</span><span style="color:#24292E;">></span></span>
|
||
<span class="line"><span style="color:#24292E;"> <</span><span style="color:#22863A;">fwb-button</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">gradient</span><span style="color:#24292E;">=</span><span style="color:#032F62;">"purple"</span><span style="color:#24292E;">>Purple</</span><span style="color:#22863A;">fwb-button</span><span style="color:#24292E;">></span></span>
|
||
<span class="line"><span style="color:#24292E;"> <</span><span style="color:#22863A;">fwb-button</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">gradient</span><span style="color:#24292E;">=</span><span style="color:#032F62;">"red"</span><span style="color:#24292E;">>Red</</span><span style="color:#22863A;">fwb-button</span><span style="color:#24292E;">></span></span>
|
||
<span class="line"><span style="color:#24292E;"> <</span><span style="color:#22863A;">fwb-button</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">gradient</span><span style="color:#24292E;">=</span><span style="color:#032F62;">"teal"</span><span style="color:#24292E;">>Teal</</span><span style="color:#22863A;">fwb-button</span><span style="color:#24292E;">></span></span>
|
||
<span class="line"><span style="color:#24292E;"></</span><span style="color:#22863A;">template</span><span style="color:#24292E;">></span></span>
|
||
<span class="line"></span>
|
||
<span class="line"><span style="color:#24292E;"><</span><span style="color:#22863A;">script</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">setup</span><span style="color:#24292E;">></span></span>
|
||
<span class="line"><span style="color:#D73A49;">import</span><span style="color:#24292E;"> { FwbButton } </span><span style="color:#D73A49;">from</span><span style="color:#24292E;"> </span><span style="color:#032F62;">'flowbite-vue'</span></span>
|
||
<span class="line"><span style="color:#24292E;"></</span><span style="color:#22863A;">script</span><span style="color:#24292E;">></span></span></code></pre></div><h2 id="prop-gradient-duotone" tabindex="-1">Prop - gradient (duotone) <a class="header-anchor" href="#prop-gradient-duotone" aria-label="Permalink to "Prop - gradient (duotone)""></a></h2><div class="vp-raw flex flex-wrap gap-2"><button class="text-white bg-gradient-to-br from-purple-600 to-blue-500 focus:ring-4 focus:outline-none focus:ring-blue-300 dark:focus:ring-blue-800 font-medium rounded-lg hover:bg-gradient-to-bl text-sm px-4 py-2" href><!----><span class=""><!----><!--[--> Purple to blue <!--]--><!----></span><!----></button><button class="text-white bg-gradient-to-r from-cyan-500 to-blue-500 focus:ring-4 focus:outline-none focus:ring-cyan-300 dark:focus:ring-cyan-800 font-medium rounded-lg hover:bg-gradient-to-bl text-sm px-4 py-2" href><!----><span class=""><!----><!--[--> Cyan to blue <!--]--><!----></span><!----></button><button class="text-white bg-gradient-to-br from-green-400 to-blue-600 focus:ring-4 focus:outline-none focus:ring-green-200 dark:focus:ring-green-800 font-medium rounded-lg hover:bg-gradient-to-bl text-sm px-4 py-2" href><!----><span class=""><!----><!--[--> Green to blue <!--]--><!----></span><!----></button><button class="text-white bg-gradient-to-r from-purple-500 to-pink-500 focus:ring-4 focus:outline-none focus:ring-purple-200 dark:focus:ring-purple-800 font-medium rounded-lg hover:bg-gradient-to-l text-sm px-4 py-2" href><!----><span class=""><!----><!--[--> Purple to pink <!--]--><!----></span><!----></button><button class="text-white bg-gradient-to-br from-pink-500 to-orange-400 focus:ring-4 focus:outline-none focus:ring-pink-200 dark:focus:ring-pink-800 font-medium rounded-lg hover:bg-gradient-to-bl text-sm px-4 py-2" href><!----><span class=""><!----><!--[--> Pink to orange <!--]--><!----></span><!----></button><button class="text-gray-900 bg-gradient-to-r from-teal-200 to-lime-200 focus:ring-4 focus:outline-none focus:ring-lime-200 dark:focus:ring-teal-700 font-medium rounded-lg hover:bg-gradient-to-l hover:from-teal-200 hover:to-lime-200 text-sm px-4 py-2" href><!----><span class=""><!----><!--[--> Teal to lime <!--]--><!----></span><!----></button><button class="text-gray-900 bg-gradient-to-r from-red-200 via-red-300 to-yellow-200 focus:ring-4 focus:outline-none focus:ring-red-100 dark:focus:ring-red-400 font-medium rounded-lg hover:bg-gradient-to-bl text-sm px-4 py-2" href><!----><span class=""><!----><!--[--> Red to yellow <!--]--><!----></span><!----></button></div><div class="language-vue vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki github-dark vp-code-dark"><code><span class="line"><span style="color:#E1E4E8;"><</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> <</span><span style="color:#85E89D;">fwb-button</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">gradient</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">"purple-blue"</span><span style="color:#E1E4E8;">>Purple to blue</</span><span style="color:#85E89D;">fwb-button</span><span style="color:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> <</span><span style="color:#85E89D;">fwb-button</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">gradient</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">"cyan-blue"</span><span style="color:#E1E4E8;">>Cyan to blue</</span><span style="color:#85E89D;">fwb-button</span><span style="color:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> <</span><span style="color:#85E89D;">fwb-button</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">gradient</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">"green-blue"</span><span style="color:#E1E4E8;">>Green to blue</</span><span style="color:#85E89D;">fwb-button</span><span style="color:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> <</span><span style="color:#85E89D;">fwb-button</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">gradient</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">"purple-pink"</span><span style="color:#E1E4E8;">>Purple to pink</</span><span style="color:#85E89D;">fwb-button</span><span style="color:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> <</span><span style="color:#85E89D;">fwb-button</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">gradient</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">"pink-orange"</span><span style="color:#E1E4E8;">>Pink to orange</</span><span style="color:#85E89D;">fwb-button</span><span style="color:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> <</span><span style="color:#85E89D;">fwb-button</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">gradient</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">"teal-lime"</span><span style="color:#E1E4E8;">>Teal to lime</</span><span style="color:#85E89D;">fwb-button</span><span style="color:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> <</span><span style="color:#85E89D;">fwb-button</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">gradient</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">"red-yellow"</span><span style="color:#E1E4E8;">>Red to yellow</</span><span style="color:#85E89D;">fwb-button</span><span style="color:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"></</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;">></span></span>
|
||
<span class="line"></span>
|
||
<span class="line"><span style="color:#E1E4E8;"><</span><span style="color:#85E89D;">script</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">setup</span><span style="color:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="color:#F97583;">import</span><span style="color:#E1E4E8;"> { FwbButton } </span><span style="color:#F97583;">from</span><span style="color:#E1E4E8;"> </span><span style="color:#9ECBFF;">'flowbite-vue'</span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"></</span><span style="color:#85E89D;">script</span><span style="color:#E1E4E8;">></span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#24292E;"><</span><span style="color:#22863A;">template</span><span style="color:#24292E;">></span></span>
|
||
<span class="line"><span style="color:#24292E;"> <</span><span style="color:#22863A;">fwb-button</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">gradient</span><span style="color:#24292E;">=</span><span style="color:#032F62;">"purple-blue"</span><span style="color:#24292E;">>Purple to blue</</span><span style="color:#22863A;">fwb-button</span><span style="color:#24292E;">></span></span>
|
||
<span class="line"><span style="color:#24292E;"> <</span><span style="color:#22863A;">fwb-button</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">gradient</span><span style="color:#24292E;">=</span><span style="color:#032F62;">"cyan-blue"</span><span style="color:#24292E;">>Cyan to blue</</span><span style="color:#22863A;">fwb-button</span><span style="color:#24292E;">></span></span>
|
||
<span class="line"><span style="color:#24292E;"> <</span><span style="color:#22863A;">fwb-button</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">gradient</span><span style="color:#24292E;">=</span><span style="color:#032F62;">"green-blue"</span><span style="color:#24292E;">>Green to blue</</span><span style="color:#22863A;">fwb-button</span><span style="color:#24292E;">></span></span>
|
||
<span class="line"><span style="color:#24292E;"> <</span><span style="color:#22863A;">fwb-button</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">gradient</span><span style="color:#24292E;">=</span><span style="color:#032F62;">"purple-pink"</span><span style="color:#24292E;">>Purple to pink</</span><span style="color:#22863A;">fwb-button</span><span style="color:#24292E;">></span></span>
|
||
<span class="line"><span style="color:#24292E;"> <</span><span style="color:#22863A;">fwb-button</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">gradient</span><span style="color:#24292E;">=</span><span style="color:#032F62;">"pink-orange"</span><span style="color:#24292E;">>Pink to orange</</span><span style="color:#22863A;">fwb-button</span><span style="color:#24292E;">></span></span>
|
||
<span class="line"><span style="color:#24292E;"> <</span><span style="color:#22863A;">fwb-button</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">gradient</span><span style="color:#24292E;">=</span><span style="color:#032F62;">"teal-lime"</span><span style="color:#24292E;">>Teal to lime</</span><span style="color:#22863A;">fwb-button</span><span style="color:#24292E;">></span></span>
|
||
<span class="line"><span style="color:#24292E;"> <</span><span style="color:#22863A;">fwb-button</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">gradient</span><span style="color:#24292E;">=</span><span style="color:#032F62;">"red-yellow"</span><span style="color:#24292E;">>Red to yellow</</span><span style="color:#22863A;">fwb-button</span><span style="color:#24292E;">></span></span>
|
||
<span class="line"><span style="color:#24292E;"></</span><span style="color:#22863A;">template</span><span style="color:#24292E;">></span></span>
|
||
<span class="line"></span>
|
||
<span class="line"><span style="color:#24292E;"><</span><span style="color:#22863A;">script</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">setup</span><span style="color:#24292E;">></span></span>
|
||
<span class="line"><span style="color:#D73A49;">import</span><span style="color:#24292E;"> { FwbButton } </span><span style="color:#D73A49;">from</span><span style="color:#24292E;"> </span><span style="color:#032F62;">'flowbite-vue'</span></span>
|
||
<span class="line"><span style="color:#24292E;"></</span><span style="color:#22863A;">script</span><span style="color:#24292E;">></span></span></code></pre></div><h2 id="prop-outline" tabindex="-1">Prop - outline <a class="header-anchor" href="#prop-outline" aria-label="Permalink to "Prop - outline""></a></h2><div class="vp-raw flex flex-wrap gap-2"><button class="text-blue-700 border border-blue-700 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-center dark:border-blue-500 dark:text-blue-500 dark:focus:ring-blue-800 hover:text-white hover:bg-blue-800 dark:hover:text-white dark:hover:bg-blue-600 text-sm px-4 py-2" href><!----><span class=""><!----><!--[--> Default <!--]--><!----></span><!----></button><button class="text-gray-900 border border-gray-800 focus:ring-4 focus:outline-none focus:ring-gray-300 font-medium rounded-lg text-center dark:border-gray-600 dark:text-gray-400 dark:focus:ring-gray-800 hover:text-white hover:bg-gray-900 dark:hover:text-white dark:hover:bg-gray-600 text-sm px-4 py-2" href><!----><span class=""><!----><!--[--> Dark <!--]--><!----></span><!----></button><button class="text-green-700 border border-green-700 focus:ring-4 focus:outline-none focus:ring-green-300 font-medium rounded-lg text-center dark:border-green-500 dark:text-green-500 dark:focus:ring-green-800 hover:text-white hover:bg-green-800 dark:hover:text-white dark:hover:bg-green-600 text-sm px-4 py-2" href><!----><span class=""><!----><!--[--> Green <!--]--><!----></span><!----></button><button class="text-red-700 border border-red-700 focus:ring-4 focus:outline-none focus:ring-red-300 font-medium rounded-lg text-center dark:border-red-500 dark:text-red-500 dark:focus:ring-red-900 hover:text-white hover:bg-red-800 dark:hover:text-white dark:hover:bg-red-600 text-sm px-4 py-2" href><!----><span class=""><!----><!--[--> Red <!--]--><!----></span><!----></button><button class="text-yellow-400 border border-yellow-400 focus:ring-4 focus:outline-none focus:ring-yellow-300 font-medium rounded-lg text-center dark:border-yellow-300 dark:text-yellow-300 dark:focus:ring-yellow-900 hover:text-white hover:bg-yellow-500 dark:hover:text-white dark:hover:bg-yellow-400 text-sm px-4 py-2" href><!----><span class=""><!----><!--[--> Yellow <!--]--><!----></span><!----></button><button class="text-purple-700 border border-purple-700 focus:ring-4 focus:outline-none focus:ring-purple-300 font-medium rounded-lg text-center dark:border-purple-400 dark:text-purple-400 dark:focus:ring-purple-900 hover:text-white hover:bg-purple-800 dark:hover:text-white dark:hover:bg-purple-500 text-sm px-4 py-2" href><!----><span class=""><!----><!--[--> Purple <!--]--><!----></span><!----></button></div><div class="language-vue vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki github-dark vp-code-dark"><code><span class="line"><span style="color:#E1E4E8;"><</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> <</span><span style="color:#85E89D;">fwb-button</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">color</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">"default"</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">outline</span><span style="color:#E1E4E8;">>Default</</span><span style="color:#85E89D;">fwb-button</span><span style="color:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> <</span><span style="color:#85E89D;">fwb-button</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">color</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">"dark"</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">outline</span><span style="color:#E1E4E8;">>Dark</</span><span style="color:#85E89D;">fwb-button</span><span style="color:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> <</span><span style="color:#85E89D;">fwb-button</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">color</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">"green"</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">outline</span><span style="color:#E1E4E8;">>Green</</span><span style="color:#85E89D;">fwb-button</span><span style="color:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> <</span><span style="color:#85E89D;">fwb-button</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">color</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">"red"</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">outline</span><span style="color:#E1E4E8;">>Red</</span><span style="color:#85E89D;">fwb-button</span><span style="color:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> <</span><span style="color:#85E89D;">fwb-button</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">color</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">"yellow"</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">outline</span><span style="color:#E1E4E8;">>Yellow</</span><span style="color:#85E89D;">fwb-button</span><span style="color:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> <</span><span style="color:#85E89D;">fwb-button</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">color</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">"purple"</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">outline</span><span style="color:#E1E4E8;">>Purple</</span><span style="color:#85E89D;">fwb-button</span><span style="color:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"></</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;">></span></span>
|
||
<span class="line"></span>
|
||
<span class="line"><span style="color:#E1E4E8;"><</span><span style="color:#85E89D;">script</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">setup</span><span style="color:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="color:#F97583;">import</span><span style="color:#E1E4E8;"> { FwbButton } </span><span style="color:#F97583;">from</span><span style="color:#E1E4E8;"> </span><span style="color:#9ECBFF;">'flowbite-vue'</span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"></</span><span style="color:#85E89D;">script</span><span style="color:#E1E4E8;">></span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#24292E;"><</span><span style="color:#22863A;">template</span><span style="color:#24292E;">></span></span>
|
||
<span class="line"><span style="color:#24292E;"> <</span><span style="color:#22863A;">fwb-button</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">color</span><span style="color:#24292E;">=</span><span style="color:#032F62;">"default"</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">outline</span><span style="color:#24292E;">>Default</</span><span style="color:#22863A;">fwb-button</span><span style="color:#24292E;">></span></span>
|
||
<span class="line"><span style="color:#24292E;"> <</span><span style="color:#22863A;">fwb-button</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">color</span><span style="color:#24292E;">=</span><span style="color:#032F62;">"dark"</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">outline</span><span style="color:#24292E;">>Dark</</span><span style="color:#22863A;">fwb-button</span><span style="color:#24292E;">></span></span>
|
||
<span class="line"><span style="color:#24292E;"> <</span><span style="color:#22863A;">fwb-button</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">color</span><span style="color:#24292E;">=</span><span style="color:#032F62;">"green"</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">outline</span><span style="color:#24292E;">>Green</</span><span style="color:#22863A;">fwb-button</span><span style="color:#24292E;">></span></span>
|
||
<span class="line"><span style="color:#24292E;"> <</span><span style="color:#22863A;">fwb-button</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">color</span><span style="color:#24292E;">=</span><span style="color:#032F62;">"red"</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">outline</span><span style="color:#24292E;">>Red</</span><span style="color:#22863A;">fwb-button</span><span style="color:#24292E;">></span></span>
|
||
<span class="line"><span style="color:#24292E;"> <</span><span style="color:#22863A;">fwb-button</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">color</span><span style="color:#24292E;">=</span><span style="color:#032F62;">"yellow"</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">outline</span><span style="color:#24292E;">>Yellow</</span><span style="color:#22863A;">fwb-button</span><span style="color:#24292E;">></span></span>
|
||
<span class="line"><span style="color:#24292E;"> <</span><span style="color:#22863A;">fwb-button</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">color</span><span style="color:#24292E;">=</span><span style="color:#032F62;">"purple"</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">outline</span><span style="color:#24292E;">>Purple</</span><span style="color:#22863A;">fwb-button</span><span style="color:#24292E;">></span></span>
|
||
<span class="line"><span style="color:#24292E;"></</span><span style="color:#22863A;">template</span><span style="color:#24292E;">></span></span>
|
||
<span class="line"></span>
|
||
<span class="line"><span style="color:#24292E;"><</span><span style="color:#22863A;">script</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">setup</span><span style="color:#24292E;">></span></span>
|
||
<span class="line"><span style="color:#D73A49;">import</span><span style="color:#24292E;"> { FwbButton } </span><span style="color:#D73A49;">from</span><span style="color:#24292E;"> </span><span style="color:#032F62;">'flowbite-vue'</span></span>
|
||
<span class="line"><span style="color:#24292E;"></</span><span style="color:#22863A;">script</span><span style="color:#24292E;">></span></span></code></pre></div><h2 id="prop-outline-gradient" tabindex="-1">Prop - outline (gradient) <a class="header-anchor" href="#prop-outline-gradient" aria-label="Permalink to "Prop - outline (gradient)""></a></h2><div class="vp-raw flex flex-wrap gap-2"><button class="relative inline-flex items-center justify-center overflow-hidden font-medium text-gray-900 rounded-lg group bg-gradient-to-br from-purple-600 to-blue-500 dark:text-white focus:ring-4 focus:outline-none focus:ring-blue-300 dark:focus:ring-blue-800 group-hover:from-purple-600 group-hover:to-blue-500 hover:text-white p-0.5" href><!----><span class="relative bg-white dark:bg-gray-900 rounded-md inline-flex items-center text-sm px-4 py-2 group-hover:bg-opacity-0 transition-all ease-in duration-75"><!----><!--[--> Purple to blue <!--]--><!----></span><!----></button><button class="relative inline-flex items-center justify-center overflow-hidden font-medium text-gray-900 rounded-lg group bg-gradient-to-br from-cyan-500 to-blue-500 dark:text-white focus:ring-4 focus:outline-none focus:ring-cyan-200 dark:focus:ring-cyan-800 group-hover:from-cyan-500 group-hover:to-blue-500 hover:text-white p-0.5" href><!----><span class="relative bg-white dark:bg-gray-900 rounded-md inline-flex items-center text-sm px-4 py-2 group-hover:bg-opacity-0 transition-all ease-in duration-75"><!----><!--[--> Cyan to blue <!--]--><!----></span><!----></button><button class="relative inline-flex items-center justify-center overflow-hidden font-medium text-gray-900 rounded-lg group bg-gradient-to-br from-green-400 to-blue-600 dark:text-white focus:ring-4 focus:outline-none focus:ring-green-200 dark:focus:ring-green-800 group-hover:from-green-400 group-hover:to-blue-600 hover:text-white p-0.5" href><!----><span class="relative bg-white dark:bg-gray-900 rounded-md inline-flex items-center text-sm px-4 py-2 group-hover:bg-opacity-0 transition-all ease-in duration-75"><!----><!--[--> Green to blue <!--]--><!----></span><!----></button><button class="relative inline-flex items-center justify-center overflow-hidden font-medium text-gray-900 rounded-lg group bg-gradient-to-br from-purple-500 to-pink-500 dark:text-white focus:ring-4 focus:outline-none focus:ring-purple-200 dark:focus:ring-purple-800 group-hover:from-purple-500 group-hover:to-pink-500 hover:text-white p-0.5" href><!----><span class="relative bg-white dark:bg-gray-900 rounded-md inline-flex items-center text-sm px-4 py-2 group-hover:bg-opacity-0 transition-all ease-in duration-75"><!----><!--[--> Purple to pink <!--]--><!----></span><!----></button><button class="relative inline-flex items-center justify-center overflow-hidden font-medium text-gray-900 rounded-lg group bg-gradient-to-br from-pink-500 to-orange-400 dark:text-white focus:ring-4 focus:outline-none focus:ring-pink-200 dark:focus:ring-pink-800 group-hover:from-pink-500 group-hover:to-orange-400 hover:text-white p-0.5" href><!----><span class="relative bg-white dark:bg-gray-900 rounded-md inline-flex items-center text-sm px-4 py-2 group-hover:bg-opacity-0 transition-all ease-in duration-75"><!----><!--[--> Pink to orange <!--]--><!----></span><!----></button><button class="relative inline-flex items-center justify-center overflow-hidden font-medium text-gray-900 rounded-lg group bg-gradient-to-br from-teal-300 to-lime-300 dark:text-white focus:ring-4 focus:outline-none focus:ring-lime-200 dark:focus:ring-lime-800 group-hover:from-teal-300 group-hover:to-lime-300 dark:hover:text-gray-900 p-0.5" href><!----><span class="relative bg-white dark:bg-gray-900 rounded-md inline-flex items-center text-sm px-4 py-2 group-hover:bg-opacity-0 transition-all ease-in duration-75"><!----><!--[--> Teal to lime <!--]--><!----></span><!----></button><button class="relative inline-flex items-center justify-center overflow-hidden font-medium text-gray-900 rounded-lg group bg-gradient-to-br from-red-200 via-red-300 to-yellow-200 dark:text-white focus:ring-4 focus:outline-none focus:ring-red-100 dark:focus:ring-red-400 group-hover:from-red-200 group-hover:via-red-300 group-hover:to-yellow-200 dark:hover:text-gray-900 p-0.5" href><!----><span class="relative bg-white dark:bg-gray-900 rounded-md inline-flex items-center text-sm px-4 py-2 group-hover:bg-opacity-0 transition-all ease-in duration-75"><!----><!--[--> Red to yellow <!--]--><!----></span><!----></button></div><div class="language-vue vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki github-dark vp-code-dark"><code><span class="line"><span style="color:#E1E4E8;"><</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> <</span><span style="color:#85E89D;">fwb-button</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">gradient</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">"purple-blue"</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">outline</span><span style="color:#E1E4E8;">>Purple to blue</</span><span style="color:#85E89D;">fwb-button</span><span style="color:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> <</span><span style="color:#85E89D;">fwb-button</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">gradient</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">"cyan-blue"</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">outline</span><span style="color:#E1E4E8;">>Cyan to blue</</span><span style="color:#85E89D;">fwb-button</span><span style="color:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> <</span><span style="color:#85E89D;">fwb-button</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">gradient</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">"green-blue"</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">outline</span><span style="color:#E1E4E8;">>Green to blue</</span><span style="color:#85E89D;">fwb-button</span><span style="color:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> <</span><span style="color:#85E89D;">fwb-button</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">gradient</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">"purple-pink"</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">outline</span><span style="color:#E1E4E8;">>Purple to pink</</span><span style="color:#85E89D;">fwb-button</span><span style="color:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> <</span><span style="color:#85E89D;">fwb-button</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">gradient</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">"pink-orange"</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">outline</span><span style="color:#E1E4E8;">>Pink to orange</</span><span style="color:#85E89D;">fwb-button</span><span style="color:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> <</span><span style="color:#85E89D;">fwb-button</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">gradient</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">"teal-lime"</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">outline</span><span style="color:#E1E4E8;">>Teal to lime</</span><span style="color:#85E89D;">fwb-button</span><span style="color:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> <</span><span style="color:#85E89D;">fwb-button</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">gradient</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">"red-yellow"</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">outline</span><span style="color:#E1E4E8;">>Red to yellow</</span><span style="color:#85E89D;">fwb-button</span><span style="color:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"></</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;">></span></span>
|
||
<span class="line"></span>
|
||
<span class="line"><span style="color:#E1E4E8;"><</span><span style="color:#85E89D;">script</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">setup</span><span style="color:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="color:#F97583;">import</span><span style="color:#E1E4E8;"> { FwbButton } </span><span style="color:#F97583;">from</span><span style="color:#E1E4E8;"> </span><span style="color:#9ECBFF;">'flowbite-vue'</span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"></</span><span style="color:#85E89D;">script</span><span style="color:#E1E4E8;">></span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#24292E;"><</span><span style="color:#22863A;">template</span><span style="color:#24292E;">></span></span>
|
||
<span class="line"><span style="color:#24292E;"> <</span><span style="color:#22863A;">fwb-button</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">gradient</span><span style="color:#24292E;">=</span><span style="color:#032F62;">"purple-blue"</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">outline</span><span style="color:#24292E;">>Purple to blue</</span><span style="color:#22863A;">fwb-button</span><span style="color:#24292E;">></span></span>
|
||
<span class="line"><span style="color:#24292E;"> <</span><span style="color:#22863A;">fwb-button</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">gradient</span><span style="color:#24292E;">=</span><span style="color:#032F62;">"cyan-blue"</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">outline</span><span style="color:#24292E;">>Cyan to blue</</span><span style="color:#22863A;">fwb-button</span><span style="color:#24292E;">></span></span>
|
||
<span class="line"><span style="color:#24292E;"> <</span><span style="color:#22863A;">fwb-button</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">gradient</span><span style="color:#24292E;">=</span><span style="color:#032F62;">"green-blue"</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">outline</span><span style="color:#24292E;">>Green to blue</</span><span style="color:#22863A;">fwb-button</span><span style="color:#24292E;">></span></span>
|
||
<span class="line"><span style="color:#24292E;"> <</span><span style="color:#22863A;">fwb-button</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">gradient</span><span style="color:#24292E;">=</span><span style="color:#032F62;">"purple-pink"</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">outline</span><span style="color:#24292E;">>Purple to pink</</span><span style="color:#22863A;">fwb-button</span><span style="color:#24292E;">></span></span>
|
||
<span class="line"><span style="color:#24292E;"> <</span><span style="color:#22863A;">fwb-button</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">gradient</span><span style="color:#24292E;">=</span><span style="color:#032F62;">"pink-orange"</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">outline</span><span style="color:#24292E;">>Pink to orange</</span><span style="color:#22863A;">fwb-button</span><span style="color:#24292E;">></span></span>
|
||
<span class="line"><span style="color:#24292E;"> <</span><span style="color:#22863A;">fwb-button</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">gradient</span><span style="color:#24292E;">=</span><span style="color:#032F62;">"teal-lime"</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">outline</span><span style="color:#24292E;">>Teal to lime</</span><span style="color:#22863A;">fwb-button</span><span style="color:#24292E;">></span></span>
|
||
<span class="line"><span style="color:#24292E;"> <</span><span style="color:#22863A;">fwb-button</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">gradient</span><span style="color:#24292E;">=</span><span style="color:#032F62;">"red-yellow"</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">outline</span><span style="color:#24292E;">>Red to yellow</</span><span style="color:#22863A;">fwb-button</span><span style="color:#24292E;">></span></span>
|
||
<span class="line"><span style="color:#24292E;"></</span><span style="color:#22863A;">template</span><span style="color:#24292E;">></span></span>
|
||
<span class="line"></span>
|
||
<span class="line"><span style="color:#24292E;"><</span><span style="color:#22863A;">script</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">setup</span><span style="color:#24292E;">></span></span>
|
||
<span class="line"><span style="color:#D73A49;">import</span><span style="color:#24292E;"> { FwbButton } </span><span style="color:#D73A49;">from</span><span style="color:#24292E;"> </span><span style="color:#032F62;">'flowbite-vue'</span></span>
|
||
<span class="line"><span style="color:#24292E;"></</span><span style="color:#22863A;">script</span><span style="color:#24292E;">></span></span></code></pre></div><h2 id="prop-shadow" tabindex="-1">Prop - shadow <a class="header-anchor" href="#prop-shadow" aria-label="Permalink to "Prop - shadow""></a></h2><div class="vp-raw flex flex-wrap gap-2"><button class="text-white bg-gradient-to-r from-blue-500 via-blue-600 to-blue-700 focus:ring-4 focus:outline-none focus:ring-blue-300 dark:focus:ring-blue-800 rounded-lg hover:bg-gradient-to-br shadow-lg shadow-blue-500/50 dark:shadow-lg dark:shadow-blue-800/80 text-sm px-4 py-2" href><!----><span class=""><!----><!--[--> Blue with blue <!--]--><!----></span><!----></button><button class="text-white bg-gradient-to-r from-cyan-500 via-cyan-600 to-cyan-700 focus:ring-4 focus:outline-none focus:ring-cyan-300 dark:focus:ring-cyan-800 rounded-lg hover:bg-gradient-to-br shadow-lg shadow-cyan-500/50 dark:shadow-lg dark:shadow-cyan-800/80 text-sm px-4 py-2" href><!----><span class=""><!----><!--[--> Cyan with cyan <!--]--><!----></span><!----></button><button class="text-white bg-gradient-to-r from-green-500 via-green-600 to-green-700 focus:ring-4 focus:outline-none focus:ring-green-300 dark:focus:ring-green-800 rounded-lg hover:bg-gradient-to-br shadow-lg shadow-green-500/50 dark:shadow-lg dark:shadow-green-800/80 text-sm px-4 py-2" href><!----><span class=""><!----><!--[--> Green with green <!--]--><!----></span><!----></button><button class="text-gray-900 bg-gradient-to-r from-lime-500 via-lime-600 to-lime-700 focus:ring-4 focus:outline-none focus:ring-lime-300 dark:focus:ring-lime-800 rounded-lg hover:bg-gradient-to-br shadow-lg shadow-lime-500/50 dark:shadow-lg dark:shadow-lime-800/80 text-sm px-4 py-2" href><!----><span class=""><!----><!--[--> Lime with lime <!--]--><!----></span><!----></button><button class="text-white bg-gradient-to-r from-pink-500 via-pink-600 to-pink-700 focus:ring-4 focus:outline-none focus:ring-pink-300 dark:focus:ring-pink-800 rounded-lg hover:bg-gradient-to-br shadow-lg shadow-pink-500/50 dark:shadow-lg dark:shadow-pink-800/80 text-sm px-4 py-2" href><!----><span class=""><!----><!--[--> Pink with pink <!--]--><!----></span><!----></button><button class="text-white bg-gradient-to-r from-purple-500 via-purple-600 to-purple-700 focus:ring-4 focus:outline-none focus:ring-purple-300 dark:focus:ring-purple-800 rounded-lg hover:bg-gradient-to-br shadow-lg shadow-purple-500/50 dark:shadow-lg dark:shadow-purple-800/80 text-sm px-4 py-2" href><!----><span class=""><!----><!--[--> Purple with purple <!--]--><!----></span><!----></button><button class="text-white bg-gradient-to-r from-red-500 via-red-600 to-red-700 focus:ring-4 focus:outline-none focus:ring-red-300 dark:focus:ring-red-800 rounded-lg hover:bg-gradient-to-br shadow-lg shadow-red-500/50 dark:shadow-lg dark:shadow-red-800/80 text-sm px-4 py-2" href><!----><span class=""><!----><!--[--> Red with red <!--]--><!----></span><!----></button><button class="text-white bg-gradient-to-r from-teal-500 via-teal-600 to-teal-700 focus:ring-4 focus:outline-none focus:ring-teal-300 dark:focus:ring-teal-800 rounded-lg hover:bg-gradient-to-br shadow-lg shadow-teal-500/50 dark:shadow-lg dark:shadow-teal-800/80 text-sm px-4 py-2" href><!----><span class=""><!----><!--[--> Teal with teal <!--]--><!----></span><!----></button><button class="text-white bg-gradient-to-r from-blue-500 via-blue-600 to-blue-700 focus:ring-4 focus:outline-none focus:ring-blue-300 dark:focus:ring-blue-800 rounded-lg hover:bg-gradient-to-br shadow-lg shadow-red-500/50 dark:shadow-lg dark:shadow-red-800/80 text-sm px-4 py-2" href><!----><span class=""><!----><!--[--> Blue with red <!--]--><!----></span><!----></button><button class="text-white bg-gradient-to-r from-cyan-500 via-cyan-600 to-cyan-700 focus:ring-4 focus:outline-none focus:ring-cyan-300 dark:focus:ring-cyan-800 rounded-lg hover:bg-gradient-to-br shadow-lg shadow-teal-500/50 dark:shadow-lg dark:shadow-teal-800/80 text-sm px-4 py-2" href><!----><span class=""><!----><!--[--> Cyan with teal <!--]--><!----></span><!----></button><button class="text-white bg-gradient-to-r from-teal-500 via-teal-600 to-teal-700 focus:ring-4 focus:outline-none focus:ring-teal-300 dark:focus:ring-teal-800 rounded-lg hover:bg-gradient-to-br shadow-lg shadow-purple-500/50 dark:shadow-lg dark:shadow-purple-800/80 text-sm px-4 py-2" href><!----><span class=""><!----><!--[--> Teal with purple <!--]--><!----></span><!----></button></div><div class="language-vue vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki github-dark vp-code-dark"><code><span class="line"><span style="color:#E1E4E8;"><</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> <</span><span style="color:#85E89D;">fwb-button</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">gradient</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">"blue"</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">shadow</span><span style="color:#E1E4E8;">>Blue with blue</</span><span style="color:#85E89D;">fwb-button</span><span style="color:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> <</span><span style="color:#85E89D;">fwb-button</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">gradient</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">"cyan"</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">shadow</span><span style="color:#E1E4E8;">>Cyan with cyan</</span><span style="color:#85E89D;">fwb-button</span><span style="color:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> <</span><span style="color:#85E89D;">fwb-button</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">gradient</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">"green"</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">shadow</span><span style="color:#E1E4E8;">>Green with green</</span><span style="color:#85E89D;">fwb-button</span><span style="color:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> <</span><span style="color:#85E89D;">fwb-button</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">gradient</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">"lime"</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">shadow</span><span style="color:#E1E4E8;">>Lime with lime</</span><span style="color:#85E89D;">fwb-button</span><span style="color:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> <</span><span style="color:#85E89D;">fwb-button</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">gradient</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">"pink"</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">shadow</span><span style="color:#E1E4E8;">>Pink with pink</</span><span style="color:#85E89D;">fwb-button</span><span style="color:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> <</span><span style="color:#85E89D;">fwb-button</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">gradient</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">"purple"</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">shadow</span><span style="color:#E1E4E8;">>Purple with purple</</span><span style="color:#85E89D;">fwb-button</span><span style="color:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> <</span><span style="color:#85E89D;">fwb-button</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">gradient</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">"red"</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">shadow</span><span style="color:#E1E4E8;">>Red with red</</span><span style="color:#85E89D;">fwb-button</span><span style="color:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> <</span><span style="color:#85E89D;">fwb-button</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">gradient</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">"teal"</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">shadow</span><span style="color:#E1E4E8;">>Teal with teal</</span><span style="color:#85E89D;">fwb-button</span><span style="color:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> <</span><span style="color:#85E89D;">fwb-button</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">gradient</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">"blue"</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">shadow</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">"red"</span><span style="color:#E1E4E8;">>Blue with red</</span><span style="color:#85E89D;">fwb-button</span><span style="color:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> <</span><span style="color:#85E89D;">fwb-button</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">gradient</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">"cyan"</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">shadow</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">"teal"</span><span style="color:#E1E4E8;">>Cyan with teal</</span><span style="color:#85E89D;">fwb-button</span><span style="color:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> <</span><span style="color:#85E89D;">fwb-button</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">gradient</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">"teal"</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">shadow</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">"purple"</span><span style="color:#E1E4E8;">>Teal with purple</</span><span style="color:#85E89D;">fwb-button</span><span style="color:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"></</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;">></span></span>
|
||
<span class="line"></span>
|
||
<span class="line"><span style="color:#E1E4E8;"><</span><span style="color:#85E89D;">script</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">setup</span><span style="color:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="color:#F97583;">import</span><span style="color:#E1E4E8;"> { FwbButton } </span><span style="color:#F97583;">from</span><span style="color:#E1E4E8;"> </span><span style="color:#9ECBFF;">'flowbite-vue'</span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"></</span><span style="color:#85E89D;">script</span><span style="color:#E1E4E8;">></span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#24292E;"><</span><span style="color:#22863A;">template</span><span style="color:#24292E;">></span></span>
|
||
<span class="line"><span style="color:#24292E;"> <</span><span style="color:#22863A;">fwb-button</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">gradient</span><span style="color:#24292E;">=</span><span style="color:#032F62;">"blue"</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">shadow</span><span style="color:#24292E;">>Blue with blue</</span><span style="color:#22863A;">fwb-button</span><span style="color:#24292E;">></span></span>
|
||
<span class="line"><span style="color:#24292E;"> <</span><span style="color:#22863A;">fwb-button</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">gradient</span><span style="color:#24292E;">=</span><span style="color:#032F62;">"cyan"</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">shadow</span><span style="color:#24292E;">>Cyan with cyan</</span><span style="color:#22863A;">fwb-button</span><span style="color:#24292E;">></span></span>
|
||
<span class="line"><span style="color:#24292E;"> <</span><span style="color:#22863A;">fwb-button</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">gradient</span><span style="color:#24292E;">=</span><span style="color:#032F62;">"green"</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">shadow</span><span style="color:#24292E;">>Green with green</</span><span style="color:#22863A;">fwb-button</span><span style="color:#24292E;">></span></span>
|
||
<span class="line"><span style="color:#24292E;"> <</span><span style="color:#22863A;">fwb-button</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">gradient</span><span style="color:#24292E;">=</span><span style="color:#032F62;">"lime"</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">shadow</span><span style="color:#24292E;">>Lime with lime</</span><span style="color:#22863A;">fwb-button</span><span style="color:#24292E;">></span></span>
|
||
<span class="line"><span style="color:#24292E;"> <</span><span style="color:#22863A;">fwb-button</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">gradient</span><span style="color:#24292E;">=</span><span style="color:#032F62;">"pink"</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">shadow</span><span style="color:#24292E;">>Pink with pink</</span><span style="color:#22863A;">fwb-button</span><span style="color:#24292E;">></span></span>
|
||
<span class="line"><span style="color:#24292E;"> <</span><span style="color:#22863A;">fwb-button</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">gradient</span><span style="color:#24292E;">=</span><span style="color:#032F62;">"purple"</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">shadow</span><span style="color:#24292E;">>Purple with purple</</span><span style="color:#22863A;">fwb-button</span><span style="color:#24292E;">></span></span>
|
||
<span class="line"><span style="color:#24292E;"> <</span><span style="color:#22863A;">fwb-button</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">gradient</span><span style="color:#24292E;">=</span><span style="color:#032F62;">"red"</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">shadow</span><span style="color:#24292E;">>Red with red</</span><span style="color:#22863A;">fwb-button</span><span style="color:#24292E;">></span></span>
|
||
<span class="line"><span style="color:#24292E;"> <</span><span style="color:#22863A;">fwb-button</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">gradient</span><span style="color:#24292E;">=</span><span style="color:#032F62;">"teal"</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">shadow</span><span style="color:#24292E;">>Teal with teal</</span><span style="color:#22863A;">fwb-button</span><span style="color:#24292E;">></span></span>
|
||
<span class="line"><span style="color:#24292E;"> <</span><span style="color:#22863A;">fwb-button</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">gradient</span><span style="color:#24292E;">=</span><span style="color:#032F62;">"blue"</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">shadow</span><span style="color:#24292E;">=</span><span style="color:#032F62;">"red"</span><span style="color:#24292E;">>Blue with red</</span><span style="color:#22863A;">fwb-button</span><span style="color:#24292E;">></span></span>
|
||
<span class="line"><span style="color:#24292E;"> <</span><span style="color:#22863A;">fwb-button</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">gradient</span><span style="color:#24292E;">=</span><span style="color:#032F62;">"cyan"</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">shadow</span><span style="color:#24292E;">=</span><span style="color:#032F62;">"teal"</span><span style="color:#24292E;">>Cyan with teal</</span><span style="color:#22863A;">fwb-button</span><span style="color:#24292E;">></span></span>
|
||
<span class="line"><span style="color:#24292E;"> <</span><span style="color:#22863A;">fwb-button</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">gradient</span><span style="color:#24292E;">=</span><span style="color:#032F62;">"teal"</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">shadow</span><span style="color:#24292E;">=</span><span style="color:#032F62;">"purple"</span><span style="color:#24292E;">>Teal with purple</</span><span style="color:#22863A;">fwb-button</span><span style="color:#24292E;">></span></span>
|
||
<span class="line"><span style="color:#24292E;"></</span><span style="color:#22863A;">template</span><span style="color:#24292E;">></span></span>
|
||
<span class="line"></span>
|
||
<span class="line"><span style="color:#24292E;"><</span><span style="color:#22863A;">script</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">setup</span><span style="color:#24292E;">></span></span>
|
||
<span class="line"><span style="color:#D73A49;">import</span><span style="color:#24292E;"> { FwbButton } </span><span style="color:#D73A49;">from</span><span style="color:#24292E;"> </span><span style="color:#032F62;">'flowbite-vue'</span></span>
|
||
<span class="line"><span style="color:#24292E;"></</span><span style="color:#22863A;">script</span><span style="color:#24292E;">></span></span></code></pre></div><h2 id="prop-square" tabindex="-1">Prop - square <a class="header-anchor" href="#prop-square" aria-label="Permalink to "Prop - square""></a></h2><div class="vp-raw flex flex-wrap gap-2"><button class="text-gray-900 bg-gradient-to-r from-red-200 via-red-300 to-yellow-200 focus:ring-4 focus:outline-none focus:ring-red-100 dark:focus:ring-red-400 font-medium rounded-lg hover:bg-gradient-to-bl text-sm p-2" href><!----><span class=""><!----><!--[--><svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path clip-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" fill-rule="evenodd"></path></svg><!--]--><!----></span><!----></button><button class="text-white bg-blue-700 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg dark:bg-blue-600 focus:outline-none dark:focus:ring-blue-800 hover:bg-blue-800 dark:hover:bg-blue-700 !rounded-full text-sm p-2" href><!----><span class=""><!----><!--[--><svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path clip-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" fill-rule="evenodd"></path></svg><!--]--><!----></span><!----></button><button class="text-gray-900 border border-gray-800 focus:ring-4 focus:outline-none focus:ring-gray-300 font-medium rounded-lg text-center dark:border-gray-600 dark:text-gray-400 dark:focus:ring-gray-800 hover:text-white hover:bg-gray-900 dark:hover:text-white dark:hover:bg-gray-600 text-sm p-2" href><!----><span class=""><!----><!--[--><svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path clip-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" fill-rule="evenodd"></path></svg><!--]--><!----></span><!----></button><button class="text-yellow-400 border border-yellow-400 focus:ring-4 focus:outline-none focus:ring-yellow-300 font-medium rounded-lg text-center dark:border-yellow-300 dark:text-yellow-300 dark:focus:ring-yellow-900 hover:text-white hover:bg-yellow-500 dark:hover:text-white dark:hover:bg-yellow-400 !rounded-full text-sm p-2" href><!----><span class=""><!----><!--[--><svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg><!--]--><!----></span><!----></button></div><div class="language-vue vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki github-dark vp-code-dark"><code><span class="line"><span style="color:#E1E4E8;"><</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> <</span><span style="color:#85E89D;">fwb-button</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">gradient</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">"red-yellow"</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">square</span><span style="color:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> <</span><span style="color:#85E89D;">svg</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">class</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">"w-5 h-5"</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">fill</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">"currentColor"</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">viewBox</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">"0 0 20 20"</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">xmlns</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">"http://www.w3.org/2000/svg"</span><span style="color:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> <</span><span style="color:#85E89D;">path</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">clip-rule</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">"evenodd"</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">d</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">"M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z"</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">fill-rule</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">"evenodd"</span><span style="color:#E1E4E8;"> /></span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> </</span><span style="color:#85E89D;">svg</span><span style="color:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> </</span><span style="color:#85E89D;">fwb-button</span><span style="color:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> <</span><span style="color:#85E89D;">fwb-button</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">color</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">"default"</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">pill</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">square</span><span style="color:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> <</span><span style="color:#85E89D;">svg</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">class</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">"w-5 h-5"</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">fill</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">"currentColor"</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">viewBox</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">"0 0 20 20"</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">xmlns</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">"http://www.w3.org/2000/svg"</span><span style="color:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> <</span><span style="color:#85E89D;">path</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">clip-rule</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">"evenodd"</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">d</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">"M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z"</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">fill-rule</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">"evenodd"</span><span style="color:#E1E4E8;"> /></span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> </</span><span style="color:#85E89D;">svg</span><span style="color:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> </</span><span style="color:#85E89D;">fwb-button</span><span style="color:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> <</span><span style="color:#85E89D;">fwb-button</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">color</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">"dark"</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">outline</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">square</span><span style="color:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> <</span><span style="color:#85E89D;">svg</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">class</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">"w-5 h-5"</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">fill</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">"currentColor"</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">viewBox</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">"0 0 20 20"</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">xmlns</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">"http://www.w3.org/2000/svg"</span><span style="color:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> <</span><span style="color:#85E89D;">path</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">clip-rule</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">"evenodd"</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">d</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">"M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z"</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">fill-rule</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">"evenodd"</span><span style="color:#E1E4E8;"> /></span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> </</span><span style="color:#85E89D;">svg</span><span style="color:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> </</span><span style="color:#85E89D;">fwb-button</span><span style="color:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> <</span><span style="color:#85E89D;">fwb-button</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">color</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">"yellow"</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">outline</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">pill</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">square</span><span style="color:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> <</span><span style="color:#85E89D;">svg</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">class</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">"w-5 h-5"</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">fill</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">"currentColor"</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">viewBox</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">"0 0 20 20"</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">xmlns</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">"http://www.w3.org/2000/svg"</span><span style="color:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> <</span><span style="color:#85E89D;">path</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">fill-rule</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">"evenodd"</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">d</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">"M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z"</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">clip-rule</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">"evenodd"</span><span style="color:#E1E4E8;"> /></span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> </</span><span style="color:#85E89D;">svg</span><span style="color:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> </</span><span style="color:#85E89D;">fwb-button</span><span style="color:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"></</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;">></span></span>
|
||
<span class="line"></span>
|
||
<span class="line"><span style="color:#E1E4E8;"><</span><span style="color:#85E89D;">script</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">setup</span><span style="color:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="color:#F97583;">import</span><span style="color:#E1E4E8;"> { FwbButton } </span><span style="color:#F97583;">from</span><span style="color:#E1E4E8;"> </span><span style="color:#9ECBFF;">'flowbite-vue'</span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"></</span><span style="color:#85E89D;">script</span><span style="color:#E1E4E8;">></span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#24292E;"><</span><span style="color:#22863A;">template</span><span style="color:#24292E;">></span></span>
|
||
<span class="line"><span style="color:#24292E;"> <</span><span style="color:#22863A;">fwb-button</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">gradient</span><span style="color:#24292E;">=</span><span style="color:#032F62;">"red-yellow"</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">square</span><span style="color:#24292E;">></span></span>
|
||
<span class="line"><span style="color:#24292E;"> <</span><span style="color:#22863A;">svg</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">class</span><span style="color:#24292E;">=</span><span style="color:#032F62;">"w-5 h-5"</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">fill</span><span style="color:#24292E;">=</span><span style="color:#032F62;">"currentColor"</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">viewBox</span><span style="color:#24292E;">=</span><span style="color:#032F62;">"0 0 20 20"</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">xmlns</span><span style="color:#24292E;">=</span><span style="color:#032F62;">"http://www.w3.org/2000/svg"</span><span style="color:#24292E;">></span></span>
|
||
<span class="line"><span style="color:#24292E;"> <</span><span style="color:#22863A;">path</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">clip-rule</span><span style="color:#24292E;">=</span><span style="color:#032F62;">"evenodd"</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">d</span><span style="color:#24292E;">=</span><span style="color:#032F62;">"M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z"</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">fill-rule</span><span style="color:#24292E;">=</span><span style="color:#032F62;">"evenodd"</span><span style="color:#24292E;"> /></span></span>
|
||
<span class="line"><span style="color:#24292E;"> </</span><span style="color:#22863A;">svg</span><span style="color:#24292E;">></span></span>
|
||
<span class="line"><span style="color:#24292E;"> </</span><span style="color:#22863A;">fwb-button</span><span style="color:#24292E;">></span></span>
|
||
<span class="line"><span style="color:#24292E;"> <</span><span style="color:#22863A;">fwb-button</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">color</span><span style="color:#24292E;">=</span><span style="color:#032F62;">"default"</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">pill</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">square</span><span style="color:#24292E;">></span></span>
|
||
<span class="line"><span style="color:#24292E;"> <</span><span style="color:#22863A;">svg</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">class</span><span style="color:#24292E;">=</span><span style="color:#032F62;">"w-5 h-5"</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">fill</span><span style="color:#24292E;">=</span><span style="color:#032F62;">"currentColor"</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">viewBox</span><span style="color:#24292E;">=</span><span style="color:#032F62;">"0 0 20 20"</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">xmlns</span><span style="color:#24292E;">=</span><span style="color:#032F62;">"http://www.w3.org/2000/svg"</span><span style="color:#24292E;">></span></span>
|
||
<span class="line"><span style="color:#24292E;"> <</span><span style="color:#22863A;">path</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">clip-rule</span><span style="color:#24292E;">=</span><span style="color:#032F62;">"evenodd"</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">d</span><span style="color:#24292E;">=</span><span style="color:#032F62;">"M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z"</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">fill-rule</span><span style="color:#24292E;">=</span><span style="color:#032F62;">"evenodd"</span><span style="color:#24292E;"> /></span></span>
|
||
<span class="line"><span style="color:#24292E;"> </</span><span style="color:#22863A;">svg</span><span style="color:#24292E;">></span></span>
|
||
<span class="line"><span style="color:#24292E;"> </</span><span style="color:#22863A;">fwb-button</span><span style="color:#24292E;">></span></span>
|
||
<span class="line"><span style="color:#24292E;"> <</span><span style="color:#22863A;">fwb-button</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">color</span><span style="color:#24292E;">=</span><span style="color:#032F62;">"dark"</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">outline</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">square</span><span style="color:#24292E;">></span></span>
|
||
<span class="line"><span style="color:#24292E;"> <</span><span style="color:#22863A;">svg</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">class</span><span style="color:#24292E;">=</span><span style="color:#032F62;">"w-5 h-5"</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">fill</span><span style="color:#24292E;">=</span><span style="color:#032F62;">"currentColor"</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">viewBox</span><span style="color:#24292E;">=</span><span style="color:#032F62;">"0 0 20 20"</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">xmlns</span><span style="color:#24292E;">=</span><span style="color:#032F62;">"http://www.w3.org/2000/svg"</span><span style="color:#24292E;">></span></span>
|
||
<span class="line"><span style="color:#24292E;"> <</span><span style="color:#22863A;">path</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">clip-rule</span><span style="color:#24292E;">=</span><span style="color:#032F62;">"evenodd"</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">d</span><span style="color:#24292E;">=</span><span style="color:#032F62;">"M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z"</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">fill-rule</span><span style="color:#24292E;">=</span><span style="color:#032F62;">"evenodd"</span><span style="color:#24292E;"> /></span></span>
|
||
<span class="line"><span style="color:#24292E;"> </</span><span style="color:#22863A;">svg</span><span style="color:#24292E;">></span></span>
|
||
<span class="line"><span style="color:#24292E;"> </</span><span style="color:#22863A;">fwb-button</span><span style="color:#24292E;">></span></span>
|
||
<span class="line"><span style="color:#24292E;"> <</span><span style="color:#22863A;">fwb-button</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">color</span><span style="color:#24292E;">=</span><span style="color:#032F62;">"yellow"</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">outline</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">pill</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">square</span><span style="color:#24292E;">></span></span>
|
||
<span class="line"><span style="color:#24292E;"> <</span><span style="color:#22863A;">svg</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">class</span><span style="color:#24292E;">=</span><span style="color:#032F62;">"w-5 h-5"</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">fill</span><span style="color:#24292E;">=</span><span style="color:#032F62;">"currentColor"</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">viewBox</span><span style="color:#24292E;">=</span><span style="color:#032F62;">"0 0 20 20"</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">xmlns</span><span style="color:#24292E;">=</span><span style="color:#032F62;">"http://www.w3.org/2000/svg"</span><span style="color:#24292E;">></span></span>
|
||
<span class="line"><span style="color:#24292E;"> <</span><span style="color:#22863A;">path</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">fill-rule</span><span style="color:#24292E;">=</span><span style="color:#032F62;">"evenodd"</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">d</span><span style="color:#24292E;">=</span><span style="color:#032F62;">"M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z"</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">clip-rule</span><span style="color:#24292E;">=</span><span style="color:#032F62;">"evenodd"</span><span style="color:#24292E;"> /></span></span>
|
||
<span class="line"><span style="color:#24292E;"> </</span><span style="color:#22863A;">svg</span><span style="color:#24292E;">></span></span>
|
||
<span class="line"><span style="color:#24292E;"> </</span><span style="color:#22863A;">fwb-button</span><span style="color:#24292E;">></span></span>
|
||
<span class="line"><span style="color:#24292E;"></</span><span style="color:#22863A;">template</span><span style="color:#24292E;">></span></span>
|
||
<span class="line"></span>
|
||
<span class="line"><span style="color:#24292E;"><</span><span style="color:#22863A;">script</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">setup</span><span style="color:#24292E;">></span></span>
|
||
<span class="line"><span style="color:#D73A49;">import</span><span style="color:#24292E;"> { FwbButton } </span><span style="color:#D73A49;">from</span><span style="color:#24292E;"> </span><span style="color:#032F62;">'flowbite-vue'</span></span>
|
||
<span class="line"><span style="color:#24292E;"></</span><span style="color:#22863A;">script</span><span style="color:#24292E;">></span></span></code></pre></div><h2 id="prop-loading" tabindex="-1">Prop - loading <a class="header-anchor" href="#prop-loading" aria-label="Permalink to "Prop - loading""></a></h2><div class="vp-raw flex flex-wrap items-center gap-2"><button class="relative inline-flex items-center justify-center overflow-hidden font-medium text-gray-900 rounded-lg group bg-gradient-to-br from-purple-600 to-blue-500 dark:text-white focus:ring-4 focus:outline-none focus:ring-blue-300 dark:focus:ring-blue-800 group-hover:from-purple-600 group-hover:to-blue-500 hover:text-white p-0.5" href><!----><span class="relative bg-white dark:bg-gray-900 rounded-md inline-flex items-center text-xs px-2 py-1 group-hover:bg-opacity-0 transition-all ease-in duration-75"><!----><!--[--> Click me <!--]--><!----></span><!----></button><button class="text-gray-900 bg-gradient-to-r from-red-200 via-red-300 to-yellow-200 focus:ring-4 focus:outline-none focus:ring-red-100 dark:focus:ring-red-400 font-medium rounded-lg hover:bg-gradient-to-bl text-sm px-3 py-1.5" href><!----><span class=""><!----><!--[--> Click me <!--]--><!----></span><!----></button><button class="text-blue-700 border border-blue-700 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-center dark:border-blue-500 dark:text-blue-500 dark:focus:ring-blue-800 hover:text-white hover:bg-blue-800 dark:hover:text-white dark:hover:bg-blue-600 text-sm px-4 py-2 inline-flex items-center" href><!----><span class=""><!----><!--[--> Click me <!--]--><!----></span><div class="ml-2"><!--[--><svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path clip-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" fill-rule="evenodd"></path></svg><!--]--></div></button><button class="text-white bg-gradient-to-br from-green-400 to-blue-600 focus:ring-4 focus:outline-none focus:ring-green-200 dark:focus:ring-green-800 font-medium rounded-lg hover:bg-gradient-to-bl text-base px-5 py-2.5" href><!----><span class=""><!----><!--[--> Click me <!--]--><!----></span><!----></button><button class="text-white bg-gradient-to-r from-pink-500 via-pink-600 to-pink-700 focus:ring-4 focus:outline-none focus:ring-pink-300 dark:focus:ring-pink-800 rounded-lg hover:bg-gradient-to-br text-base px-6 py-3" href><!----><span class=""><!----><!--[--> Click me <!--]--><!----></span><!----></button></div><div class="language-vue vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki github-dark vp-code-dark"><code><span class="line"><span style="color:#E1E4E8;"><</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> <</span><span style="color:#85E89D;">fwb-button</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">:disabled</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">"loading"</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">:loading</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">"loading"</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">gradient</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">"purple-blue"</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">outline</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">size</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">"xs"</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">@click</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">"loading = !loading"</span><span style="color:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> Click me</span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> </</span><span style="color:#85E89D;">fwb-button</span><span style="color:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> <</span><span style="color:#85E89D;">fwb-button</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">:loading</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">"loading"</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">gradient</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">"red-yellow"</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">size</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">"sm"</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">@click</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">"loading = !loading"</span><span style="color:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> Click me</span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> </</span><span style="color:#85E89D;">fwb-button</span><span style="color:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> <</span><span style="color:#85E89D;">fwb-button</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">:loading</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">"loading"</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">color</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">"default"</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">loading-position</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">"suffix"</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">outline</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">@click</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">"loading = !loading"</span><span style="color:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> Click me</span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> <</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;"> #</span><span style="color:#B392F0;">suffix</span><span style="color:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> <</span><span style="color:#85E89D;">svg</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">class</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">"w-5 h-5"</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">fill</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">"currentColor"</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">viewBox</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">"0 0 20 20"</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">xmlns</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">"http://www.w3.org/2000/svg"</span><span style="color:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> <</span><span style="color:#85E89D;">path</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">clip-rule</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">"evenodd"</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">d</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">"M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z"</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">fill-rule</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">"evenodd"</span><span style="color:#E1E4E8;"> /></span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> </</span><span style="color:#85E89D;">svg</span><span style="color:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> </</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> </</span><span style="color:#85E89D;">fwb-button</span><span style="color:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> <</span><span style="color:#85E89D;">fwb-button</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">:loading</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">"loading"</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">gradient</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">"green-blue"</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">size</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">"lg"</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">@click</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">"loading = !loading"</span><span style="color:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> Click me</span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> </</span><span style="color:#85E89D;">fwb-button</span><span style="color:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> <</span><span style="color:#85E89D;">fwb-button</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">:loading</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">"loading"</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">gradient</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">"pink"</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">size</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">"xl"</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">@click</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">"loading = !loading"</span><span style="color:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> Click me</span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> </</span><span style="color:#85E89D;">fwb-button</span><span style="color:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"></</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;">></span></span>
|
||
<span class="line"></span>
|
||
<span class="line"><span style="color:#E1E4E8;"><</span><span style="color:#85E89D;">script</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">setup</span><span style="color:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="color:#F97583;">import</span><span style="color:#E1E4E8;"> { ref } </span><span style="color:#F97583;">from</span><span style="color:#E1E4E8;"> </span><span style="color:#9ECBFF;">'vue'</span></span>
|
||
<span class="line"><span style="color:#F97583;">import</span><span style="color:#E1E4E8;"> { FwbButton } </span><span style="color:#F97583;">from</span><span style="color:#E1E4E8;"> </span><span style="color:#9ECBFF;">'flowbite-vue'</span></span>
|
||
<span class="line"></span>
|
||
<span class="line"><span style="color:#F97583;">const</span><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">loading</span><span style="color:#E1E4E8;"> </span><span style="color:#F97583;">=</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">ref</span><span style="color:#E1E4E8;">(</span><span style="color:#79B8FF;">false</span><span style="color:#E1E4E8;">)</span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"></</span><span style="color:#85E89D;">script</span><span style="color:#E1E4E8;">></span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#24292E;"><</span><span style="color:#22863A;">template</span><span style="color:#24292E;">></span></span>
|
||
<span class="line"><span style="color:#24292E;"> <</span><span style="color:#22863A;">fwb-button</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">:disabled</span><span style="color:#24292E;">=</span><span style="color:#032F62;">"loading"</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">:loading</span><span style="color:#24292E;">=</span><span style="color:#032F62;">"loading"</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">gradient</span><span style="color:#24292E;">=</span><span style="color:#032F62;">"purple-blue"</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">outline</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">size</span><span style="color:#24292E;">=</span><span style="color:#032F62;">"xs"</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">@click</span><span style="color:#24292E;">=</span><span style="color:#032F62;">"loading = !loading"</span><span style="color:#24292E;">></span></span>
|
||
<span class="line"><span style="color:#24292E;"> Click me</span></span>
|
||
<span class="line"><span style="color:#24292E;"> </</span><span style="color:#22863A;">fwb-button</span><span style="color:#24292E;">></span></span>
|
||
<span class="line"><span style="color:#24292E;"> <</span><span style="color:#22863A;">fwb-button</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">:loading</span><span style="color:#24292E;">=</span><span style="color:#032F62;">"loading"</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">gradient</span><span style="color:#24292E;">=</span><span style="color:#032F62;">"red-yellow"</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">size</span><span style="color:#24292E;">=</span><span style="color:#032F62;">"sm"</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">@click</span><span style="color:#24292E;">=</span><span style="color:#032F62;">"loading = !loading"</span><span style="color:#24292E;">></span></span>
|
||
<span class="line"><span style="color:#24292E;"> Click me</span></span>
|
||
<span class="line"><span style="color:#24292E;"> </</span><span style="color:#22863A;">fwb-button</span><span style="color:#24292E;">></span></span>
|
||
<span class="line"><span style="color:#24292E;"> <</span><span style="color:#22863A;">fwb-button</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">:loading</span><span style="color:#24292E;">=</span><span style="color:#032F62;">"loading"</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">color</span><span style="color:#24292E;">=</span><span style="color:#032F62;">"default"</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">loading-position</span><span style="color:#24292E;">=</span><span style="color:#032F62;">"suffix"</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">outline</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">@click</span><span style="color:#24292E;">=</span><span style="color:#032F62;">"loading = !loading"</span><span style="color:#24292E;">></span></span>
|
||
<span class="line"><span style="color:#24292E;"> Click me</span></span>
|
||
<span class="line"><span style="color:#24292E;"> <</span><span style="color:#22863A;">template</span><span style="color:#24292E;"> #</span><span style="color:#6F42C1;">suffix</span><span style="color:#24292E;">></span></span>
|
||
<span class="line"><span style="color:#24292E;"> <</span><span style="color:#22863A;">svg</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">class</span><span style="color:#24292E;">=</span><span style="color:#032F62;">"w-5 h-5"</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">fill</span><span style="color:#24292E;">=</span><span style="color:#032F62;">"currentColor"</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">viewBox</span><span style="color:#24292E;">=</span><span style="color:#032F62;">"0 0 20 20"</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">xmlns</span><span style="color:#24292E;">=</span><span style="color:#032F62;">"http://www.w3.org/2000/svg"</span><span style="color:#24292E;">></span></span>
|
||
<span class="line"><span style="color:#24292E;"> <</span><span style="color:#22863A;">path</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">clip-rule</span><span style="color:#24292E;">=</span><span style="color:#032F62;">"evenodd"</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">d</span><span style="color:#24292E;">=</span><span style="color:#032F62;">"M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z"</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">fill-rule</span><span style="color:#24292E;">=</span><span style="color:#032F62;">"evenodd"</span><span style="color:#24292E;"> /></span></span>
|
||
<span class="line"><span style="color:#24292E;"> </</span><span style="color:#22863A;">svg</span><span style="color:#24292E;">></span></span>
|
||
<span class="line"><span style="color:#24292E;"> </</span><span style="color:#22863A;">template</span><span style="color:#24292E;">></span></span>
|
||
<span class="line"><span style="color:#24292E;"> </</span><span style="color:#22863A;">fwb-button</span><span style="color:#24292E;">></span></span>
|
||
<span class="line"><span style="color:#24292E;"> <</span><span style="color:#22863A;">fwb-button</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">:loading</span><span style="color:#24292E;">=</span><span style="color:#032F62;">"loading"</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">gradient</span><span style="color:#24292E;">=</span><span style="color:#032F62;">"green-blue"</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">size</span><span style="color:#24292E;">=</span><span style="color:#032F62;">"lg"</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">@click</span><span style="color:#24292E;">=</span><span style="color:#032F62;">"loading = !loading"</span><span style="color:#24292E;">></span></span>
|
||
<span class="line"><span style="color:#24292E;"> Click me</span></span>
|
||
<span class="line"><span style="color:#24292E;"> </</span><span style="color:#22863A;">fwb-button</span><span style="color:#24292E;">></span></span>
|
||
<span class="line"><span style="color:#24292E;"> <</span><span style="color:#22863A;">fwb-button</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">:loading</span><span style="color:#24292E;">=</span><span style="color:#032F62;">"loading"</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">gradient</span><span style="color:#24292E;">=</span><span style="color:#032F62;">"pink"</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">size</span><span style="color:#24292E;">=</span><span style="color:#032F62;">"xl"</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">@click</span><span style="color:#24292E;">=</span><span style="color:#032F62;">"loading = !loading"</span><span style="color:#24292E;">></span></span>
|
||
<span class="line"><span style="color:#24292E;"> Click me</span></span>
|
||
<span class="line"><span style="color:#24292E;"> </</span><span style="color:#22863A;">fwb-button</span><span style="color:#24292E;">></span></span>
|
||
<span class="line"><span style="color:#24292E;"></</span><span style="color:#22863A;">template</span><span style="color:#24292E;">></span></span>
|
||
<span class="line"></span>
|
||
<span class="line"><span style="color:#24292E;"><</span><span style="color:#22863A;">script</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">setup</span><span style="color:#24292E;">></span></span>
|
||
<span class="line"><span style="color:#D73A49;">import</span><span style="color:#24292E;"> { ref } </span><span style="color:#D73A49;">from</span><span style="color:#24292E;"> </span><span style="color:#032F62;">'vue'</span></span>
|
||
<span class="line"><span style="color:#D73A49;">import</span><span style="color:#24292E;"> { FwbButton } </span><span style="color:#D73A49;">from</span><span style="color:#24292E;"> </span><span style="color:#032F62;">'flowbite-vue'</span></span>
|
||
<span class="line"></span>
|
||
<span class="line"><span style="color:#D73A49;">const</span><span style="color:#24292E;"> </span><span style="color:#005CC5;">loading</span><span style="color:#24292E;"> </span><span style="color:#D73A49;">=</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">ref</span><span style="color:#24292E;">(</span><span style="color:#005CC5;">false</span><span style="color:#24292E;">)</span></span>
|
||
<span class="line"><span style="color:#24292E;"></</span><span style="color:#22863A;">script</span><span style="color:#24292E;">></span></span></code></pre></div><h2 id="prop-disabled" tabindex="-1">Prop - disabled <a class="header-anchor" href="#prop-disabled" aria-label="Permalink to "Prop - disabled""></a></h2><div class="vp-raw flex flex-wrap gap-2"><button class="text-white bg-blue-700 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg dark:bg-blue-600 focus:outline-none dark:focus:ring-blue-800 cursor-not-allowed opacity-50 text-sm px-4 py-2" href disabled><!----><span class=""><!----><!--[--> Default <!--]--><!----></span><!----></button><button class="text-blue-700 border border-blue-700 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-center dark:border-blue-500 dark:text-blue-500 dark:focus:ring-blue-800 cursor-not-allowed opacity-50 text-sm px-4 py-2" href disabled><!----><span class=""><!----><!--[--> Default outline <!--]--><!----></span><!----></button><button class="text-white bg-gradient-to-r from-red-500 via-red-600 to-red-700 focus:ring-4 focus:outline-none focus:ring-red-300 dark:focus:ring-red-800 rounded-lg cursor-not-allowed opacity-50 text-sm px-4 py-2" href disabled><!----><span class=""><!----><!--[--> Red gradient <!--]--><!----></span><!----></button><button class="text-gray-900 bg-gradient-to-r from-red-200 via-red-300 to-yellow-200 focus:ring-4 focus:outline-none focus:ring-red-100 dark:focus:ring-red-400 font-medium rounded-lg cursor-not-allowed opacity-50 text-sm px-4 py-2" href disabled><!----><span class=""><!----><!--[--> Red to yellow gradient <!--]--><!----></span><!----></button><button class="relative inline-flex items-center justify-center overflow-hidden font-medium text-gray-900 rounded-lg group bg-gradient-to-br from-red-200 via-red-300 to-yellow-200 dark:text-white focus:ring-4 focus:outline-none focus:ring-red-100 dark:focus:ring-red-400 cursor-not-allowed opacity-50 p-0.5" href disabled><!----><span class="relative bg-white dark:bg-gray-900 rounded-md inline-flex items-center text-sm px-4 py-2"><!----><!--[--> Red to yellow outline <!--]--><!----></span><!----></button></div><div class="language-vue vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki github-dark vp-code-dark"><code><span class="line"><span style="color:#E1E4E8;"><</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> <</span><span style="color:#85E89D;">fwb-button</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">color</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">"default"</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">disabled</span><span style="color:#E1E4E8;">>Default</</span><span style="color:#85E89D;">fwb-button</span><span style="color:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> <</span><span style="color:#85E89D;">fwb-button</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">color</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">"default"</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">outline</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">disabled</span><span style="color:#E1E4E8;">>Default outline</</span><span style="color:#85E89D;">fwb-button</span><span style="color:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> <</span><span style="color:#85E89D;">fwb-button</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">gradient</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">"red"</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">disabled</span><span style="color:#E1E4E8;">>Red gradient</</span><span style="color:#85E89D;">fwb-button</span><span style="color:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> <</span><span style="color:#85E89D;">fwb-button</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">gradient</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">"red-yellow"</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">disabled</span><span style="color:#E1E4E8;">>Red to yellow gradient</</span><span style="color:#85E89D;">fwb-button</span><span style="color:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> <</span><span style="color:#85E89D;">fwb-button</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">gradient</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">"red-yellow"</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">outline</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">disabled</span><span style="color:#E1E4E8;">>Red to yellow outline</</span><span style="color:#85E89D;">fwb-button</span><span style="color:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"></</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;">></span></span>
|
||
<span class="line"></span>
|
||
<span class="line"><span style="color:#E1E4E8;"><</span><span style="color:#85E89D;">script</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">setup</span><span style="color:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="color:#F97583;">import</span><span style="color:#E1E4E8;"> { FwbButton } </span><span style="color:#F97583;">from</span><span style="color:#E1E4E8;"> </span><span style="color:#9ECBFF;">'flowbite-vue'</span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"></</span><span style="color:#85E89D;">script</span><span style="color:#E1E4E8;">></span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#24292E;"><</span><span style="color:#22863A;">template</span><span style="color:#24292E;">></span></span>
|
||
<span class="line"><span style="color:#24292E;"> <</span><span style="color:#22863A;">fwb-button</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">color</span><span style="color:#24292E;">=</span><span style="color:#032F62;">"default"</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">disabled</span><span style="color:#24292E;">>Default</</span><span style="color:#22863A;">fwb-button</span><span style="color:#24292E;">></span></span>
|
||
<span class="line"><span style="color:#24292E;"> <</span><span style="color:#22863A;">fwb-button</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">color</span><span style="color:#24292E;">=</span><span style="color:#032F62;">"default"</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">outline</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">disabled</span><span style="color:#24292E;">>Default outline</</span><span style="color:#22863A;">fwb-button</span><span style="color:#24292E;">></span></span>
|
||
<span class="line"><span style="color:#24292E;"> <</span><span style="color:#22863A;">fwb-button</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">gradient</span><span style="color:#24292E;">=</span><span style="color:#032F62;">"red"</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">disabled</span><span style="color:#24292E;">>Red gradient</</span><span style="color:#22863A;">fwb-button</span><span style="color:#24292E;">></span></span>
|
||
<span class="line"><span style="color:#24292E;"> <</span><span style="color:#22863A;">fwb-button</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">gradient</span><span style="color:#24292E;">=</span><span style="color:#032F62;">"red-yellow"</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">disabled</span><span style="color:#24292E;">>Red to yellow gradient</</span><span style="color:#22863A;">fwb-button</span><span style="color:#24292E;">></span></span>
|
||
<span class="line"><span style="color:#24292E;"> <</span><span style="color:#22863A;">fwb-button</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">gradient</span><span style="color:#24292E;">=</span><span style="color:#032F62;">"red-yellow"</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">outline</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">disabled</span><span style="color:#24292E;">>Red to yellow outline</</span><span style="color:#22863A;">fwb-button</span><span style="color:#24292E;">></span></span>
|
||
<span class="line"><span style="color:#24292E;"></</span><span style="color:#22863A;">template</span><span style="color:#24292E;">></span></span>
|
||
<span class="line"></span>
|
||
<span class="line"><span style="color:#24292E;"><</span><span style="color:#22863A;">script</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">setup</span><span style="color:#24292E;">></span></span>
|
||
<span class="line"><span style="color:#D73A49;">import</span><span style="color:#24292E;"> { FwbButton } </span><span style="color:#D73A49;">from</span><span style="color:#24292E;"> </span><span style="color:#032F62;">'flowbite-vue'</span></span>
|
||
<span class="line"><span style="color:#24292E;"></</span><span style="color:#22863A;">script</span><span style="color:#24292E;">></span></span></code></pre></div><h2 id="prop-href" tabindex="-1">Prop - href <a class="header-anchor" href="#prop-href" aria-label="Permalink to "Prop - href""></a></h2><p>You can add a link to a <code>Button</code> component. Additionally you can add <code>tag</code> prop to change button component to <code>router-link</code></p><div class="vp-raw flex flex-wrap gap-2"><a class="text-white bg-blue-700 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg dark:bg-blue-600 focus:outline-none dark:focus:ring-blue-800 hover:bg-blue-800 dark:hover:bg-blue-700 text-sm px-4 py-2" href="https://google.com" target="_blank"><!----><span class=""><!----><!--[--> Google.com <!--]--><!----></span><!----></a></div><div class="language-vue vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki github-dark vp-code-dark"><code><span class="line"><span style="color:#E1E4E8;"><</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> <</span><span style="color:#85E89D;">fwb-button</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">href</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">"https://google.com"</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">target</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">"_blank"</span><span style="color:#E1E4E8;">>Google.com</</span><span style="color:#85E89D;">fwb-button</span><span style="color:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> <</span><span style="color:#85E89D;">fwb-button</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">href</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">"/pages/getting-started"</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">tag</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">"router-link"</span><span style="color:#E1E4E8;">>Quickstart</</span><span style="color:#85E89D;">fwb-button</span><span style="color:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"></</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;">></span></span>
|
||
<span class="line"></span>
|
||
<span class="line"><span style="color:#E1E4E8;"><</span><span style="color:#85E89D;">script</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">setup</span><span style="color:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="color:#F97583;">import</span><span style="color:#E1E4E8;"> { FwbButton } </span><span style="color:#F97583;">from</span><span style="color:#E1E4E8;"> </span><span style="color:#9ECBFF;">'flowbite-vue'</span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"></</span><span style="color:#85E89D;">script</span><span style="color:#E1E4E8;">></span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#24292E;"><</span><span style="color:#22863A;">template</span><span style="color:#24292E;">></span></span>
|
||
<span class="line"><span style="color:#24292E;"> <</span><span style="color:#22863A;">fwb-button</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">href</span><span style="color:#24292E;">=</span><span style="color:#032F62;">"https://google.com"</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">target</span><span style="color:#24292E;">=</span><span style="color:#032F62;">"_blank"</span><span style="color:#24292E;">>Google.com</</span><span style="color:#22863A;">fwb-button</span><span style="color:#24292E;">></span></span>
|
||
<span class="line"><span style="color:#24292E;"> <</span><span style="color:#22863A;">fwb-button</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">href</span><span style="color:#24292E;">=</span><span style="color:#032F62;">"/pages/getting-started"</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">tag</span><span style="color:#24292E;">=</span><span style="color:#032F62;">"router-link"</span><span style="color:#24292E;">>Quickstart</</span><span style="color:#22863A;">fwb-button</span><span style="color:#24292E;">></span></span>
|
||
<span class="line"><span style="color:#24292E;"></</span><span style="color:#22863A;">template</span><span style="color:#24292E;">></span></span>
|
||
<span class="line"></span>
|
||
<span class="line"><span style="color:#24292E;"><</span><span style="color:#22863A;">script</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">setup</span><span style="color:#24292E;">></span></span>
|
||
<span class="line"><span style="color:#D73A49;">import</span><span style="color:#24292E;"> { FwbButton } </span><span style="color:#D73A49;">from</span><span style="color:#24292E;"> </span><span style="color:#032F62;">'flowbite-vue'</span></span>
|
||
<span class="line"><span style="color:#24292E;"></</span><span style="color:#22863A;">script</span><span style="color:#24292E;">></span></span></code></pre></div><h2 id="slot-default" tabindex="-1">Slot - default <a class="header-anchor" href="#slot-default" aria-label="Permalink to "Slot - default""></a></h2><div class="vp-raw flex flex-wrap gap-2"><button class="text-white bg-gradient-to-br from-purple-600 to-blue-500 focus:ring-4 focus:outline-none focus:ring-blue-300 dark:focus:ring-blue-800 font-medium rounded-lg hover:bg-gradient-to-bl text-sm p-2" href><!----><span class=""><!----><!--[--><svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path clip-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" fill-rule="evenodd"></path></svg><!--]--><!----></span><!----></button><button class="text-white bg-blue-700 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg dark:bg-blue-600 focus:outline-none dark:focus:ring-blue-800 hover:bg-blue-800 dark:hover:bg-blue-700 !rounded-full text-sm p-2" href><!----><span class=""><!----><!--[--><svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path clip-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" fill-rule="evenodd"></path></svg><!--]--><!----></span><!----></button><button class="text-white bg-gradient-to-br from-green-400 to-blue-600 focus:ring-4 focus:outline-none focus:ring-green-200 dark:focus:ring-green-800 font-medium rounded-lg hover:bg-gradient-to-bl text-sm p-2" href><!----><span class=""><!----><!--[--> Close something <!--]--><!----></span><!----></button><button class="text-blue-700 border border-blue-700 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-center dark:border-blue-500 dark:text-blue-500 dark:focus:ring-blue-800 hover:text-white hover:bg-blue-800 dark:hover:text-white dark:hover:bg-blue-600 !rounded-full text-sm p-2 inline-flex items-center" href><!----><span class=""><!----><!--[--> Open something <!--]--><!----></span><div class="ml-2"><!--[--><svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path clip-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" fill-rule="evenodd"></path></svg><!--]--></div></button></div><div class="language-vue vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki github-dark vp-code-dark"><code><span class="line"><span style="color:#E1E4E8;"><</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> <</span><span style="color:#85E89D;">fwb-button</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">gradient</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">"purple-blue"</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">square</span><span style="color:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> <</span><span style="color:#85E89D;">svg</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">class</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">"w-5 h-5"</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">fill</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">"currentColor"</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">viewBox</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">"0 0 20 20"</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">xmlns</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">"http://www.w3.org/2000/svg"</span><span style="color:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> <</span><span style="color:#85E89D;">path</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">clip-rule</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">"evenodd"</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">d</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">"M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z"</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">fill-rule</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">"evenodd"</span><span style="color:#E1E4E8;"> /></span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> </</span><span style="color:#85E89D;">svg</span><span style="color:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> </</span><span style="color:#85E89D;">fwb-button</span><span style="color:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> <</span><span style="color:#85E89D;">fwb-button</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">color</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">"default"</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">pill</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">square</span><span style="color:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> <</span><span style="color:#85E89D;">svg</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">class</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">"w-5 h-5"</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">fill</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">"currentColor"</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">viewBox</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">"0 0 20 20"</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">xmlns</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">"http://www.w3.org/2000/svg"</span><span style="color:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> <</span><span style="color:#85E89D;">path</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">clip-rule</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">"evenodd"</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">d</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">"M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z"</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">fill-rule</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">"evenodd"</span><span style="color:#E1E4E8;"> /></span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> </</span><span style="color:#85E89D;">svg</span><span style="color:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> </</span><span style="color:#85E89D;">fwb-button</span><span style="color:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> <</span><span style="color:#85E89D;">fwb-button</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">gradient</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">"green-blue"</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">square</span><span style="color:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> Close something</span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> </</span><span style="color:#85E89D;">fwb-button</span><span style="color:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> <</span><span style="color:#85E89D;">fwb-button</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">color</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">"default"</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">outline</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">pill</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">square</span><span style="color:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> Open something</span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> <</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;"> #</span><span style="color:#B392F0;">suffix</span><span style="color:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> <</span><span style="color:#85E89D;">svg</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">class</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">"w-5 h-5"</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">fill</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">"currentColor"</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">viewBox</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">"0 0 20 20"</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">xmlns</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">"http://www.w3.org/2000/svg"</span><span style="color:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> <</span><span style="color:#85E89D;">path</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">clip-rule</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">"evenodd"</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">d</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">"M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z"</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">fill-rule</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">"evenodd"</span><span style="color:#E1E4E8;"> /></span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> </</span><span style="color:#85E89D;">svg</span><span style="color:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> </</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> </</span><span style="color:#85E89D;">fwb-button</span><span style="color:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"></</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;">></span></span>
|
||
<span class="line"></span>
|
||
<span class="line"><span style="color:#E1E4E8;"><</span><span style="color:#85E89D;">script</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">setup</span><span style="color:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="color:#F97583;">import</span><span style="color:#E1E4E8;"> { FwbButton } </span><span style="color:#F97583;">from</span><span style="color:#E1E4E8;"> </span><span style="color:#9ECBFF;">'flowbite-vue'</span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"></</span><span style="color:#85E89D;">script</span><span style="color:#E1E4E8;">></span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#24292E;"><</span><span style="color:#22863A;">template</span><span style="color:#24292E;">></span></span>
|
||
<span class="line"><span style="color:#24292E;"> <</span><span style="color:#22863A;">fwb-button</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">gradient</span><span style="color:#24292E;">=</span><span style="color:#032F62;">"purple-blue"</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">square</span><span style="color:#24292E;">></span></span>
|
||
<span class="line"><span style="color:#24292E;"> <</span><span style="color:#22863A;">svg</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">class</span><span style="color:#24292E;">=</span><span style="color:#032F62;">"w-5 h-5"</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">fill</span><span style="color:#24292E;">=</span><span style="color:#032F62;">"currentColor"</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">viewBox</span><span style="color:#24292E;">=</span><span style="color:#032F62;">"0 0 20 20"</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">xmlns</span><span style="color:#24292E;">=</span><span style="color:#032F62;">"http://www.w3.org/2000/svg"</span><span style="color:#24292E;">></span></span>
|
||
<span class="line"><span style="color:#24292E;"> <</span><span style="color:#22863A;">path</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">clip-rule</span><span style="color:#24292E;">=</span><span style="color:#032F62;">"evenodd"</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">d</span><span style="color:#24292E;">=</span><span style="color:#032F62;">"M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z"</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">fill-rule</span><span style="color:#24292E;">=</span><span style="color:#032F62;">"evenodd"</span><span style="color:#24292E;"> /></span></span>
|
||
<span class="line"><span style="color:#24292E;"> </</span><span style="color:#22863A;">svg</span><span style="color:#24292E;">></span></span>
|
||
<span class="line"><span style="color:#24292E;"> </</span><span style="color:#22863A;">fwb-button</span><span style="color:#24292E;">></span></span>
|
||
<span class="line"><span style="color:#24292E;"> <</span><span style="color:#22863A;">fwb-button</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">color</span><span style="color:#24292E;">=</span><span style="color:#032F62;">"default"</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">pill</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">square</span><span style="color:#24292E;">></span></span>
|
||
<span class="line"><span style="color:#24292E;"> <</span><span style="color:#22863A;">svg</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">class</span><span style="color:#24292E;">=</span><span style="color:#032F62;">"w-5 h-5"</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">fill</span><span style="color:#24292E;">=</span><span style="color:#032F62;">"currentColor"</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">viewBox</span><span style="color:#24292E;">=</span><span style="color:#032F62;">"0 0 20 20"</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">xmlns</span><span style="color:#24292E;">=</span><span style="color:#032F62;">"http://www.w3.org/2000/svg"</span><span style="color:#24292E;">></span></span>
|
||
<span class="line"><span style="color:#24292E;"> <</span><span style="color:#22863A;">path</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">clip-rule</span><span style="color:#24292E;">=</span><span style="color:#032F62;">"evenodd"</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">d</span><span style="color:#24292E;">=</span><span style="color:#032F62;">"M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z"</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">fill-rule</span><span style="color:#24292E;">=</span><span style="color:#032F62;">"evenodd"</span><span style="color:#24292E;"> /></span></span>
|
||
<span class="line"><span style="color:#24292E;"> </</span><span style="color:#22863A;">svg</span><span style="color:#24292E;">></span></span>
|
||
<span class="line"><span style="color:#24292E;"> </</span><span style="color:#22863A;">fwb-button</span><span style="color:#24292E;">></span></span>
|
||
<span class="line"><span style="color:#24292E;"> <</span><span style="color:#22863A;">fwb-button</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">gradient</span><span style="color:#24292E;">=</span><span style="color:#032F62;">"green-blue"</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">square</span><span style="color:#24292E;">></span></span>
|
||
<span class="line"><span style="color:#24292E;"> Close something</span></span>
|
||
<span class="line"><span style="color:#24292E;"> </</span><span style="color:#22863A;">fwb-button</span><span style="color:#24292E;">></span></span>
|
||
<span class="line"><span style="color:#24292E;"> <</span><span style="color:#22863A;">fwb-button</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">color</span><span style="color:#24292E;">=</span><span style="color:#032F62;">"default"</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">outline</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">pill</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">square</span><span style="color:#24292E;">></span></span>
|
||
<span class="line"><span style="color:#24292E;"> Open something</span></span>
|
||
<span class="line"><span style="color:#24292E;"> <</span><span style="color:#22863A;">template</span><span style="color:#24292E;"> #</span><span style="color:#6F42C1;">suffix</span><span style="color:#24292E;">></span></span>
|
||
<span class="line"><span style="color:#24292E;"> <</span><span style="color:#22863A;">svg</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">class</span><span style="color:#24292E;">=</span><span style="color:#032F62;">"w-5 h-5"</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">fill</span><span style="color:#24292E;">=</span><span style="color:#032F62;">"currentColor"</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">viewBox</span><span style="color:#24292E;">=</span><span style="color:#032F62;">"0 0 20 20"</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">xmlns</span><span style="color:#24292E;">=</span><span style="color:#032F62;">"http://www.w3.org/2000/svg"</span><span style="color:#24292E;">></span></span>
|
||
<span class="line"><span style="color:#24292E;"> <</span><span style="color:#22863A;">path</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">clip-rule</span><span style="color:#24292E;">=</span><span style="color:#032F62;">"evenodd"</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">d</span><span style="color:#24292E;">=</span><span style="color:#032F62;">"M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z"</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">fill-rule</span><span style="color:#24292E;">=</span><span style="color:#032F62;">"evenodd"</span><span style="color:#24292E;"> /></span></span>
|
||
<span class="line"><span style="color:#24292E;"> </</span><span style="color:#22863A;">svg</span><span style="color:#24292E;">></span></span>
|
||
<span class="line"><span style="color:#24292E;"> </</span><span style="color:#22863A;">template</span><span style="color:#24292E;">></span></span>
|
||
<span class="line"><span style="color:#24292E;"> </</span><span style="color:#22863A;">fwb-button</span><span style="color:#24292E;">></span></span>
|
||
<span class="line"><span style="color:#24292E;"></</span><span style="color:#22863A;">template</span><span style="color:#24292E;">></span></span>
|
||
<span class="line"></span>
|
||
<span class="line"><span style="color:#24292E;"><</span><span style="color:#22863A;">script</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">setup</span><span style="color:#24292E;">></span></span>
|
||
<span class="line"><span style="color:#D73A49;">import</span><span style="color:#24292E;"> { FwbButton } </span><span style="color:#D73A49;">from</span><span style="color:#24292E;"> </span><span style="color:#032F62;">'flowbite-vue'</span></span>
|
||
<span class="line"><span style="color:#24292E;"></</span><span style="color:#22863A;">script</span><span style="color:#24292E;">></span></span></code></pre></div><h2 id="slot-prefix" tabindex="-1">Slot - prefix <a class="header-anchor" href="#slot-prefix" aria-label="Permalink to "Slot - prefix""></a></h2><div class="vp-raw"><button class="text-white bg-blue-700 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg dark:bg-blue-600 focus:outline-none dark:focus:ring-blue-800 hover:bg-blue-800 dark:hover:bg-blue-700 text-sm px-4 py-2 inline-flex items-center" href><div class="mr-2"><!--[--><svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M3 1a1 1 0 000 2h1.22l.305 1.222a.997.997 0 00.01.042l1.358 5.43-.893.892C3.74 11.846 4.632 14 6.414 14H15a1 1 0 000-2H6.414l1-1H14a1 1 0 00.894-.553l3-6A1 1 0 0017 3H6.28l-.31-1.243A1 1 0 005 1H3zM16 16.5a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zM6.5 18a1.5 1.5 0 100-3 1.5 1.5 0 000 3z"></path></svg><!--]--></div><span class=""><!----><!--[--> Buy <!--]--><!----></span><!----></button></div><div class="language-vue vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki github-dark vp-code-dark"><code><span class="line"><span style="color:#E1E4E8;"><</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> <</span><span style="color:#85E89D;">fwb-button</span><span style="color:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> <</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;"> #</span><span style="color:#B392F0;">prefix</span><span style="color:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> <</span><span style="color:#85E89D;">svg</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">class</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">"w-5 h-5"</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">fill</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">"currentColor"</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">viewBox</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">"0 0 20 20"</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">xmlns</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">"http://www.w3.org/2000/svg"</span><span style="color:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> <</span><span style="color:#85E89D;">path</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">d</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">"M3 1a1 1 0 000 2h1.22l.305 1.222a.997.997 0 00.01.042l1.358 5.43-.893.892C3.74 11.846 4.632 14 6.414 14H15a1 1 0 000-2H6.414l1-1H14a1 1 0 00.894-.553l3-6A1 1 0 0017 3H6.28l-.31-1.243A1 1 0 005 1H3zM16 16.5a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zM6.5 18a1.5 1.5 0 100-3 1.5 1.5 0 000 3z"</span><span style="color:#E1E4E8;"> /></span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> </</span><span style="color:#85E89D;">svg</span><span style="color:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> </</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> Buy</span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> </</span><span style="color:#85E89D;">fwb-button</span><span style="color:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"></</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;">></span></span>
|
||
<span class="line"></span>
|
||
<span class="line"><span style="color:#E1E4E8;"><</span><span style="color:#85E89D;">script</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">setup</span><span style="color:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="color:#F97583;">import</span><span style="color:#E1E4E8;"> { FwbButton } </span><span style="color:#F97583;">from</span><span style="color:#E1E4E8;"> </span><span style="color:#9ECBFF;">'flowbite-vue'</span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"></</span><span style="color:#85E89D;">script</span><span style="color:#E1E4E8;">></span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#24292E;"><</span><span style="color:#22863A;">template</span><span style="color:#24292E;">></span></span>
|
||
<span class="line"><span style="color:#24292E;"> <</span><span style="color:#22863A;">fwb-button</span><span style="color:#24292E;">></span></span>
|
||
<span class="line"><span style="color:#24292E;"> <</span><span style="color:#22863A;">template</span><span style="color:#24292E;"> #</span><span style="color:#6F42C1;">prefix</span><span style="color:#24292E;">></span></span>
|
||
<span class="line"><span style="color:#24292E;"> <</span><span style="color:#22863A;">svg</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">class</span><span style="color:#24292E;">=</span><span style="color:#032F62;">"w-5 h-5"</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">fill</span><span style="color:#24292E;">=</span><span style="color:#032F62;">"currentColor"</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">viewBox</span><span style="color:#24292E;">=</span><span style="color:#032F62;">"0 0 20 20"</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">xmlns</span><span style="color:#24292E;">=</span><span style="color:#032F62;">"http://www.w3.org/2000/svg"</span><span style="color:#24292E;">></span></span>
|
||
<span class="line"><span style="color:#24292E;"> <</span><span style="color:#22863A;">path</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">d</span><span style="color:#24292E;">=</span><span style="color:#032F62;">"M3 1a1 1 0 000 2h1.22l.305 1.222a.997.997 0 00.01.042l1.358 5.43-.893.892C3.74 11.846 4.632 14 6.414 14H15a1 1 0 000-2H6.414l1-1H14a1 1 0 00.894-.553l3-6A1 1 0 0017 3H6.28l-.31-1.243A1 1 0 005 1H3zM16 16.5a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zM6.5 18a1.5 1.5 0 100-3 1.5 1.5 0 000 3z"</span><span style="color:#24292E;"> /></span></span>
|
||
<span class="line"><span style="color:#24292E;"> </</span><span style="color:#22863A;">svg</span><span style="color:#24292E;">></span></span>
|
||
<span class="line"><span style="color:#24292E;"> </</span><span style="color:#22863A;">template</span><span style="color:#24292E;">></span></span>
|
||
<span class="line"><span style="color:#24292E;"> Buy</span></span>
|
||
<span class="line"><span style="color:#24292E;"> </</span><span style="color:#22863A;">fwb-button</span><span style="color:#24292E;">></span></span>
|
||
<span class="line"><span style="color:#24292E;"></</span><span style="color:#22863A;">template</span><span style="color:#24292E;">></span></span>
|
||
<span class="line"></span>
|
||
<span class="line"><span style="color:#24292E;"><</span><span style="color:#22863A;">script</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">setup</span><span style="color:#24292E;">></span></span>
|
||
<span class="line"><span style="color:#D73A49;">import</span><span style="color:#24292E;"> { FwbButton } </span><span style="color:#D73A49;">from</span><span style="color:#24292E;"> </span><span style="color:#032F62;">'flowbite-vue'</span></span>
|
||
<span class="line"><span style="color:#24292E;"></</span><span style="color:#22863A;">script</span><span style="color:#24292E;">></span></span></code></pre></div><h2 id="slot-suffix" tabindex="-1">Slot - suffix <a class="header-anchor" href="#slot-suffix" aria-label="Permalink to "Slot - suffix""></a></h2><div class="vp-raw"><button class="text-white bg-blue-700 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg dark:bg-blue-600 focus:outline-none dark:focus:ring-blue-800 hover:bg-blue-800 dark:hover:bg-blue-700 text-sm px-4 py-2 inline-flex items-center" href><!----><span class=""><!----><!--[--> Choose plan <!--]--><!----></span><div class="ml-2"><!--[--><svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path clip-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" fill-rule="evenodd"></path></svg><!--]--></div></button></div><div class="language-vue vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki github-dark vp-code-dark"><code><span class="line"><span style="color:#E1E4E8;"><</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> <</span><span style="color:#85E89D;">fwb-button</span><span style="color:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> Choose plan</span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> <</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;"> #</span><span style="color:#B392F0;">suffix</span><span style="color:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> <</span><span style="color:#85E89D;">svg</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">class</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">"w-5 h-5"</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">fill</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">"currentColor"</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">viewBox</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">"0 0 20 20"</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">xmlns</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">"http://www.w3.org/2000/svg"</span><span style="color:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> <</span><span style="color:#85E89D;">path</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">clip-rule</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">"evenodd"</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">d</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">"M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z"</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">fill-rule</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">"evenodd"</span><span style="color:#E1E4E8;"> /></span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> </</span><span style="color:#85E89D;">svg</span><span style="color:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> </</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> </</span><span style="color:#85E89D;">fwb-button</span><span style="color:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"></</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;">></span></span>
|
||
<span class="line"></span>
|
||
<span class="line"><span style="color:#E1E4E8;"><</span><span style="color:#85E89D;">script</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">setup</span><span style="color:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="color:#F97583;">import</span><span style="color:#E1E4E8;"> { FwbButton } </span><span style="color:#F97583;">from</span><span style="color:#E1E4E8;"> </span><span style="color:#9ECBFF;">'flowbite-vue'</span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"></</span><span style="color:#85E89D;">script</span><span style="color:#E1E4E8;">></span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#24292E;"><</span><span style="color:#22863A;">template</span><span style="color:#24292E;">></span></span>
|
||
<span class="line"><span style="color:#24292E;"> <</span><span style="color:#22863A;">fwb-button</span><span style="color:#24292E;">></span></span>
|
||
<span class="line"><span style="color:#24292E;"> Choose plan</span></span>
|
||
<span class="line"><span style="color:#24292E;"> <</span><span style="color:#22863A;">template</span><span style="color:#24292E;"> #</span><span style="color:#6F42C1;">suffix</span><span style="color:#24292E;">></span></span>
|
||
<span class="line"><span style="color:#24292E;"> <</span><span style="color:#22863A;">svg</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">class</span><span style="color:#24292E;">=</span><span style="color:#032F62;">"w-5 h-5"</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">fill</span><span style="color:#24292E;">=</span><span style="color:#032F62;">"currentColor"</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">viewBox</span><span style="color:#24292E;">=</span><span style="color:#032F62;">"0 0 20 20"</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">xmlns</span><span style="color:#24292E;">=</span><span style="color:#032F62;">"http://www.w3.org/2000/svg"</span><span style="color:#24292E;">></span></span>
|
||
<span class="line"><span style="color:#24292E;"> <</span><span style="color:#22863A;">path</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">clip-rule</span><span style="color:#24292E;">=</span><span style="color:#032F62;">"evenodd"</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">d</span><span style="color:#24292E;">=</span><span style="color:#032F62;">"M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z"</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">fill-rule</span><span style="color:#24292E;">=</span><span style="color:#032F62;">"evenodd"</span><span style="color:#24292E;"> /></span></span>
|
||
<span class="line"><span style="color:#24292E;"> </</span><span style="color:#22863A;">svg</span><span style="color:#24292E;">></span></span>
|
||
<span class="line"><span style="color:#24292E;"> </</span><span style="color:#22863A;">template</span><span style="color:#24292E;">></span></span>
|
||
<span class="line"><span style="color:#24292E;"> </</span><span style="color:#22863A;">fwb-button</span><span style="color:#24292E;">></span></span>
|
||
<span class="line"><span style="color:#24292E;"></</span><span style="color:#22863A;">template</span><span style="color:#24292E;">></span></span>
|
||
<span class="line"></span>
|
||
<span class="line"><span style="color:#24292E;"><</span><span style="color:#22863A;">script</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">setup</span><span style="color:#24292E;">></span></span>
|
||
<span class="line"><span style="color:#D73A49;">import</span><span style="color:#24292E;"> { FwbButton } </span><span style="color:#D73A49;">from</span><span style="color:#24292E;"> </span><span style="color:#032F62;">'flowbite-vue'</span></span>
|
||
<span class="line"><span style="color:#24292E;"></</span><span style="color:#22863A;">script</span><span style="color:#24292E;">></span></span></code></pre></div><h2 id="button-api" tabindex="-1">Button API <a class="header-anchor" href="#button-api" aria-label="Permalink to "Button API""></a></h2><h3 id="props" tabindex="-1">Props <a class="header-anchor" href="#props" aria-label="Permalink to "Props""></a></h3><table><thead><tr><th>Name</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td>color</td><td>String</td><td><code>default</code>, <code>alternative</code>, <code>dark</code>, <code>light</code>, <code>green</code>, <code>red</code>, <code>yellow</code>, <code>purple</code>, <code>pink</code>, <code>blue</code></td><td><code>default</code></td></tr><tr><td>disabled</td><td>Boolean</td><td></td><td><code>false</code></td></tr><tr><td>gradient</td><td>String</td><td>monochrome:<br><code>blue</code>, <code>green</code>, <code>cyan</code>, <code>teal</code>, <code>lime</code>, <code>red</code>, <code>pink</code>, <code>purple</code><br>duotone:<br><code>purple-blue</code>, <code>cyan-blue</code>, <code>green-blue</code>, <code>purple-pink</code>, <code>pink-orange</code>, <code>teal-lime</code>, <code>red-yellow</code></td><td><code>null</code></td></tr><tr><td>href</td><td>String</td><td></td><td><code>''</code></td></tr><tr><td>loading</td><td>Boolean</td><td></td><td><code>false</code></td></tr><tr><td>loading-position</td><td>String</td><td><code>prefix</code>, <code>suffix</code></td><td><code>prefix</code></td></tr><tr><td>outline</td><td>Boolean</td><td></td><td><code>false</code></td></tr><tr><td>pill</td><td>Boolean</td><td></td><td><code>false</code></td></tr><tr><td>shadow</td><td>String</td><td><code>blue</code>, <code>green</code>, <code>cyan</code>, <code>teal</code>, <code>lime</code>, <code>red</code>, <code>pink</code>, <code>purple</code></td><td><code>null</code></td></tr><tr><td>size</td><td>String</td><td><code>xs</code>, <code>sm</code>, <code>md</code>, <code>lg</code>, <code>xl</code></td><td><code>md</code></td></tr><tr><td>square</td><td>Boolean</td><td></td><td><code>false</code></td></tr><tr><td>tag</td><td>String</td><td></td><td><code>a</code></td></tr></tbody></table><div class="language- vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki github-dark vp-code-dark"><code><span class="line"><span style="color:#e1e4e8;"></span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#24292e;"></span></span></code></pre></div></div></div></main><footer class="VPDocFooter" data-v-6b87e69f data-v-ef5dee53><!--[--><!--]--><!----><nav class="prev-next" data-v-ef5dee53><div class="pager" data-v-ef5dee53><a class="pager-link prev" href="/components/breadcrumb" data-v-ef5dee53><span class="desc" data-v-ef5dee53>Previous page</span><span class="title" data-v-ef5dee53>Breadcrumb</span></a></div><div class="pager" data-v-ef5dee53><a class="pager-link next" href="/components/button-group" data-v-ef5dee53><span class="desc" data-v-ef5dee53>Next page</span><span class="title" data-v-ef5dee53>Button Group</span></a></div></nav></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><footer class="VPFooter has-sidebar" data-v-1919c326 data-v-e03eb2e1><div class="container" data-v-e03eb2e1><p class="message" data-v-e03eb2e1>Released under the MIT License.</p><p class="copyright" data-v-e03eb2e1>Copyright © 2023 Flowbite™</p></div></footer><!--[--><!--]--></div></div>
|
||
<script>window.__VP_HASH_MAP__=JSON.parse("{\"components_playground_playground.md\":\"69e01489\",\"components_accordion.md\":\"3f1ef99a\",\"components_alert.md\":\"255adf89\",\"components_avatar.md\":\"8db14583\",\"components_badge.md\":\"ffb613ab\",\"components_button-group.md\":\"39681d07\",\"components_breadcrumb.md\":\"e0d619ba\",\"components_card.md\":\"8594cbd9\",\"components_carousel.md\":\"8090985f\",\"components_checkbox.md\":\"ed60323a\",\"components_dropdown.md\":\"3551a089\",\"components_fileinput.md\":\"4013b935\",\"components_flowbitethemable_flowbitethemable.md\":\"696f24eb\",\"components_button.md\":\"39f535da\",\"components_heading.md\":\"e8348a42\",\"components_image.md\":\"e097f963\",\"components_input.md\":\"455fa912\",\"components_link.md\":\"ae3cc9d2\",\"components_footer.md\":\"0590fa94\",\"components_jumbotron.md\":\"7e83799d\",\"components_modal.md\":\"48165202\",\"components_list-group.md\":\"e9bebe16\",\"components_paragraph.md\":\"28aca1b3\",\"components_progress.md\":\"af9b4180\",\"components_pagination.md\":\"c228117a\",\"components_navbar.md\":\"e4dfa350\",\"components_range.md\":\"9320c947\",\"components_rating.md\":\"1bf1f257\",\"components_radio.md\":\"b618a9a7\",\"components_select.md\":\"654d7864\",\"components_spinner.md\":\"37ac3cc2\",\"components_table.md\":\"a270deef\",\"components_textarea.md\":\"b787a2ff\",\"components_tabs.md\":\"b0c6e412\",\"components_sidebar.md\":\"8fae9f09\",\"components_toastprovider_toastprovider.md\":\"9ae8b914\",\"components_toast.md\":\"552e0ecb\",\"index.md\":\"5a24cb33\",\"components_toggle.md\":\"05a55234\",\"pages_getting-started.md\":\"0e48f016\",\"components_timeline.md\":\"0bc3fcd0\",\"components_tooltip.md\":\"d14c95e6\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"Flowbite Vue 3\",\"description\":\"A VitePress site\",\"base\":\"/\",\"head\":[],\"appearance\":true,\"themeConfig\":{\"sidebar\":[{\"items\":[{\"text\":\"Home\",\"link\":\"/\"},{\"text\":\"Quickstart\",\"link\":\"/pages/getting-started\"}]},{\"text\":\"Components\",\"collapsible\":true,\"items\":[{\"text\":\"Accordion\",\"link\":\"/components/accordion\"},{\"text\":\"Alert\",\"link\":\"/components/alert\"},{\"text\":\"Avatar\",\"link\":\"/components/avatar\"},{\"text\":\"Badge\",\"link\":\"/components/badge\"},{\"text\":\"Breadcrumb\",\"link\":\"/components/breadcrumb\"},{\"text\":\"Button\",\"link\":\"/components/button\"},{\"text\":\"Button Group\",\"link\":\"/components/button-group\"},{\"text\":\"Card\",\"link\":\"/components/card.md\"},{\"text\":\"Carousel\",\"link\":\"/components/carousel\"},{\"text\":\"Dropdown\",\"link\":\"/components/dropdown\"},{\"text\":\"Jumbotron\",\"link\":\"/components/jumbotron\"},{\"text\":\"ListGroup\",\"link\":\"/components/list-group\"},{\"text\":\"Pagination\",\"link\":\"/components/pagination\"},{\"text\":\"Progress\",\"link\":\"/components/progress\"},{\"text\":\"Rating\",\"link\":\"/components/rating\"},{\"text\":\"Spinner\",\"link\":\"/components/spinner\"},{\"text\":\"Table\",\"link\":\"/components/table\"},{\"text\":\"Tabs\",\"link\":\"/components/tabs\"},{\"text\":\"Timeline\",\"link\":\"/components/timeline\"},{\"text\":\"Toast\",\"link\":\"/components/toast\"},{\"text\":\"Tooltip\",\"link\":\"/components/tooltip\"},{\"text\":\"Modal\",\"link\":\"/components/modal\"},{\"text\":\"Navbar\",\"link\":\"/components/navbar\"},{\"text\":\"Footer\",\"link\":\"/components/footer\"},{\"text\":\"Sidebar\",\"link\":\"/components/sidebar\"}]},{\"text\":\"Form\",\"collapsible\":true,\"items\":[{\"text\":\"Input\",\"link\":\"/components/input\"},{\"text\":\"File Input\",\"link\":\"/components/fileInput\"},{\"text\":\"Select\",\"link\":\"/components/select\"},{\"text\":\"Textarea\",\"link\":\"/components/textarea\"},{\"text\":\"Checkbox\",\"link\":\"/components/checkbox\"},{\"text\":\"Radio\",\"link\":\"/components/radio\"},{\"text\":\"Toggle\",\"link\":\"/components/toggle\"},{\"text\":\"Range\",\"link\":\"/components/range\"}]},{\"text\":\"Typography\",\"collapsible\":true,\"items\":[{\"text\":\"Heading\",\"link\":\"/components/heading\"},{\"text\":\"Paragraph\",\"link\":\"/components/paragraph\"},{\"text\":\"Image\",\"link\":\"/components/image\"},{\"text\":\"Link\",\"link\":\"/components/link\"}]},{\"text\":\"Utils\",\"collapsible\":true,\"items\":[{\"text\":\"Flowbite Themable\",\"link\":\"/components/flowbiteThemable/flowbiteThemable.md\"},{\"text\":\"Toast Provider\",\"link\":\"/components/toastProvider/toastProvider.md\"}]}],\"logo\":\"/assets/logo.svg\",\"socialLinks\":[{\"icon\":\"github\",\"link\":\"https://github.com/themesberg/flowbite-vue\"},{\"icon\":\"discord\",\"link\":\"https://discord.gg/4eeurUVvTy\"}],\"footer\":{\"message\":\"Released under the MIT License.\",\"copyright\":\"Copyright © 2023 Flowbite™\"}},\"locales\":{},\"scrollOffset\":90,\"cleanUrls\":true}");</script>
|
||
|
||
</body>
|
||
</html> |