aboutsummaryrefslogtreecommitdiffstats
path: root/apps/web-shared/src/components/button.svelte
diff options
context:
space:
mode:
Diffstat (limited to 'apps/web-shared/src/components/button.svelte')
-rw-r--r--apps/web-shared/src/components/button.svelte116
1 files changed, 0 insertions, 116 deletions
diff --git a/apps/web-shared/src/components/button.svelte b/apps/web-shared/src/components/button.svelte
deleted file mode 100644
index 5eaf19f..0000000
--- a/apps/web-shared/src/components/button.svelte
+++ /dev/null
@@ -1,116 +0,0 @@
-<script lang="ts">
- import Icon from "$shared/components/icon.svelte";
-
- export let text = "";
- export let title = "";
- export let href = "";
- export let variant: "primary"|"secondary"|"subtle" = "primary";
- export let type: "button"|"submit"|"reset" = "button";
- export let disabled = false;
- export let loading = false;
- export let icon = "";
- export let icon_right_aligned = false;
- export let icon_width = false;
- export let icon_height = false;
- export let id;
- export let tabindex;
- export let style;
-
- $: shared_props = {
- type: type,
- id: id || null,
- title: title || null,
- disabled: disabled || null,
- tabindex: tabindex || null,
- style: style || null,
- "aria-controls": ($$restProps["aria-controls"] ?? "") || null,
- class: [variant === "reset" ? "reset" : `btn btn--${variant} btn--preserve-width ${loading ? "btn--state-b" : ""}`, $$restProps.class ?? ""].filter(Boolean).join(" "),
- };
-</script>
-
-<template>
- {#if href && !disabled}
- <a {href}
- {...shared_props}
- on:click>
- <span class="btn__content-a">
- {#if icon !== ""}
- {#if icon_right_aligned}
- {text}
- <Icon class="{text ? 'margin-left-xxxs': ''}"
- width={icon_width}
- height={icon_height}
- name={icon}/>
- {:else}
- <Icon class="{text ? 'margin-left-xxxs': ''}"
- width={icon_width}
- height={icon_height}
- name={icon}/>
- {text}
- {/if}
- {:else}
- {text}
- {/if}
- </span>
- {#if variant !== "reset" && loading}
- <span class="btn__content-b">
- <svg class="icon icon--is-spinning"
- aria-hidden="true"
- viewBox="0 0 16 16">
- <title>Loading</title>
- <g stroke-width="1"
- fill="currentColor"
- stroke="currentColor">
- <path d="M.5,8a7.5,7.5,0,1,1,1.91,5"
- fill="none"
- stroke="currentColor"
- stroke-linecap="round"
- stroke-linejoin="round"/>
- </g>
- </svg>
- </span>
- {/if}
- </a>
- {:else}
- <button {...shared_props}
- on:click>
- <span class="btn__content-a">
- {#if icon !== ""}
- {#if icon_right_aligned}
- {text}
- <Icon class="{text ? 'margin-left-xxxs': ''}"
- width={icon_width}
- height={icon_height}
- name={icon}/>
- {:else}
- <Icon class="{text ? 'margin-left-xxxs': ''}"
- width={icon_width}
- height={icon_height}
- name={icon}/>
- {text}
- {/if}
- {:else}
- {text}
- {/if}
- </span>
- {#if variant !== "reset" && loading}
- <span class="btn__content-b">
- <svg class="icon icon--is-spinning"
- aria-hidden="true"
- viewBox="0 0 16 16">
- <title>Loading</title>
- <g stroke-width="1"
- fill="currentColor"
- stroke="currentColor">
- <path d="M.5,8a7.5,7.5,0,1,1,1.91,5"
- fill="none"
- stroke="currentColor"
- stroke-linecap="round"
- stroke-linejoin="round"/>
- </g>
- </svg>
- </span>
- {/if}
- </button>
- {/if}
-</template>