diff options
Diffstat (limited to 'apps/kit/src/lib/components/button.svelte')
| -rw-r--r-- | apps/kit/src/lib/components/button.svelte | 72 |
1 files changed, 72 insertions, 0 deletions
diff --git a/apps/kit/src/lib/components/button.svelte b/apps/kit/src/lib/components/button.svelte new file mode 100644 index 0000000..5550e5e --- /dev/null +++ b/apps/kit/src/lib/components/button.svelte @@ -0,0 +1,72 @@ +<script lang="ts"> + export type ButtonKind = "primary" | "secondary" | "white" + export type ButtonSize = "xs" | "sm" | "md" | "lg" | "xl"; + export let kind = "primary" as ButtonKind; + export let size = "sm" as ButtonSize; + export let type: "button" | "submit" | "reset" = "button"; + export let id = undefined; + export let tabindex = undefined; + export let style = undefined; + export let title = undefined; + export let disabled = false; + export let href = undefined; + export let text; + + let sizeClasses = "px-3 py-2 text-xs"; + let kindClasses = "border-transparent text-white bg-indigo-600 hover:bg-indigo-700 focus:ring-indigo-500"; + + $: shared_props = { + type: type, + id: id || null, + title: title || null, + disabled: disabled || null, + tabindex: tabindex || null, + style: style || null, + }; + + $: switch (size) { + case "xs": + sizeClasses = "px-2.5 py-1.5 text-xs"; + break; + case "sm": + sizeClasses = "px-3 py-2 text-sm"; + break; + case "md": + sizeClasses = "px-4 py-2 text-sm"; + break; + case "lg": + sizeClasses = "px-4 py-2 text-base"; + break; + case "xl": + sizeClasses = "px-6 py-3 text-base"; + break; + } + + $: switch (kind) { + case "secondary": + kindClasses = "border-transparent text-indigo-700 bg-indigo-100 hover:bg-indigo-200"; + break; + case "primary": + kindClasses = "border-transparent text-white bg-indigo-600 hover:bg-indigo-700"; + break; + case "white": + kindClasses = "border-gray-300 text-gray-700 bg-white hover:bg-gray-50"; + break; + } +</script> +{#if href && !disabled} + <a {...shared_props} + {href} + on:click + {type} + class="{sizeClasses} {kindClasses} inline-flex items-center border font-medium rounded shadow-sm focus:outline-none focus:ring-2 focus:ring-indigo-500"> + {text} + </a> +{:else} + <button {...shared_props} + on:click + {type} + class="{sizeClasses} {kindClasses} inline-flex items-center border font-medium rounded shadow-sm focus:outline-none focus:ring-2 focus:ring-indigo-500"> + {text} + </button> +{/if}
\ No newline at end of file |