75 lines
1.7 KiB
Svelte
75 lines
1.7 KiB
Svelte
<script lang="ts">
|
|
import type { DaisyColor, DaisySize } from '$lib/types';
|
|
import type { Snippet } from 'svelte';
|
|
import type { HTMLButtonAttributes } from 'svelte/elements';
|
|
|
|
interface Props extends HTMLButtonAttributes {
|
|
active?: boolean;
|
|
animation?: boolean;
|
|
block?: boolean;
|
|
children: Snippet;
|
|
color?: DaisyColor;
|
|
disabled?: boolean;
|
|
full?: boolean;
|
|
glass?: boolean;
|
|
onclick?: () => void;
|
|
shape?: 'circle' | 'square';
|
|
size?: DaisySize;
|
|
type?: HTMLButtonAttributes['type'];
|
|
variant?: 'link' | 'outline';
|
|
wide?: boolean;
|
|
}
|
|
|
|
let {
|
|
active = false,
|
|
animation = true,
|
|
block = false,
|
|
children,
|
|
color,
|
|
disabled = false,
|
|
full = false,
|
|
glass = false,
|
|
onclick: onClick,
|
|
shape,
|
|
size,
|
|
type = 'button',
|
|
wide = false,
|
|
variant,
|
|
...props
|
|
}: Props = $props();
|
|
</script>
|
|
|
|
<button
|
|
onclick={onClick}
|
|
class="btn"
|
|
class:btn-active={active}
|
|
class:no-animation={!animation}
|
|
class:btn-block={block}
|
|
class:btn-neutral={color === 'neutral'}
|
|
class:btn-primary={color === 'primary'}
|
|
class:btn-secondary={color === 'secondary'}
|
|
class:btn-accent={color === 'accent'}
|
|
class:btn-ghost={color === 'ghost'}
|
|
class:btn-info={color === 'info'}
|
|
class:btn-success={color === 'success'}
|
|
class:btn-warning={color === 'warning'}
|
|
class:btn-error={color === 'error'}
|
|
class:btn-disabled={disabled}
|
|
class:w-full={full}
|
|
class:glass
|
|
class:btn-circle={shape === 'circle'}
|
|
class:btn-square={shape === 'square'}
|
|
class:btn-xs={size === 'xs'}
|
|
class:btn-sm={size === 'sm'}
|
|
class:btn-lg={size === 'lg'}
|
|
class:btn-link={variant === 'link'}
|
|
class:btn-outline={variant === 'outline'}
|
|
class:btn-wide={wide}
|
|
{disabled}
|
|
{type}
|
|
{...props}
|
|
>
|
|
{@render children()}
|
|
</button>
|
|
|
|
<style></style>
|