57 lines
No EOL
1.3 KiB
Svelte
57 lines
No EOL
1.3 KiB
Svelte
<script lang="ts">
|
|
import type { DaisyColor, DaisySize } from '$lib/types';
|
|
import type { HTMLButtonAttributes } from 'svelte/elements';
|
|
|
|
interface Props {
|
|
block?: boolean;
|
|
color?: DaisyColor;
|
|
glass?: boolean;
|
|
label: string;
|
|
outline?: boolean;
|
|
onClick?: () => void;
|
|
responsive?: boolean;
|
|
size?: DaisySize;
|
|
type?: HTMLButtonAttributes['type'];
|
|
wide?: boolean;
|
|
}
|
|
|
|
let {
|
|
block = false,
|
|
color,
|
|
glass = false,
|
|
label,
|
|
outline = false,
|
|
onClick,
|
|
responsive = false,
|
|
size,
|
|
type = 'button',
|
|
wide = false
|
|
}: Props = $props();
|
|
</script>
|
|
|
|
<button
|
|
{type}
|
|
onclick={onClick}
|
|
class:btn-outline={outline}
|
|
class:btn-block={block}
|
|
class:btn-wide={wide}
|
|
class:glass
|
|
class:btn-xs={size === 'xs'}
|
|
class:btn-sm={size === 'sm'}
|
|
class:btn-lg={size === 'lg'}
|
|
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-link={color === 'link'}
|
|
class:btn-info={color === 'info'}
|
|
class:btn-success={color === 'success'}
|
|
class:btn-warning={color === 'warning'}
|
|
class:btn-error={color === 'error'}
|
|
class={`btn ${responsive && 'btn-xs sm:btn-sm md:btn-md lg:btn-lg'}`}
|
|
>
|
|
{label}
|
|
</button>
|
|
|
|
<style></style> |