70 lines
No EOL
1.7 KiB
Svelte
70 lines
No EOL
1.7 KiB
Svelte
<script lang="ts" module>
|
|
export type ButtonShape = 'square' | 'circle';
|
|
export type ButtonStyle = 'outline' | 'dash' | 'soft' | 'ghost' | 'link';
|
|
</script>
|
|
|
|
<script lang="ts">
|
|
import type { DaisyColor, DaisySize } from '$lib/types';
|
|
import clsx from 'clsx';
|
|
import type { SvelteHTMLElements } from 'svelte/elements';
|
|
import { twMerge } from 'tailwind-merge';
|
|
|
|
type Props = {
|
|
active?: boolean;
|
|
block?: boolean;
|
|
color?: DaisyColor;
|
|
full?: boolean;
|
|
shape?: ButtonShape;
|
|
size?: DaisySize;
|
|
style?: ButtonStyle;
|
|
wide?: boolean;
|
|
} & SvelteHTMLElements['button'];
|
|
|
|
let {
|
|
active = false,
|
|
block = false,
|
|
children,
|
|
class: className,
|
|
color,
|
|
full = false,
|
|
shape,
|
|
size,
|
|
style,
|
|
wide = false,
|
|
...props
|
|
}: Props = $props();
|
|
</script>
|
|
|
|
<button
|
|
{...props}
|
|
class={twMerge('btn', clsx(className))}
|
|
class:btn-active={active}
|
|
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-info={color === 'info'}
|
|
class:btn-success={color === 'success'}
|
|
class:btn-warning={color === 'warning'}
|
|
class:btn-error={color === 'error'}
|
|
class:btn-disabled={props.disabled}
|
|
class:w-full={full}
|
|
class:btn-circle={shape === 'circle'}
|
|
class:btn-square={shape === 'square'}
|
|
class:btn-xs={size === 'xs'}
|
|
class:btn-sm={size === 'sm'}
|
|
class:btn-md={size === 'md'}
|
|
class:btn-lg={size === 'lg'}
|
|
class:btn-xl={size === 'xl'}
|
|
class:btn-outline={style === 'outline'}
|
|
class:btn-dash={style === 'dash'}
|
|
class:btn-soft={style === 'soft'}
|
|
class:btn-ghost={style === 'ghost'}
|
|
class:btn-link={style === 'link'}
|
|
class:btn-wide={wide}
|
|
>
|
|
{@render children?.()}
|
|
</button>
|
|
|
|
<style></style> |