use-theme-editor

Version:

Zero configuration CSS variables based theme editor

27 lines (25 loc) • 98.1 kB

HTML

<!DOCTYPE html>  <html lang="en" data-theme="light"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta http-equiv="content-security-policy" content=""><title>Button — Tailwind CSS Components</title><link rel="preconnect" href="https://fonts.googleapis.com/"><link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin=""><link href="./Button — Tailwind CSS Components_files/css2" rel="stylesheet"> <link rel="stylesheet" href="./Button — Tailwind CSS Components_files/vendor-faf725f4.css"> <link rel="stylesheet" href="./Button — Tailwind CSS Components_files/__layout.svelte-b4e1044c.css"> <link rel="stylesheet" href="./Button — Tailwind CSS Components_files/Ads-898681a7.css"> <link rel="stylesheet" href="./Button — Tailwind CSS Components_files/actions-779d2a81.css"> <link rel="modulepreload" href="https://daisyui.com/_app/start-49e11f68.js"> <link rel="modulepreload" href="https://daisyui.com/_app/chunks/vendor-c5cb7521.js"> <link rel="modulepreload" href="https://daisyui.com/_app/chunks/preload-helper-ec9aa979.js"> <link rel="modulepreload" href="https://daisyui.com/_app/chunks/singletons-a6a7384f.js"> <link rel="modulepreload" href="https://daisyui.com/_app/pages/__layout.svelte-366d85b1.js"> <link rel="modulepreload" href="https://daisyui.com/_app/chunks/index-1881179b.js"> <link rel="modulepreload" href="https://daisyui.com/_app/chunks/stores-596c3501.js"> <link rel="modulepreload" href="https://daisyui.com/_app/pages/components/mockup-window.svelte.md-d652d55a.js"> <link rel="modulepreload" href="https://daisyui.com/_app/chunks/_markdown-36bf27e1.js"> <link rel="modulepreload" href="https://daisyui.com/_app/chunks/Ads-e23e02ac.js"> <link rel="modulepreload" href="https://daisyui.com/_app/chunks/SEO-3b2b5e19.js"> <link rel="modulepreload" href="https://daisyui.com/_app/chunks/actions-f36af844.js"> <link rel="modulepreload" href="https://daisyui.com/_app/chunks/Translate-e6a2be0a.js"> </head> <body tabindex="-1"> <div class="bg-base-100 drawer drawer-mobile"><input id="drawer" type="checkbox" class="drawer-toggle"> <div class="drawer-content" style="scroll-behavior: smooth; scroll-padding-top: 5rem;"><div class="sticky top-0 z-30 flex h-16 w-full justify-center bg-opacity-90 backdrop-blur transition-all duration-100 bg-base-100 text-base-content shadow-sm"><nav class="navbar w-full"><div class="flex flex-1 md:gap-1 lg:gap-2"><span class="tooltip tooltip-bottom before:text-xs before:content-[attr(data-tip)]" data-tip="Menu"><label for="drawer" class="btn btn-square btn-ghost drawer-button lg:hidden"><svg width="20" height="20" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="inline-block h-5 w-5 stroke-current md:h-6 md:w-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path></svg></label></span> <div class="flex items-center gap-2 lg:hidden"><a href="https://daisyui.com/" aria-current="page" aria-label="Homepage" class="flex-0 btn btn-ghost px-2 "><div class="font-title text-primary inline-flex text-lg transition-all duration-200 md:text-3xl"><span class="lowercase text-primary">daisy</span> <span class="uppercase text-base-content">UI</span></div></a> <a href="https://daisyui.com/docs/changelog" class="link link-hover font-mono text-xs text-opacity-50 "><div data-tip="Changelog" class="tooltip tooltip-bottom">2.31.0</div></a></div> <div class="hidden w-full max-w-sm lg:flex"><label class="searchbox relative mx-3 w-full"><svg class="text-base-content pointer-events-none absolute z-10 my-3 ml-2 stroke-current opacity-60 " width="16" height="16" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg> <div data-svelte-typeahead="" role="combobox" aria-haspopup="listbox" aria-owns="typeahead-0.po6mj0c9fw-listbox" aria-expanded="false" id="typeahead-0.po6mj0c9fw-typeahead" class="svelte-6c74g2"><form data-svelte-search=""><label id="typeahead-0.po6mj0c9fw-label" for="typeahead-0.po6mj0c9fw" class="svelte-wqugyy">Search</label> <input name="search" type="search" placeholder="Search…" autocomplete="off" spellcheck="false" id="typeahead-0.po6mj0c9fw" aria-autocomplete="list" aria-controls="typeahead-0.po6mj0c9fw-listbox" aria-labelledby="typeahead-0.po6mj0c9fw-label" class="svelte-wqugyy"></form> <ul role="listbox" aria-labelledby="typeahead-0.po6mj0c9fw-label" id="typeahead-0.po6mj0c9fw-listbox" class="svelte-6c74g2 svelte-typeahead-list"> </ul></div> <div class="pointer-events-none absolute right-8 top-2 gap-1 opacity-50 hidden lg:flex"><kbd class="kbd kbd-sm">ctrl</kbd> <kbd class="kbd kbd-sm">K</kbd></div></label></div></div> <div class="flex-0"><div class="items-center flex-none hidden "><a sveltekit:prefetch="" href="https://daisyui.com/components" class="btn btn-ghost drawer-button normal-case"><svg width="20" height="20" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="inline-block h-6 w-6 fill-current md:mr-2"><path d="M6.5,22 C4.01471863,22 2,19.9852814 2,17.5 C2,15.0147186 4.01471863,13 6.5,13 C8.98528137,13 11,15.0147186 11,17.5 C11,19.9852814 8.98528137,22 6.5,22 Z M17.5,22 C15.0147186,22 13,19.9852814 13,17.5 C13,15.0147186 15.0147186,13 17.5,13 C19.9852814,13 22,15.0147186 22,17.5 C22,19.9852814 19.9852814,22 17.5,22 Z M6.5,11 C4.01471863,11 2,8.98528137 2,6.5 C2,4.01471863 4.01471863,2 6.5,2 C8.98528137,2 11,4.01471863 11,6.5 C11,8.98528137 8.98528137,11 6.5,11 Z M17.5,11 C15.0147186,11 13,8.98528137 13,6.5 C13,4.01471863 15.0147186,2 17.5,2 C19.9852814,2 22,4.01471863 22,6.5 C22,8.98528137 19.9852814,11 17.5,11 Z M17.5,9 C18.8807119,9 20,7.88071187 20,6.5 C20,5.11928813 18.8807119,4 17.5,4 C16.1192881,4 15,5.11928813 15,6.5 C15,7.88071187 16.1192881,9 17.5,9 Z M6.5,9 C7.88071187,9 9,7.88071187 9,6.5 C9,5.11928813 7.88071187,4 6.5,4 C5.11928813,4 4,5.11928813 4,6.5 C4,7.88071187 5.11928813,9 6.5,9 Z M17.5,20 C18.8807119,20 20,18.8807119 20,17.5 C20,16.1192881 18.8807119,15 17.5,15 C16.1192881,15 15,16.1192881 15,17.5 C15,18.8807119 16.1192881,20 17.5,20 Z M6.5,20 C7.88071187,20 9,18.8807119 9,17.5 C9,16.1192881 7.88071187,15 6.5,15 C5.11928813,15 4,16.1192881 4,17.5 C4,18.8807119 5.11928813,20 6.5,20 Z"></path></svg> Components</a></div> <div title="Change Theme" class="dropdown dropdown-end "><div tabindex="0" class="btn gap-1 normal-case btn-ghost"><svg width="20" height="20" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="inline-block h-5 w-5 stroke-current md:h-6 md:w-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 21a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4zm0 0h12a2 2 0 002-2v-4a2 2 0 00-2-2h-2.343M11 7.343l1.657-1.657a2 2 0 012.828 0l2.829 2.829a2 2 0 010 2.828l-8.486 8.485M7 17h.01"></path></svg> <span class="hidden md:inline">Theme</span> <svg width="12px" height="12px" class="ml-1 hidden h-3 w-3 fill-current opacity-60 sm:inline-block" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2048 2048"><path d="M1799 349l242 241-1017 1017L7 590l242-241 775 775 775-775z"></path></svg></div> <div class="dropdown-content bg-base-200 text-base-content rounded-t-box rounded-b-box top-px max-h-96 h-[70vh] w-52 overflow-y-auto shadow-2xl mt-16"><div class="grid grid-cols-1 gap-3 p-3" tabindex="0"><div class="outline-base-content overflow-hidden rounded-lg outline-2 outline-offset-2 outline" data-set-theme="light" data-act-class="outline"><div data-theme="light" class="bg-base-100 text-base-content w-full cursor-pointer font-sans"><div class="grid grid-cols-5 grid-rows-3"><div class="col-span-5 row-span-3 row-start-1 flex gap-1 py-3 px-4"><div class="flex-grow text-sm font-bold">light</div> <div class="flex flex-shrink-0 flex-wrap gap-1"><div class="bg-primary w-2 rounded"></div> <div class="bg-secondary w-2 rounded"></div> <div class="bg-accent w-2 rounded"></div> <div class="bg-neutral w-2 rounded"></div></div></div></div></div></div><div class="outline-base-content overflow-hidden rounded-lg outline-2 outline-offset-2" data-set-theme="dark" data-act-class="outline"><div data-theme="dark" class="bg-base-100 text-base-content w-full cursor-pointer font-sans"><div class="grid grid-cols-5 grid-rows-3"><div class="col-span-5 row-span-3 row-start-1 flex gap-1 py-3 px-4"><div class="flex-grow text-sm font-bold">dark</div> <div class="flex flex-shrink-0 flex-wrap gap-1"><div class="bg-primary w-2 rounded"></div> <div class="bg-secondary w-2 rounded"></div> <div class="bg-accent w-2 rounded"></div> <div class="bg-neutral w-2 rounded"></div></div></div></div></div></div><div class="outline-base-content overflow-hidden rounded-lg outline-2 outline-offset-2" data-set-theme="cupcake" data-act-class="outline"><div data-theme="cupcake" class="bg-base-100 text-base-content w-full cursor-pointer font-sans"><div class="grid grid-cols-5 grid-rows-3"><div class="col-span-5 row-span-3 row-start-1 flex gap-1 py-3 px-4"><div class="flex-grow text-sm font-bold">cupcake</div> <div class="flex flex-shrink-0 flex-wrap gap-1"><div class="bg-primary w-2 rounded"></div> <div class="bg-secondary w-2 rounded"></div> <div class="bg-accent w-2 rounded"></div> <div class="bg-neutral w-2 rounded"></div></div></div></div></div></div><div class="outline-base-content overflow-hidden rounded-lg outline-2 outline-offset-2" data-set-theme="bumblebee" data-act-class="outline"><div data-theme="bumblebee" class="bg-base-100 text-base-content w-full cursor-pointer font-sans"><div class="grid grid-cols-5 grid-rows-3"><div class="col-span-5 row-span-3 row-start-1 flex gap-1 py-3 px-4"><div class="flex-grow text-sm font-bold">bumblebee</div> <div class="flex flex-shrink-0 flex-wrap gap-1"><div class="bg-primary w-2 rounded"></div> <div class="bg-secondary w-2 rounded"></div> <div class="bg-accent w-2 rounded"></div> <div class="bg-neutral w-2 rounded"></div></div></div></div></div></div><div class="outline-base-content overflow-hidden rounded-lg outline-2 outline-offset-2" data-set-theme="emerald" data-act-class="outline"><div data-theme="emerald" class="bg-base-100 text-base-content w-full cursor-pointer font-sans"><div class="grid grid-cols-5 grid-rows-3"><div class="col-span-5 row-span-3 row-start-1 flex gap-1 py-3 px-4"><div class="flex-grow text-sm font-bold">emerald</div> <div class="flex flex-shrink-0 flex-wrap gap-1"><div class="bg-primary w-2 rounded"></div> <div class="bg-secondary w-2 rounded"></div> <div class="bg-accent w-2 rounded"></div> <div class="bg-neutral w-2 rounded"></div></div></div></div></div></div><div class="outline-base-content overflow-hidden rounded-lg outline-2 outline-offset-2" data-set-theme="corporate" data-act-class="outline"><div data-theme="corporate" class="bg-base-100 text-base-content w-full cursor-pointer font-sans"><div class="grid grid-cols-5 grid-rows-3"><div class="col-span-5 row-span-3 row-start-1 flex gap-1 py-3 px-4"><div class="flex-grow text-sm font-bold">corporate</div> <div class="flex flex-shrink-0 flex-wrap gap-1"><div class="bg-primary w-2 rounded"></div> <div class="bg-secondary w-2 rounded"></div> <div class="bg-accent w-2 rounded"></div> <div class="bg-neutral w-2 rounded"></div></div></div></div></div></div><div class="outline-base-content overflow-hidden rounded-lg outline-2 outline-offset-2" data-set-theme="synthwave" data-act-class="outline"><div data-theme="synthwave" class="bg-base-100 text-base-content w-full cursor-pointer font-sans"><div class="grid grid-cols-5 grid-rows-3"><div class="col-span-5 row-span-3 row-start-1 flex gap-1 py-3 px-4"><div class="flex-grow text-sm font-bold">synthwave</div> <div class="flex flex-shrink-0 flex-wrap gap-1"><div class="bg-primary w-2 rounded"></div> <div class="bg-secondary w-2 rounded"></div> <div class="bg-accent w-2 rounded"></div> <div class="bg-neutral w-2 rounded"></div></div></div></div></div></div><div class="outline-base-content overflow-hidden rounded-lg outline-2 outline-offset-2" data-set-theme="retro" data-act-class="outline"><div data-theme="retro" class="bg-base-100 text-base-content w-full cursor-pointer font-sans"><div class="grid grid-cols-5 grid-rows-3"><div class="col-span-5 row-span-3 row-start-1 flex gap-1 py-3 px-4"><div class="flex-grow text-sm font-bold">retro</div> <div class="flex flex-shrink-0 flex-wrap gap-1"><div class="bg-primary w-2 rounded"></div> <div class="bg-secondary w-2 rounded"></div> <div class="bg-accent w-2 rounded"></div> <div class="bg-neutral w-2 rounded"></div></div></div></div></div></div><div class="outline-base-content overflow-hidden rounded-lg outline-2 outline-offset-2" data-set-theme="cyberpunk" data-act-class="outline"><div data-theme="cyberpunk" class="bg-base-100 text-base-content w-full cursor-pointer font-sans"><div class="grid grid-cols-5 grid-rows-3"><div class="col-span-5 row-span-3 row-start-1 flex gap-1 py-3 px-4"><div class="flex-grow text-sm font-bold">cyberpunk</div> <div class="flex flex-shrink-0 flex-wrap gap-1"><div class="bg-primary w-2 rounded"></div> <div class="bg-secondary w-2 rounded"></div> <div class="bg-accent w-2 rounded"></div> <div class="bg-neutral w-2 rounded"></div></div></div></div></div></div><div class="outline-base-content overflow-hidden rounded-lg outline-2 outline-offset-2" data-set-theme="valentine" data-act-class="outline"><div data-theme="valentine" class="bg-base-100 text-base-content w-full cursor-pointer font-sans"><div class="grid grid-cols-5 grid-rows-3"><div class="col-span-5 row-span-3 row-start-1 flex gap-1 py-3 px-4"><div class="flex-grow text-sm font-bold">valentine</div> <div class="flex flex-shrink-0 flex-wrap gap-1"><div class="bg-primary w-2 rounded"></div> <div class="bg-secondary w-2 rounded"></div> <div class="bg-accent w-2 rounded"></div> <div class="bg-neutral w-2 rounded"></div></div></div></div></div></div><div class="outline-base-content overflow-hidden rounded-lg outline-2 outline-offset-2" data-set-theme="halloween" data-act-class="outline"><div data-theme="halloween" class="bg-base-100 text-base-content w-full cursor-pointer font-sans"><div class="grid grid-cols-5 grid-rows-3"><div class="col-span-5 row-span-3 row-start-1 flex gap-1 py-3 px-4"><div class="flex-grow text-sm font-bold">halloween</div> <div class="flex flex-shrink-0 flex-wrap gap-1"><div class="bg-primary w-2 rounded"></div> <div class="bg-secondary w-2 rounded"></div> <div class="bg-accent w-2 rounded"></div> <div class="bg-neutral w-2 rounded"></div></div></div></div></div></div><div class="outline-base-content overflow-hidden rounded-lg outline-2 outline-offset-2" data-set-theme="garden" data-act-class="outline"><div data-theme="garden" class="bg-base-100 text-base-content w-full cursor-pointer font-sans"><div class="grid grid-cols-5 grid-rows-3"><div class="col-span-5 row-span-3 row-start-1 flex gap-1 py-3 px-4"><div class="flex-grow text-sm font-bold">garden</div> <div class="flex flex-shrink-0 flex-wrap gap-1"><div class="bg-primary w-2 rounded"></div> <div class="bg-secondary w-2 rounded"></div> <div class="bg-accent w-2 rounded"></div> <div class="bg-neutral w-2 rounded"></div></div></div></div></div></div><div class="outline-base-content overflow-hidden rounded-lg outline-2 outline-offset-2" data-set-theme="forest" data-act-class="outline"><div data-theme="forest" class="bg-base-100 text-base-content w-full cursor-pointer font-sans"><div class="grid grid-cols-5 grid-rows-3"><div class="col-span-5 row-span-3 row-start-1 flex gap-1 py-3 px-4"><div class="flex-grow text-sm font-bold">forest</div> <div class="flex flex-shrink-0 flex-wrap gap-1"><div class="bg-primary w-2 rounded"></div> <div class="bg-secondary w-2 rounded"></div> <div class="bg-accent w-2 rounded"></div> <div class="bg-neutral w-2 rounded"></div></div></div></div></div></div><div class="outline-base-content overflow-hidden rounded-lg outline-2 outline-offset-2" data-set-theme="aqua" data-act-class="outline"><div data-theme="aqua" class="bg-base-100 text-base-content w-full cursor-pointer font-sans"><div class="grid grid-cols-5 grid-rows-3"><div class="col-span-5 row-span-3 row-start-1 flex gap-1 py-3 px-4"><div class="flex-grow text-sm font-bold">aqua</div> <div class="flex flex-shrink-0 flex-wrap gap-1"><div class="bg-primary w-2 rounded"></div> <div class="bg-secondary w-2 rounded"></div> <div class="bg-accent w-2 rounded"></div> <div class="bg-neutral w-2 rounded"></div></div></div></div></div></div><div class="outline-base-content overflow-hidden rounded-lg outline-2 outline-offset-2" data-set-theme="lofi" data-act-class="outline"><div data-theme="lofi" class="bg-base-100 text-base-content w-full cursor-pointer font-sans"><div class="grid grid-cols-5 grid-rows-3"><div class="col-span-5 row-span-3 row-start-1 flex gap-1 py-3 px-4"><div class="flex-grow text-sm font-bold">lofi</div> <div class="flex flex-shrink-0 flex-wrap gap-1"><div class="bg-primary w-2 rounded"></div> <div class="bg-secondary w-2 rounded"></div> <div class="bg-accent w-2 rounded"></div> <div class="bg-neutral w-2 rounded"></div></div></div></div></div></div><div class="outline-base-content overflow-hidden rounded-lg outline-2 outline-offset-2" data-set-theme="pastel" data-act-class="outline"><div data-theme="pastel" class="bg-base-100 text-base-content w-full cursor-pointer font-sans"><div class="grid grid-cols-5 grid-rows-3"><div class="col-span-5 row-span-3 row-start-1 flex gap-1 py-3 px-4"><div class="flex-grow text-sm font-bold">pastel</div> <div class="flex flex-shrink-0 flex-wrap gap-1"><div class="bg-primary w-2 rounded"></div> <div class="bg-secondary w-2 rounded"></div> <div class="bg-accent w-2 rounded"></div> <div class="bg-neutral w-2 rounded"></div></div></div></div></div></div><div class="outline-base-content overflow-hidden rounded-lg outline-2 outline-offset-2" data-set-theme="fantasy" data-act-class="outline"><div data-theme="fantasy" class="bg-base-100 text-base-content w-full cursor-pointer font-sans"><div class="grid grid-cols-5 grid-rows-3"><div class="col-span-5 row-span-3 row-start-1 flex gap-1 py-3 px-4"><div class="flex-grow text-sm font-bold">fantasy</div> <div class="flex flex-shrink-0 flex-wrap gap-1"><div class="bg-primary w-2 rounded"></div> <div class="bg-secondary w-2 rounded"></div> <div class="bg-accent w-2 rounded"></div> <div class="bg-neutral w-2 rounded"></div></div></div></div></div></div><div class="outline-base-content overflow-hidden rounded-lg outline-2 outline-offset-2" data-set-theme="wireframe" data-act-class="outline"><div data-theme="wireframe" class="bg-base-100 text-base-content w-full cursor-pointer font-sans"><div class="grid grid-cols-5 grid-rows-3"><div class="col-span-5 row-span-3 row-start-1 flex gap-1 py-3 px-4"><div class="flex-grow text-sm font-bold">wireframe</div> <div class="flex flex-shrink-0 flex-wrap gap-1"><div class="bg-primary w-2 rounded"></div> <div class="bg-secondary w-2 rounded"></div> <div class="bg-accent w-2 rounded"></div> <div class="bg-neutral w-2 rounded"></div></div></div></div></div></div><div class="outline-base-content overflow-hidden rounded-lg outline-2 outline-offset-2" data-set-theme="black" data-act-class="outline"><div data-theme="black" class="bg-base-100 text-base-content w-full cursor-pointer font-sans"><div class="grid grid-cols-5 grid-rows-3"><div class="col-span-5 row-span-3 row-start-1 flex gap-1 py-3 px-4"><div class="flex-grow text-sm font-bold">black</div> <div class="flex flex-shrink-0 flex-wrap gap-1"><div class="bg-primary w-2 rounded"></div> <div class="bg-secondary w-2 rounded"></div> <div class="bg-accent w-2 rounded"></div> <div class="bg-neutral w-2 rounded"></div></div></div></div></div></div><div class="outline-base-content overflow-hidden rounded-lg outline-2 outline-offset-2" data-set-theme="luxury" data-act-class="outline"><div data-theme="luxury" class="bg-base-100 text-base-content w-full cursor-pointer font-sans"><div class="grid grid-cols-5 grid-rows-3"><div class="col-span-5 row-span-3 row-start-1 flex gap-1 py-3 px-4"><div class="flex-grow text-sm font-bold">luxury</div> <div class="flex flex-shrink-0 flex-wrap gap-1"><div class="bg-primary w-2 rounded"></div> <div class="bg-secondary w-2 rounded"></div> <div class="bg-accent w-2 rounded"></div> <div class="bg-neutral w-2 rounded"></div></div></div></div></div></div><div class="outline-base-content overflow-hidden rounded-lg outline-2 outline-offset-2" data-set-theme="dracula" data-act-class="outline"><div data-theme="dracula" class="bg-base-100 text-base-content w-full cursor-pointer font-sans"><div class="grid grid-cols-5 grid-rows-3"><div class="col-span-5 row-span-3 row-start-1 flex gap-1 py-3 px-4"><div class="flex-grow text-sm font-bold">dracula</div> <div class="flex flex-shrink-0 flex-wrap gap-1"><div class="bg-primary w-2 rounded"></div> <div class="bg-secondary w-2 rounded"></div> <div class="bg-accent w-2 rounded"></div> <div class="bg-neutral w-2 rounded"></div></div></div></div></div></div><div class="outline-base-content overflow-hidden rounded-lg outline-2 outline-offset-2" data-set-theme="cmyk" data-act-class="outline"><div data-theme="cmyk" class="bg-base-100 text-base-content w-full cursor-pointer font-sans"><div class="grid grid-cols-5 grid-rows-3"><div class="col-span-5 row-span-3 row-start-1 flex gap-1 py-3 px-4"><div class="flex-grow text-sm font-bold">cmyk</div> <div class="flex flex-shrink-0 flex-wrap gap-1"><div class="bg-primary w-2 rounded"></div> <div class="bg-secondary w-2 rounded"></div> <div class="bg-accent w-2 rounded"></div> <div class="bg-neutral w-2 rounded"></div></div></div></div></div></div><div class="outline-base-content overflow-hidden rounded-lg outline-2 outline-offset-2" data-set-theme="autumn" data-act-class="outline"><div data-theme="autumn" class="bg-base-100 text-base-content w-full cursor-pointer font-sans"><div class="grid grid-cols-5 grid-rows-3"><div class="col-span-5 row-span-3 row-start-1 flex gap-1 py-3 px-4"><div class="flex-grow text-sm font-bold">autumn</div> <div class="flex flex-shrink-0 flex-wrap gap-1"><div class="bg-primary w-2 rounded"></div> <div class="bg-secondary w-2 rounded"></div> <div class="bg-accent w-2 rounded"></div> <div class="bg-neutral w-2 rounded"></div></div></div></div></div></div><div class="outline-base-content overflow-hidden rounded-lg outline-2 outline-offset-2" data-set-theme="business" data-act-class="outline"><div data-theme="business" class="bg-base-100 text-base-content w-full cursor-pointer font-sans"><div class="grid grid-cols-5 grid-rows-3"><div class="col-span-5 row-span-3 row-start-1 flex gap-1 py-3 px-4"><div class="flex-grow text-sm font-bold">business</div> <div class="flex flex-shrink-0 flex-wrap gap-1"><div class="bg-primary w-2 rounded"></div> <div class="bg-secondary w-2 rounded"></div> <div class="bg-accent w-2 rounded"></div> <div class="bg-neutral w-2 rounded"></div></div></div></div></div></div><div class="outline-base-content overflow-hidden rounded-lg outline-2 outline-offset-2" data-set-theme="acid" data-act-class="outline"><div data-theme="acid" class="bg-base-100 text-base-content w-full cursor-pointer font-sans"><div class="grid grid-cols-5 grid-rows-3"><div class="col-span-5 row-span-3 row-start-1 flex gap-1 py-3 px-4"><div class="flex-grow text-sm font-bold">acid</div> <div class="flex flex-shrink-0 flex-wrap gap-1"><div class="bg-primary w-2 rounded"></div> <div class="bg-secondary w-2 rounded"></div> <div class="bg-accent w-2 rounded"></div> <div class="bg-neutral w-2 rounded"></div></div></div></div></div></div><div class="outline-base-content overflow-hidden rounded-lg outline-2 outline-offset-2" data-set-theme="lemonade" data-act-class="outline"><div data-theme="lemonade" class="bg-base-100 text-base-content w-full cursor-pointer font-sans"><div class="grid grid-cols-5 grid-rows-3"><div class="col-span-5 row-span-3 row-start-1 flex gap-1 py-3 px-4"><div class="flex-grow text-sm font-bold">lemonade</div> <div class="flex flex-shrink-0 flex-wrap gap-1"><div class="bg-primary w-2 rounded"></div> <div class="bg-secondary w-2 rounded"></div> <div class="bg-accent w-2 rounded"></div> <div class="bg-neutral w-2 rounded"></div></div></div></div></div></div><div class="outline-base-content overflow-hidden rounded-lg outline-2 outline-offset-2" data-set-theme="night" data-act-class="outline"><div data-theme="night" class="bg-base-100 text-base-content w-full cursor-pointer font-sans"><div class="grid grid-cols-5 grid-rows-3"><div class="col-span-5 row-span-3 row-start-1 flex gap-1 py-3 px-4"><div class="flex-grow text-sm font-bold">night</div> <div class="flex flex-shrink-0 flex-wrap gap-1"><div class="bg-primary w-2 rounded"></div> <div class="bg-secondary w-2 rounded"></div> <div class="bg-accent w-2 rounded"></div> <div class="bg-neutral w-2 rounded"></div></div></div></div></div></div><div class="outline-base-content overflow-hidden rounded-lg outline-2 outline-offset-2" data-set-theme="coffee" data-act-class="outline"><div data-theme="coffee" class="bg-base-100 text-base-content w-full cursor-pointer font-sans"><div class="grid grid-cols-5 grid-rows-3"><div class="col-span-5 row-span-3 row-start-1 flex gap-1 py-3 px-4"><div class="flex-grow text-sm font-bold">coffee</div> <div class="flex flex-shrink-0 flex-wrap gap-1"><div class="bg-primary w-2 rounded"></div> <div class="bg-secondary w-2 rounded"></div> <div class="bg-accent w-2 rounded"></div> <div class="bg-neutral w-2 rounded"></div></div></div></div></div></div><div class="outline-base-content overflow-hidden rounded-lg outline-2 outline-offset-2" data-set-theme="winter" data-act-class="outline"><div data-theme="winter" class="bg-base-100 text-base-content w-full cursor-pointer font-sans"><div class="grid grid-cols-5 grid-rows-3"><div class="col-span-5 row-span-3 row-start-1 flex gap-1 py-3 px-4"><div class="flex-grow text-sm font-bold">winter</div> <div class="flex flex-shrink-0 flex-wrap gap-1"><div class="bg-primary w-2 rounded"></div> <div class="bg-secondary w-2 rounded"></div> <div class="bg-accent w-2 rounded"></div> <div class="bg-neutral w-2 rounded"></div></div></div></div></div></div> <a class="outline-base-content overflow-hidden rounded-lg" href="https://daisyui.com/theme-generator/"><div class="hover:bg-neutral hover:text-neutral-content w-full cursor-pointer font-sans"><div class="flex gap-2 p-3"><svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 fill-current" viewBox="0 0 512 512"><path d="M96,208H48a16,16,0,0,1,0-32H96a16,16,0,0,1,0,32Z"></path><line x1="90.25" y1="90.25" x2="124.19" y2="124.19"></line><path d="M124.19,140.19a15.91,15.91,0,0,1-11.31-4.69L78.93,101.56a16,16,0,0,1,22.63-22.63l33.94,33.95a16,16,0,0,1-11.31,27.31Z"></path><path d="M192,112a16,16,0,0,1-16-16V48a16,16,0,0,1,32,0V96A16,16,0,0,1,192,112Z"></path><line x1="293.89" y1="90.25" x2="259.95" y2="124.19"></line><path d="M260,140.19a16,16,0,0,1-11.31-27.31l33.94-33.95a16,16,0,0,1,22.63,22.63L271.27,135.5A15.94,15.94,0,0,1,260,140.19Z"></path><line x1="124.19" y1="259.95" x2="90.25" y2="293.89"></line><path d="M90.25,309.89a16,16,0,0,1-11.32-27.31l33.95-33.94a16,16,0,0,1,22.62,22.63l-33.94,33.94A16,16,0,0,1,90.25,309.89Z"></path><path d="M219,151.83a26,26,0,0,0-36.77,0l-30.43,30.43a26,26,0,0,0,0,36.77L208.76,276a4,4,0,0,0,5.66,0L276,214.42a4,4,0,0,0,0-5.66Z"></path><path d="M472.31,405.11,304.24,237a4,4,0,0,0-5.66,0L237,298.58a4,4,0,0,0,0,5.66L405.12,472.31a26,26,0,0,0,36.76,0l30.43-30.43h0A26,26,0,0,0,472.31,405.11Z"></path></svg> <div class="flex-grow text-sm font-bold">Make your theme!</div></div></div></a></div></div></div> <div title="Change Language" class="dropdown dropdown-end"><div tabindex="0" class="btn btn-ghost gap-1 normal-case"><svg class="inline-block h-4 w-4 fill-current md:h-5 md:w-5" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 512 512"><path d="M363,176,246,464h47.24l24.49-58h90.54l24.49,58H480ZM336.31,362,363,279.85,389.69,362Z"></path><path d="M272,320c-.25-.19-20.59-15.77-45.42-42.67,39.58-53.64,62-114.61,71.15-143.33H352V90H214V48H170V90H32v44H251.25c-9.52,26.95-27.05,69.5-53.79,108.36-32.68-43.44-47.14-75.88-47.33-76.22L143,152l-38,22,6.87,13.86c.89,1.56,17.19,37.9,54.71,86.57.92,1.21,1.85,2.39,2.78,3.57-49.72,56.86-89.15,79.09-89.66,79.47L64,368l23,36,19.3-11.47c2.2-1.67,41.33-24,92-80.78,24.52,26.28,43.22,40.83,44.3,41.67L255,362Z"></path></svg> <svg width="12px" height="12px" class="ml-1 hidden h-3 w-3 fill-current opacity-60 sm:inline-block" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2048 2048"><path d="M1799 349l242 241-1017 1017L7 590l242-241 775 775 775-775z"></path></svg></div> <div class="dropdown-content bg-base-200 text-base-content rounded-t-box rounded-b-box top-px mt-16 w-56 overflow-y-auto shadow-2xl"><ul class="menu menu-compact gap-1 p-3" tabindex="0"><li><button class="flex active"><img loading="lazy" width="20" height="20" alt="English" src="./Button — Tailwind CSS Components_files/1f1ec-1f1e7.svg"> <span class="flex flex-1 justify-between">English </span></button> </li><li><button class="flex"><img loading="lazy" width="20" height="20" alt="Español" src="./Button — Tailwind CSS Components_files/1f1ea-1f1f8.svg"> <span class="flex flex-1 justify-between">Español </span></button> </li><li><button class="flex"><img loading="lazy" width="20" height="20" alt="Français" src="./Button — Tailwind CSS Components_files/1f1eb-1f1f7.svg"> <span class="flex flex-1 justify-between">Français </span></button> </li><li><button class="flex"><img loading="lazy" width="20" height="20" alt="Indonesia" src="./Button — Tailwind CSS Components_files/1f1ee-1f1e9.svg"> <span class="flex flex-1 justify-between">Indonesia </span></button> </li><li><button class="flex"><img loading="lazy" width="20" height="20" alt="日本語" src="./Button — Tailwind CSS Components_files/1f1ef-1f1f5.svg"> <span class="flex flex-1 justify-between">日本語 </span></button> </li><li><button class="flex"><img loading="lazy" width="20" height="20" alt="한국어" src="./Button — Tailwind CSS Components_files/1f1f0-1f1f7.svg"> <span class="flex flex-1 justify-between">한국어 </span></button> </li><li><button class="flex"><img loading="lazy" width="20" height="20" alt="Português" src="./Button — Tailwind CSS Components_files/1f1f5-1f1f9.svg"> <span class="flex flex-1 justify-between">Português </span></button> </li><li><button class="flex"><img loading="lazy" width="20" height="20" alt="Русский" src="./Button — Tailwind CSS Components_files/1f1f7-1f1fa.svg"> <span class="flex flex-1 justify-between">Русский </span></button> </li><li><button class="flex"><img loading="lazy" width="20" height="20" alt="中文" src="./Button — Tailwind CSS Components_files/1f1e8-1f1f3.svg"> <span class="flex flex-1 justify-between">中文 </span></button> </li><li><button class="flex"><img loading="lazy" width="20" height="20" alt="繁體中文" src="./Button — Tailwind CSS Components_files/1f1f9-1f1fc.svg"> <span class="flex flex-1 justify-between">繁體中文 </span></button> </li></ul></div></div> <span class="tooltip tooltip-bottom before:text-xs before:content-[attr(data-tip)]" data-tip="GitHub"><div class="flex-none items-center"><a aria-label="Github" target="_blank" href="https://github.com/saadeghi/daisyui" rel="noopener" class="btn btn-ghost drawer-button btn-square normal-case"><svg width="20" height="20" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="inline-block h-5 w-5 fill-current md:h-6 md:w-6"><path d="M256,32C132.3,32,32,134.9,32,261.7c0,101.5,64.2,187.5,153.2,217.9a17.56,17.56,0,0,0,3.8.4c8.3,0,11.5-6.1,11.5-11.4,0-5.5-.2-19.9-.3-39.1a102.4,102.4,0,0,1-22.6,2.7c-43.1,0-52.9-33.5-52.9-33.5-10.2-26.5-24.9-33.6-24.9-33.6-19.5-13.7-.1-14.1,1.4-14.1h.1c22.5,2,34.3,23.8,34.3,23.8,11.2,19.6,26.2,25.1,39.6,25.1a63,63,0,0,0,25.6-6c2-14.8,7.8-24.9,14.2-30.7-49.7-5.8-102-25.5-102-113.5,0-25.1,8.7-45.6,23-61.6-2.3-5.8-10-29.2,2.2-60.8a18.64,18.64,0,0,1,5-.5c8.1,0,26.4,3.1,56.6,24.1a208.21,208.21,0,0,1,112.2,0c30.2-21,48.5-24.1,56.6-24.1a18.64,18.64,0,0,1,5,.5c12.2,31.6,4.5,55,2.2,60.8,14.3,16.1,23,36.6,23,61.6,0,88.2-52.4,107.6-102.3,113.3,8,7.1,15.2,21.1,15.2,42.5,0,30.7-.3,55.5-.3,63,0,5.4,3.1,11.5,11.4,11.5a19.35,19.35,0,0,0,4-.4C415.9,449.2,480,363.1,480,261.7,480,134.9,379.7,32,256,32Z"></path></svg></a></div></span></div></nav></div> <div class="p-6 pb-16"> <div class="flex flex-col-reverse justify-between gap-6 xl:flex-row"><div class="prose w-full max-w-4xl flex-grow"> <h1>Button</h1> <p>Buttons allow the user to take actions or make choices.</p> <div class="not-prose mt-6 mb-10 overflow-x-auto"><table class="table-compact table w-full"><thead><tr><th class="flex items-center gap-2 normal-case"><div class="tooltip tooltip-right font-normal" data-tip="Add custom prefix"><input class="input input-bordered input-xs w-min max-w-[3.8rem]" type="text" placeholder="Prefix–"></div> <span>Class name</span></th> <th class="normal-case">Type</th> <th></th></tr></thead> <tbody> <tr><th class="font-normal"><span class="font-mono lowercase">btn</span></th> <td><span class="badge badge-sm badge-ghost w-20">Component</span> </td> <td>Button</td> </tr><tr><th class="font-normal"><span class="font-mono lowercase">btn-primary</span></th> <td> <div class="tooltip tooltip-right cursor-help" data-tip="Changes the style of a component"><span class="badge badge-sm badge-outline w-20">Modifier</span></div> </td> <td>Button with `primary` color</td> </tr><tr><th class="font-normal"><span class="font-mono lowercase">btn-secondary</span></th> <td> <div class="tooltip tooltip-right cursor-help" data-tip="Changes the style of a component"><span class="badge badge-sm badge-outline w-20">Modifier</span></div> </td> <td>Button with `secondary` color</td> </tr><tr><th class="font-normal"><span class="font-mono lowercase">btn-accent</span></th> <td> <div class="tooltip tooltip-right cursor-help" data-tip="Changes the style of a component"><span class="badge badge-sm badge-outline w-20">Modifier</span></div> </td> <td>Button with `accent` color</td> </tr><tr><th class="font-normal"><span class="font-mono lowercase">btn-info</span></th> <td> <div class="tooltip tooltip-right cursor-help" data-tip="Changes the style of a component"><span class="badge badge-sm badge-outline w-20">Modifier</span></div> </td> <td>Button with `info` color</td> </tr><tr><th class="font-normal"><span class="font-mono lowercase">btn-success</span></th> <td> <div class="tooltip tooltip-right cursor-help" data-tip="Changes the style of a component"><span class="badge badge-sm badge-outline w-20">Modifier</span></div> </td> <td>Button with `success` color</td> </tr><tr><th class="font-normal"><span class="font-mono lowercase">btn-warning</span></th> <td> <div class="tooltip tooltip-right cursor-help" data-tip="Changes the style of a component"><span class="badge badge-sm badge-outline w-20">Modifier</span></div> </td> <td>Button with `warning` color</td> </tr><tr><th class="font-normal"><span class="font-mono lowercase">btn-error</span></th> <td> <div class="tooltip tooltip-right cursor-help" data-tip="Changes the style of a component"><span class="badge badge-sm badge-outline w-20">Modifier</span></div> </td> <td>Button with `error` color</td> </tr><tr><th class="font-normal"><span class="font-mono lowercase">btn-ghost</span></th> <td> <div class="tooltip tooltip-right cursor-help" data-tip="Changes the style of a component"><span class="badge badge-sm badge-outline w-20">Modifier</span></div> </td> <td>Button with ghost style</td> </tr><tr><th class="font-normal"><span class="font-mono lowercase">btn-link</span></th> <td> <div class="tooltip tooltip-right cursor-help" data-tip="Changes the style of a component"><span class="badge badge-sm badge-outline w-20">Modifier</span></div> </td> <td>Button styled as a link</td> </tr><tr><th class="font-normal"><span class="font-mono lowercase">btn-outline</span></th> <td> <div class="tooltip tooltip-right cursor-help" data-tip="Changes the style of a component"><span class="badge badge-sm badge-outline w-20">Modifier</span></div> </td> <td>Transparent Button with colored border</td> </tr><tr><th class="font-normal"><span class="font-mono lowercase">btn-active</span></th> <td> <div class="tooltip tooltip-right cursor-help" data-tip="Changes the style of a component"><span class="badge badge-sm badge-outline w-20">Modifier</span></div> </td> <td>Force button to show active state</td> </tr><tr><th class="font-normal"><span class="font-mono lowercase">btn-disabled</span></th> <td> <div class="tooltip tooltip-right cursor-help" data-tip="Changes the style of a component"><span class="badge badge-sm badge-outline w-20">Modifier</span></div> </td> <td>Force button to show disabled state</td> </tr><tr><th class="font-normal"><span class="font-mono lowercase">glass</span></th> <td> <div class="tooltip tooltip-right cursor-help" data-tip="Changes the style of a component"><span class="badge badge-sm badge-outline w-20">Modifier</span></div> </td> <td>Button with a glass effect</td> </tr><tr><th class="font-normal"><span class="font-mono lowercase">loading</span></th> <td> <div class="tooltip tooltip-right cursor-help" data-tip="Changes the style of a component"><span class="badge badge-sm badge-outline w-20">Modifier</span></div> </td> <td>Shows loading spinner</td> </tr><tr><th class="font-normal"><span class="font-mono lowercase">no-animation</span></th> <td> <div class="tooltip tooltip-right cursor-help" data-tip="Changes the style of a component"><span class="badge badge-sm badge-outline w-20">Modifier</span></div> </td> <td>Disables click animation</td> </tr><tr><th class="font-normal"><span class="font-mono lowercase">btn-lg</span></th> <td> <div class="tooltip tooltip-right cursor-help" data-tip="Supports responsive prefixes (sm:, lg:, …)"><span class="badge badge-sm badge-success w-20">Responsive</span></div></td> <td>Large button</td> </tr><tr><th class="font-normal"><span class="font-mono lowercase">btn-md</span></th> <td> <div class="tooltip tooltip-right cursor-help" data-tip="Supports responsive prefixes (sm:, lg:, …)"><span class="badge badge-sm badge-success w-20">Responsive</span></div></td> <td>Medium button (default)</td> </tr><tr><th class="font-normal"><span class="font-mono lowercase">btn-sm</span></th> <td> <div class="tooltip tooltip-right cursor-help" data-tip="Supports responsive prefixes (sm:, lg:, …)"><span class="badge badge-sm badge-success w-20">Responsive</span></div></td> <td>Small button</td> </tr><tr><th class="font-normal"><span class="font-mono lowercase">btn-xs</span></th> <td> <div class="tooltip tooltip-right cursor-help" data-tip="Supports responsive prefixes (sm:, lg:, …)"><span class="badge badge-sm badge-success w-20">Responsive</span></div></td> <td>Extra small button</td> </tr><tr><th class="font-normal"><span class="font-mono lowercase">btn-wide</span></th> <td> <div class="tooltip tooltip-right cursor-help" data-tip="Supports responsive prefixes (sm:, lg:, …)"><span class="badge badge-sm badge-success w-20">Responsive</span></div></td> <td>Wide button (more horizontal padding)</td> </tr><tr><th class="font-normal"><span class="font-mono lowercase">btn-block</span></th> <td> <div class="tooltip tooltip-right cursor-help" data-tip="Supports responsive prefixes (sm:, lg:, …)"><span class="badge badge-sm badge-success w-20">Responsive</span></div></td> <td>Full width button</td> </tr><tr><th class="font-normal"><span class="font-mono lowercase">btn-circle</span></th> <td> <div class="tooltip tooltip-right cursor-help" data-tip="Supports responsive prefixes (sm:, lg:, …)"><span class="badge badge-sm badge-success w-20">Responsive</span></div></td> <td>Circle button with a 1:1 ratio</td> </tr><tr><th class="font-normal"><span class="font-mono lowercase">btn-square</span></th> <td> <div class="tooltip tooltip-right cursor-help" data-tip="Supports responsive prefixes (sm:, lg:, …)"><span class="badge badge-sm badge-success w-20">Responsive</span></div></td> <td>Square button with a 1:1 ratio</td> </tr></tbody></table></div> <div class="component-preview not-prose text-base-content my-4 max-w-4xl" id="button"><div class="pb-2 text-sm font-bold"><a class="opacity-20 hover:opacity-60" href="https://daisyui.com/components/button/#button">#</a> <span class="component-preview-title">Button</span></div> <div class="grid"><div class="tabs z-10 -mb-px"><button class="tab tab-lifted tab-active [--tab-bg:hsl(var(--b2))]">Preview</button> <button class="tab tab-lifted [--tab-border-color:transparent]">HTML</button> <button class="tab tab-lifted [--tab-border-color:transparent]">JSX</button> <div class="tab tab-lifted mr-6 flex-1 cursor-default [--tab-border-color:transparent]"></div></div> <div class="bg-base-300 rounded-b-box rounded-tr-box relative overflow-x-auto"><div class="preview border-base-300 bg-base-200 rounded-b-box rounded-tr-box flex min-h-[6rem] min-w-[18rem] max-w-4xl flex-wrap items-center justify-center gap-2 overflow-x-hidden border bg-cover bg-top p-4 undefined" style="background-size: 5px 5px"><button class="btn">Button</button></div></div> </div></div> <div class="component-preview not-prose text-base-content my-4 max-w-4xl" id="buttons-with-brand-colors"><div class="pb-2 text-sm font-bold"><a class="opacity-20 hover:opacity-60" href="https://daisyui.com/components/button/#buttons-with-brand-colors">#</a> <span class="component-preview-title">Buttons with brand colors</span></div> <div class="grid"><div class="tabs z-10 -mb-px"><button class="tab tab-lifted tab-active [--tab-bg:hsl(var(--b2))]">Preview</button> <button class="tab tab-lifted [--tab-border-color:transparent]">HTML</button> <button class="tab tab-lifted [--tab-border-color:transparent]">JSX</button> <div class="tab tab-lifted mr-6 flex-1 cursor-default [--tab-border-color:transparent]"></div></div> <div class="bg-base-300 rounded-b-box rounded-tr-box relative overflow-x-auto"><div class="preview border-base-300 bg-base-200 rounded-b-box rounded-tr-box flex min-h-[6rem] min-w-[18rem] max-w-4xl flex-wrap items-center justify-center gap-2 overflow-x-hidden border bg-cover bg-top p-4 undefined" style="background-size: 5px 5px"><button class="btn">Button</button> <button class="btn btn-primary">Primary</button> <button class="btn btn-secondary">Secondary</button> <button class="btn btn-accent">Accent</button> <button class="btn btn-ghost">Ghost</button> <button class="btn btn-link">Link</button></div></div> </div></div> <div class="component-preview not-prose text-base-content my-4 max-w-4xl" id="active-buttons"><div class="pb-2 text-sm font-bold"><a class="opacity-20 hover:opacity-60" href="https://daisyui.com/components/button/#active-buttons">#</a> <span class="component-preview-title">Active buttons</span></div> <div class="grid"><div class="tabs z-10 -mb-px"><button class="tab tab-lifted tab-active [--tab-bg:hsl(var(--b2))]">Preview</button> <button class="tab tab-lifted [--tab-border-color:transparent]">HTML</button> <button class="tab tab-lifted [--tab-border-color:transparent]">JSX</button> <div class="tab tab-lifted mr-6 flex-1 cursor-default [--tab-border-color:transparent]"></div></div> <div class="bg-base-300 rounded-b-box rounded-tr-box relative overflow-x-auto"><div class="preview border-base-300 bg-base-200 rounded-b-box rounded-tr-box flex min-h-[6rem] min-w-[18rem] max-w-4xl flex-wrap items-center justify-center gap-2 overflow-x-hidden border bg-cover bg-top p-4 undefined" style="background-size: 5px 5px"><button class="btn btn-active">Button</button> <button class="btn btn-active btn-primary">Primary</button> <button class="btn btn-active btn-secondary">Secondary</button> <button class="btn btn-active btn-accent">Accent</button> <button class="btn btn-active btn-ghost">Ghost</button> <button class="btn btn-active btn-link">Link</button></div></div> </div></div> <div class="component-preview not-prose text-base-content my-4 max-w-4xl" id="buttons-with-state-colors"><div class="pb-2 text-sm font-bold"><a class="opacity-20 hover:opacity-60" href="https://daisyui.com/components/button/#buttons-with-state-colors">#</a> <span class="component-preview-title">Buttons with state colors</span></div> <div class="grid"><div class="tabs z-10 -mb-px"><button class="tab tab-lifted tab-active [--tab-bg:hsl(var(--b2))]">Preview</button> <button class="tab tab-lifted [--tab-border-color:transparent]">HTML</button> <button class="tab tab-lifted [--tab-border-color:transparent]">JSX</button> <div class="tab tab-lifted mr-6 flex-1 cursor-default [--tab-border-color:transparent]"></div></div> <div class="bg-base-300 rounded-b-box rounded-tr-box relative overflow-x-auto"><div class="preview border-base-300 bg-base-200 rounded-b-box rounded-tr-box flex min-h-[6rem] min-w-[18rem] max-w-4xl flex-wrap items-center justify-center gap-2 overflow-x-hidden border bg-cover bg-top p-4 undefined" style="background-size: 5px 5px"><button class="btn btn-info">Info</button> <button class="btn btn-success">Success</button> <button class="btn btn-warning">Warning</button> <button class="btn btn-error">Error</button></div></div> </div></div> <div class="component-preview not-prose text-base-content my-4 max-w-4xl" id="outline-buttons"><div class="pb-2 text-sm font-bold"><a class="opacity-20 hover:opacity-60" href="https://daisyui.com/components/button/#outline-buttons">#</a> <span class="component-preview-title">Outline buttons</span></div> <div class="grid"><div class="tabs z-10 -mb-px"><button class="tab tab-lifted tab-active [--tab-bg:hsl(var(--b2))]">Preview</button> <button class="tab tab-lifted [--tab-border-color:transparent]">HTML</button> <button class="tab tab-lifted [--tab-border-color:transparent]">JSX</button> <div class="tab tab-lifted mr-6 flex-1 cursor-default [--tab-border-color:transparent]"></div></div> <div class="bg-base-300 rounded-b-box rounded-tr-box relative overflow-x-auto"><div class="preview border-base-300 bg-base-200 rounded-b-box rounded-tr-box flex min-h-[6rem] min-w-[18rem] max-w-4xl flex-wrap items-center justify-center gap-2 overflow-x-hidden border bg-cover bg-top p-4 undefined" style="background-size: 5px 5px"><button class="btn btn-outline">Button</button> <button class="btn btn-outline btn-primary">Primary</button> <button class="btn btn-outline btn-secondary">Secondary</button> <button class="btn btn-outline btn-accent">Accent</button></div></div> </div></div> <div class="component-preview not-prose text-base-content my-4 max-w-4xl" id="outline-buttons-with-state-colors"><div class="pb-2 text-sm font-bold"><a class="opacity-20 hover:opacity-60" href="https://daisyui.com/components/button/#outline-buttons-with-state-colors">#</a> <span class="component-preview-title">Outline buttons with state colors</span></div> <div class="grid"><div class="tabs z-10 -mb-px"><button class="tab tab-lifted tab-active [--tab-bg:hsl(var(--b2))]">Preview</button> <button class="tab tab-lifted [--tab-border-color:transparent]">HTML</button> <button class="tab tab-lifted [--tab-border-color:transparent]">JSX</button> <div class="tab tab-lifted mr-6 flex-1 cursor-default [--tab-border-color:transparent]"></div></div> <div class="bg-base-300 rounded-b-box rounded-tr-box relative overflow-x-auto"><div class="preview border-base-300 bg-base-200 rounded-b-box rounded-tr-box flex min-h-[6rem] min-w-[18rem] max-w-4xl flex-wrap items-center justify-center gap-2 overflow-x-hidden border bg-cover bg-top p-4 undefined" style="background-size: 5px 5px"><button class="btn btn-outline btn-info">Info</button> <button class="btn btn-outline btn-success">Success</button> <button class="btn btn-outline btn-warning">Warning</button> <button class="btn btn-outline btn-error">Error</button></div></div> </div></div> <div class="component-preview not-prose text-base-content my-4 max-w-4xl" id="button-sizes"><div class="pb-2 text-sm font-bold"><a class="opacity-20 hover:opacity-60" href="https://daisyui.com/components/button/#button-sizes">#</a> <span class="component-preview-title">Button sizes</span></div> <div class="grid"><div class="tabs z-10 -mb-px"><button class="tab tab-lifted tab-active [--tab-bg:hsl(var(--b2))]">Preview</button> <button class="tab tab-lifted [--tab-border-color:transparent]">HTML</button> <button class="tab tab-lifted [--tab-border-color:transparent]">JSX</button> <div class="tab tab-lifted mr-6 flex-1 cursor-default [--tab-border-color:transparent]"></div></div> <div class="bg-base-300 rounded-b-box rounded-tr-box relative overflow-x-auto"><div class="preview border-base-300 bg-base-200 rounded-b-box rounded-tr-box flex min-h-[6rem] min-w-[18rem] max-w-4xl flex-wrap items-center justify-center gap-2 overflow-x-hidden border bg-cover bg-top p-4 undefined" style="background-size: 5px 5px"><button class="btn btn-lg">Large</button> <button class="btn">Normal</button> <button class="btn btn-sm">Small</button> <button class="btn btn-xs">Tiny</button></div></div> </div></div> <div class="component-preview not-prose text-base-content my-4 max-w-4xl" id="responsive-button"><div class="pb-2 text-sm font-bold"><a class="opacity-20 hover:opacity-60" href="https://daisyui.com/components/button/#responsive-button">#</a> <span class="component-preview-title">Responsive button</span></div> <div class="pb-2 text-xs opacity-70">This button will have different sizes on different browser viewpoints</div> <div class="grid"><div class="tabs z-10 -mb-px"><button class="tab tab-lifted tab-active [--tab-bg:hsl(var(--b2))]">Preview</button> <button class="tab tab-lifted [--tab-border-color:transparent]">HTML</button> <button class="tab tab-lifted [--tab-border-color:transparent]">JSX</button> <div class="tab tab-lifted mr-6 flex-1 cursor-default [--tab-border-color:transparent]"></div></div> <div class="bg-base-300 rounded-b-box rounded-tr-box relat