tatort/src/lib/components/Button.svelte

<script lang="ts">
	export let href = null;
	export let type: 'button' | 'submit' | 'reset' = 'button';
	export let size = 'md';
	export let variant = 'primary';
	export let fullWidth = false;
	export let align = 'center';
	export let disabled = false;
	let classNames = '';
	export { classNames as class };
</script>

{#if href}
	<a on:click {href} class:w-full={fullWidth} class="button {variant} {size} {classNames} {align}"
		><slot />
	</a>
{:else}
	<button
		on:click
		{type}
		{disabled}
		class:w-full={fullWidth}
		class="button {variant} {size} {classNames} {align}"
	>
		<slot />
	</button>
{/if}

<style>
	.button {
		@apply inline-flex;
		@apply items-center;
		@apply border;
		@apply font-bold;
		@apply transition-all;
	}

	.button:focus {
		@apply outline-none;
		@apply ring-2;
		@apply ring-offset-2;
		@apply ring-blue-500;
	}

	.button:disabled {
		@apply opacity-50;
		@apply cursor-default;

		filter: grayscale(100%);
	}

	.primary {
		@apply border-transparent;
		@apply shadow-sm;
		@apply text-white;
		@apply bg-blue-500;
	}

	.primary:hover:not(.disabled) {
		@apply bg-blue-400;
	}

	.primary:active {
		@apply bg-blue-800;
	}

	.secondary {
		@apply border-transparent;
		@apply text-blue-500;
		@apply bg-blue-100;
	}

	.secondary:hover:not(.disabled) {
		@apply bg-blue-300;
	}

	.secondary:active {
		@apply bg-blue-300;
	}

	.danger {
		@apply border-transparent;
		@apply shadow-sm;
		@apply text-white;
		@apply bg-red-600;
	}

	.danger:hover:not(.disabled) {
		@apply bg-red-700;
	}

	.danger:active {
		@apply bg-red-800;
	}

	.success {
		@apply border-transparent;
		@apply shadow-sm;
		@apply text-white;
		@apply bg-green-600;
	}

	.success:hover:not(.disabled) {
		@apply bg-green-700;
	}

	.success:active {
		@apply bg-green-800;
	}

	.white {
		@apply border-gray-300;
		@apply shadow-sm;
		@apply text-gray-700;
		@apply bg-white;
	}

	.white:hover:not(.disabled) {
		@apply bg-gray-100;
	}

	.white:active {
		@apply bg-gray-200;
	}

	.black {
		@apply shadow-sm;
		@apply border-none;
		@apply text-gray-300;
		@apply bg-black;
	}

	.black:hover:not(.disabled) {
		@apply bg-gray-900;
	}

	.black:active {
		@apply bg-gray-700;
	}

	.transparent {
		@apply border-transparent;
		@apply text-blue-500;
		@apply bg-transparent;
	}

	.transparent:hover:not(.disabled) {
		@apply bg-blue-300;
	}

	.transparent:active {
		@apply bg-blue-300;
	}

	.xs {
		@apply px-2.5;
		@apply py-1.5;
		@apply text-xs;
		@apply rounded;
	}

	.sm {
		@apply px-3;
		@apply py-2;
		@apply text-sm;
		@apply leading-4;
		@apply rounded-md;
	}

	.md {
		@apply px-4;
		@apply py-2;
		@apply text-sm;
		@apply rounded-md;
	}

	.lg {
		@apply px-4;
		@apply py-2;
		@apply text-base;
		@apply rounded-md;
	}

	.xl {
		@apply px-6;
		@apply py-3;
		@apply text-base;
		@apply rounded-md;
	}

	.center {
		@apply justify-center;
	}

	.left {
		@apply justify-start;
	}

	.right {
		@apply justify-end;
	}
</style>