Ryan/drop-base
1
0
Fork 0
mirror of https://github.com/Drop-OSS/drop-base.git synced 2025-11-10 04:22:15 +10:00
Code Issues Packages Projects Releases Wiki Activity

feat(loading button): add disabled states

Browse Source
This commit is contained in:
DecDuck
2024-12-27 12:03:19 +11:00
parent 3530ee90ba
commit 22c44225c2
1 changed files with 4 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
components/LoadingButton.vue
View File

@ -1,7 +1,7 @@
<template> <template>
<button <button
type="submit" type="submit"
class="inline-flex h-9 items-center justify-center rounded-md bg-blue-600 hover:bg-blue-500 disabled:text-zinc-500 disabled:bg-blue-900 disabled:hover:bg-blue-900 px-3 py-1.5 text-sm font-semibold leading-6 text-white shadow-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600" class="inline-flex h-9 items-center justify-center rounded-md px-3 py-1.5 text-sm font-semibold leading-6 shadow-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600 text-white bg-blue-600 hover:bg-blue-500 disabled:text-zinc-400 disabled:bg-blue-600/10 disabled:hover:bg-blue-600/10"
> >
<div v-if="props.loading" role="status"> <div v-if="props.loading" role="status">
<svg <svg
@ -22,7 +22,9 @@
</svg> </svg>
<span class="sr-only">Loading...</span> <span class="sr-only">Loading...</span>
</div> </div>
<span v-else> <slot /> </span> <span v-else>
<slot />
</span>
</button> </button>
</template> </template>