gradio

1
<script lang="ts">
2
	import { type FileData } from "@gradio/client";
3

4
	export let elem_id = "";
5
	export let elem_classes: string[] = [];
6
	export let visible = true;
7
	export let variant: "primary" | "secondary" | "stop" = "secondary";
8
	export let size: "sm" | "lg" = "lg";
9
	export let value: string | null = null;
10
	export let link: string | null = null;
11
	export let icon: FileData | null = null;
12
	export let disabled = false;
13
	export let scale: number | null = null;
14
	export let min_width: number | undefined = undefined;
15
</script>
16

17
{#if link && link.length > 0}
18
	<a
19
		href={link}
20
		rel="noopener noreferrer"
21
		class:hidden={!visible}
22
		class:disabled
23
		aria-disabled={disabled}
24
		class="{size} {variant} {elem_classes.join(' ')}"
25
		style:flex-grow={scale}
26
		style:pointer-events={disabled ? "none" : null}
27
		style:width={scale === 0 ? "fit-content" : null}
28
		style:min-width={typeof min_width === "number"
29
			? `calc(min(${min_width}px, 100%))`
30
			: null}
31
		id={elem_id}
32
	>
33
		{#if icon}
34
			<img class="button-icon" src={icon.url} alt={`${value} icon`} />
35
		{/if}
36
		<slot />
37
	</a>
38
{:else}
39
	<button
40
		on:click
41
		class:hidden={!visible}
42
		class="{size} {variant} {elem_classes.join(' ')}"
43
		style:flex-grow={scale}
44
		style:width={scale === 0 ? "fit-content" : null}
45
		style:min-width={typeof min_width === "number"
46
			? `calc(min(${min_width}px, 100%))`
47
			: null}
48
		id={elem_id}
49
		{disabled}
50
	>
51
		{#if icon}
52
			<img class="button-icon" src={icon.url} alt={`${value} icon`} />
53
		{/if}
54
		<slot />
55
	</button>
56
{/if}
57

58
<style>
59
	button,
60
	a {
61
		display: inline-flex;
62
		justify-content: center;
63
		align-items: center;
64
		transition: var(--button-transition);
65
		box-shadow: var(--button-shadow);
66
		padding: var(--size-0-5) var(--size-2);
67
		text-align: center;
68
	}
69

70
	button:hover,
71
	button[disabled],
72
	a:hover,
73
	a.disabled {
74
		box-shadow: var(--button-shadow-hover);
75
	}
76

77
	button:active,
78
	a:active {
79
		box-shadow: var(--button-shadow-active);
80
	}
81

82
	button[disabled],
83
	a.disabled {
84
		opacity: 0.5;
85
		filter: grayscale(30%);
86
		cursor: not-allowed;
87
	}
88

89
	.hidden {
90
		display: none;
91
	}
92

93
	.primary {
94
		border: var(--button-border-width) solid var(--button-primary-border-color);
95
		background: var(--button-primary-background-fill);
96
		color: var(--button-primary-text-color);
97
	}
98
	.primary:hover,
99
	.primary[disabled] {
100
		border-color: var(--button-primary-border-color-hover);
101
		background: var(--button-primary-background-fill-hover);
102
		color: var(--button-primary-text-color-hover);
103
	}
104

105
	.secondary {
106
		border: var(--button-border-width) solid
107
			var(--button-secondary-border-color);
108
		background: var(--button-secondary-background-fill);
109
		color: var(--button-secondary-text-color);
110
	}
111

112
	.secondary:hover,
113
	.secondary[disabled] {
114
		border-color: var(--button-secondary-border-color-hover);
115
		background: var(--button-secondary-background-fill-hover);
116
		color: var(--button-secondary-text-color-hover);
117
	}
118

119
	.stop {
120
		border: var(--button-border-width) solid var(--button-cancel-border-color);
121
		background: var(--button-cancel-background-fill);
122
		color: var(--button-cancel-text-color);
123
	}
124

125
	.stop:hover,
126
	.stop[disabled] {
127
		border-color: var(--button-cancel-border-color-hover);
128
		background: var(--button-cancel-background-fill-hover);
129
		color: var(--button-cancel-text-color-hover);
130
	}
131

132
	.sm {
133
		border-radius: var(--button-small-radius);
134
		padding: var(--button-small-padding);
135
		font-weight: var(--button-small-text-weight);
136
		font-size: var(--button-small-text-size);
137
	}
138

139
	.lg {
140
		border-radius: var(--button-large-radius);
141
		padding: var(--button-large-padding);
142
		font-weight: var(--button-large-text-weight);
143
		font-size: var(--button-large-text-size);
144
	}
145

146
	.button-icon {
147
		width: var(--text-xl);
148
		height: var(--text-xl);
149
		margin-right: var(--spacing-xl);
150
	}
151
</style>
152