gradio/frontend

1<script lang="ts">2	import { type FileData } from "@gradio/client";3	import { Image } from "@gradio/image/shared";4 5	export let elem_id = "";6	export let elem_classes: string[] = [];7	export let visible: boolean | "hidden" = true;8	export let variant: "primary" | "secondary" | "stop" | "huggingface" =9		"secondary";10	export let size: "sm" | "md" | "lg" = "lg";11	export let value: string | null = null;12	export let link: string | null = null;13	export let link_target: "_self" | "_blank" | "_parent" | "_top" = "_self";14	export let icon: FileData | null = null;15	export let disabled = false;16	export let scale: number | null = null;17	export let min_width: number | undefined = undefined;18</script>19 20{#if link && link.length > 0}21	<a22		href={link}23		target={link_target}24		rel={link_target === "_blank" ? "noopener noreferrer" : undefined}25		class:hidden={visible === false || visible === "hidden"}26		class:disabled27		aria-disabled={disabled}28		class="{size} {variant} {elem_classes.join(' ')}"29		style:flex-grow={scale}30		style:pointer-events={disabled ? "none" : null}31		style:width={scale === 0 ? "fit-content" : null}32		style:min-width={typeof min_width === "number"33			? `calc(min(${min_width}px, 100%))`34			: null}35		id={elem_id}36	>37		{#if icon}38			<Image39				src={icon.url}40				restProps={{ alt: `${value} icon`, class: "button-icon" }}41			/>42		{/if}43		<slot />44	</a>45{:else}46	<button47		on:click48		class:hidden={visible === false || visible === "hidden"}49		class="{size} {variant} {elem_classes.join(' ')}"50		style:flex-grow={scale}51		style:width={scale === 0 ? "fit-content" : null}52		style:min-width={typeof min_width === "number"53			? `calc(min(${min_width}px, 100%))`54			: null}55		id={elem_id}56		{disabled}57	>58		{#if icon}59			<Image60				restProps={{ alt: `${value} icon` }}61				class_names={[`button-icon ${value ? "right-padded" : ""}`]}62				src={icon.url}63			/>64		{/if}65		<slot />66	</button>67{/if}68 69<style>70	button,71	a {72		display: inline-flex;73		justify-content: center;74		align-items: center;75		transition: var(--button-transition);76		padding: var(--size-0-5) var(--size-2);77		text-align: center;78	}79 80	button:hover {81		transform: var(--button-transform-hover);82	}83 84	button:active,85	a:active {86		transform: var(--button-transform-active);87	}88 89	button[disabled],90	a.disabled {91		opacity: 0.5;92		filter: grayscale(30%);93		cursor: not-allowed;94		transform: none;95	}96 97	.hidden {98		display: none;99	}100 101	.primary {102		border: var(--button-border-width) solid var(--button-primary-border-color);103		background: var(--button-primary-background-fill);104		color: var(--button-primary-text-color);105		box-shadow: var(--button-primary-shadow);106	}107	.primary:hover,108	.primary[disabled] {109		background: var(--button-primary-background-fill-hover);110		color: var(--button-primary-text-color-hover);111	}112 113	.primary:hover {114		border-color: var(--button-primary-border-color-hover);115		box-shadow: var(--button-primary-shadow-hover);116	}117	.primary:active {118		box-shadow: var(--button-primary-shadow-active);119	}120 121	.primary[disabled] {122		border-color: var(--button-primary-border-color);123	}124 125	.secondary {126		border: var(--button-border-width) solid127			var(--button-secondary-border-color);128		background: var(--button-secondary-background-fill);129		color: var(--button-secondary-text-color);130		box-shadow: var(--button-secondary-shadow);131	}132 133	.secondary:hover,134	.secondary[disabled] {135		background: var(--button-secondary-background-fill-hover);136		color: var(--button-secondary-text-color-hover);137	}138 139	.secondary:hover {140		border-color: var(--button-secondary-border-color-hover);141		box-shadow: var(--button-secondary-shadow-hover);142	}143	.secondary:active {144		box-shadow: var(--button-secondary-shadow-active);145	}146 147	.secondary[disabled] {148		border-color: var(--button-secondary-border-color);149	}150 151	.stop {152		background: var(--button-cancel-background-fill);153		color: var(--button-cancel-text-color);154		border: var(--button-border-width) solid var(--button-cancel-border-color);155		box-shadow: var(--button-cancel-shadow);156	}157 158	.stop:hover,159	.stop[disabled] {160		background: var(--button-cancel-background-fill-hover);161	}162 163	.stop:hover {164		border-color: var(--button-cancel-border-color-hover);165		box-shadow: var(--button-cancel-shadow-hover);166	}167	.stop:active {168		box-shadow: var(--button-cancel-shadow-active);169	}170 171	.stop[disabled] {172		border-color: var(--button-cancel-border-color);173	}174 175	.sm {176		border-radius: var(--button-small-radius);177		padding: var(--button-small-padding);178		font-weight: var(--button-small-text-weight);179		font-size: var(--button-small-text-size);180	}181 182	.md {183		border-radius: var(--button-medium-radius);184		padding: var(--button-medium-padding);185		font-weight: var(--button-medium-text-weight);186		font-size: var(--button-medium-text-size);187	}188 189	.lg {190		border-radius: var(--button-large-radius);191		padding: var(--button-large-padding);192		font-weight: var(--button-large-text-weight);193		font-size: var(--button-large-text-size);194	}195 196	:global(.button-icon) {197		width: var(--text-xl);198		height: var(--text-xl);199	}200	:global(.button-icon.right-padded) {201		margin-right: var(--spacing-md);202	}203 204	.huggingface {205		background: rgb(20, 28, 46);206		color: white;207	}208 209	.huggingface:hover {210		background: rgb(40, 48, 66);211		color: white;212	}213</style>214