svelte-toolkit/sui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

button: disabled state

Browse Source
This commit is contained in:
Elijah Duffy
2025-08-11 17:12:05 -07:00
parent 4e10c79e2b
commit 1f4c13d838
1 changed files with 7 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
src/lib/Button.svelte
View File

@@ -19,6 +19,7 @@
icon, icon,
animate = true, animate = true,
loading, loading,
disabled,
class: classValue, class: classValue,
ref = $bindable<HTMLButtonElement | null>(null), ref = $bindable<HTMLButtonElement | null>(null),
children, children,
@@ -35,12 +36,12 @@
}); });
const handleButtonClick: MouseEventHandler<HTMLButtonElement> = (event) => { const handleButtonClick: MouseEventHandler<HTMLButtonElement> = (event) => {
if (animate) { if (animate && !loading && !disabled) {
animateLoop(); animateLoop();
animateRipple(event); animateRipple(event);
} }
if (loading) return; if (loading || disabled) return;
onclick?.(event); onclick?.(event);
}; };
@@ -87,8 +88,10 @@
bind:this={ref} bind:this={ref}
class={[ class={[
'button group relative flex items-center gap-3 overflow-hidden rounded-sm px-5', 'button group relative flex items-center gap-3 overflow-hidden rounded-sm px-5',
'text-sui-background cursor-pointer py-3 font-medium transition-colors', 'text-sui-background py-3 font-medium transition-colors',
!loading ? ' bg-sui-primary hover:bg-sui-secondary' : 'bg-sui-primary/50 cursor-not-allowed ', !loading && !disabled
? ' bg-sui-primary hover:bg-sui-secondary cursor-pointer'
: 'bg-sui-primary/50 cursor-not-allowed ',
classValue classValue
]} ]}
onclick={handleButtonClick} onclick={handleButtonClick}