TirayaFrontend/src/lib/components/ui/IconButton.svelte

25 lines
715 B
Svelte

<script lang="ts">
import type { BtnColor, BtnSize } from "$lib/util/types";
import Icon from "./Icon.svelte";
export let path: string;
export let size: BtnSize = "sm";
export let color: BtnColor = "ghost";
export let cls = "";
export let ariaLabel: undefined | string = undefined;
export let ariaPressed: undefined | boolean = undefined;
export let tabindex: undefined | number = undefined;
</script>
<button
class={`btn ${color === "default" ? "" : `btn-${color}`} btn-circle ${
size === "md" ? "" : "btn-" + size
} ${cls}`}
aria-label={ariaLabel}
aria-pressed={ariaPressed}
{tabindex}
on:click
>
<Icon {path} size={size === "lg" ? 3 : size === "md" ? 2 : 1.5} />
</button>