57 lines
1.1 KiB
Svelte
57 lines
1.1 KiB
Svelte
<script lang="ts">
|
|
import type { HTMLButtonAttributes } from "svelte/elements";
|
|
import IconGlyph from "./IconGlyph.svelte";
|
|
|
|
type IconButtonProps = Omit<HTMLButtonAttributes, "type"> & {
|
|
icon: string;
|
|
label: string;
|
|
active?: boolean;
|
|
type?: "button" | "submit" | "reset";
|
|
};
|
|
|
|
let {
|
|
icon,
|
|
label,
|
|
active = false,
|
|
disabled = false,
|
|
type = "button",
|
|
class: className = "",
|
|
...buttonProps
|
|
}: IconButtonProps = $props();
|
|
</script>
|
|
|
|
<button
|
|
{...buttonProps}
|
|
class={className ? `icon-button ${className}` : "icon-button"}
|
|
aria-label={label}
|
|
data-active={active}
|
|
{disabled}
|
|
{type}
|
|
>
|
|
<IconGlyph name={icon} size="sm" />
|
|
</button>
|
|
|
|
<style>
|
|
.icon-button {
|
|
display: inline-grid;
|
|
width: 2.5rem;
|
|
height: 2.5rem;
|
|
place-items: center;
|
|
border: var(--ui-border);
|
|
background: rgba(2, 3, 2, 0.92);
|
|
color: var(--ui-color-muted);
|
|
cursor: pointer;
|
|
padding: 0;
|
|
}
|
|
|
|
.icon-button[data-active="true"],
|
|
.icon-button:hover {
|
|
border-color: var(--ui-color-accent);
|
|
color: var(--ui-color-accent);
|
|
}
|
|
|
|
.icon-button:disabled {
|
|
cursor: not-allowed;
|
|
opacity: 0.45;
|
|
}
|
|
</style>
|