fix: button bugs
This commit is contained in:
@@ -264,6 +264,7 @@
|
|||||||
isLoading={$isLoading}
|
isLoading={$isLoading}
|
||||||
isDisabled={$isLoading}
|
isDisabled={$isLoading}
|
||||||
variant={VARIANTS.OUTLINED}
|
variant={VARIANTS.OUTLINED}
|
||||||
|
disableScale
|
||||||
>
|
>
|
||||||
<MagicWandFilled size={20} class="carbon-icon mr-3" />
|
<MagicWandFilled size={20} class="carbon-icon mr-3" />
|
||||||
AI
|
AI
|
||||||
|
|||||||
@@ -25,7 +25,7 @@ export const VARIANTS_CLASS = {
|
|||||||
[VARIANTS.CONTAINED_SUCCESS]: 'bg-green-700 hover:bg-green-900 text-white',
|
[VARIANTS.CONTAINED_SUCCESS]: 'bg-green-700 hover:bg-green-900 text-white',
|
||||||
[VARIANTS.CONTAINED_DANGER]: 'bg-red-700 hover:bg-red-900 text-white',
|
[VARIANTS.CONTAINED_DANGER]: 'bg-red-700 hover:bg-red-900 text-white',
|
||||||
[VARIANTS.OUTLINED]:
|
[VARIANTS.OUTLINED]:
|
||||||
'border border-black hover:bg-neutral-600 hover:text-white text-black dark:text-white',
|
'border border-black dark:border-white hover:bg-neutral-600 hover:text-white text-black dark:text-white',
|
||||||
[VARIANTS.NONE]:
|
[VARIANTS.NONE]:
|
||||||
'border-none hover:border-black-300 hover:bg-gray-200 dark:hover:bg-neutral-800 text-black',
|
'border-none hover:border-black-300 hover:bg-gray-200 dark:hover:bg-neutral-800 text-black',
|
||||||
[VARIANTS.TEXT]: 'text-black hover:underline',
|
[VARIANTS.TEXT]: 'text-black hover:underline',
|
||||||
|
|||||||
@@ -12,16 +12,19 @@
|
|||||||
export let disablePadding = false;
|
export let disablePadding = false;
|
||||||
export let isDisabled = false;
|
export let isDisabled = false;
|
||||||
export let isLoading = false;
|
export let isLoading = false;
|
||||||
|
export let disableScale = false;
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<button
|
<button
|
||||||
class="{isLoading || isDisabled
|
class="{isLoading || isDisabled
|
||||||
? 'opacity-25 cursor-not-allowed'
|
? 'opacity-25 cursor-not-allowed'
|
||||||
: 'cursor-pointer hover:scale-95 transition-all ease-in-out'} flex items-center h-auto {VARIANTS_CLASS[
|
: `cursor-pointer ${
|
||||||
|
!disableScale && 'hover:scale-95'
|
||||||
|
}`} flex items-center h-auto {VARIANTS_CLASS[
|
||||||
isLoading ? VARIANTS.OUTLINED : variant
|
isLoading ? VARIANTS.OUTLINED : variant
|
||||||
]} {!disablePadding &&
|
]} {!disablePadding &&
|
||||||
'py-[0.5rem] px-6'} rounded-md {className} w-fit min-h-[36px] justify-center sm:w-auto {variant !==
|
'py-[0.5rem] px-6'} rounded-md {className} w-fit min-h-[36px] justify-center sm:w-auto {variant !==
|
||||||
VARIANTS.TEXT && 'hover:shadow-xl'} transition delay-150 duration-300 ease-in-out"
|
VARIANTS.TEXT && 'hover:shadow-xl'} transition-all delay-150 duration-300 ease-in-out"
|
||||||
on:click={onClick}
|
on:click={onClick}
|
||||||
{name}
|
{name}
|
||||||
{type}
|
{type}
|
||||||
|
|||||||
Reference in New Issue
Block a user