All files / src/lib/components IconButton.svelte

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
<script lang="ts">
	import Icon, { type IconName } from './Icon.svelte';
	import type { HTMLButtonAttributes } from 'svelte/elements';
 
	interface Props extends HTMLButtonAttributes {
		/** The glyph to render. */
		name: IconName;
		/** Required — surfaced as both aria-label and tooltip (icon-only control). */
		label: string;
		iconSize?: number;
	}
 
	let { name, label, iconSize = 18, class: className, ...rest }: Props = $props();
</script>
 
<button {...rest} class="icon-button {className ?? ''}" aria-label={label} title={label}>
	<Icon {name} size={iconSize} />
</button>
 
<style>
	.icon-button {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-height: 44px;
		min-width: 44px;
		padding: var(--space-2);
		border: 1px solid var(--line);
		border-radius: var(--radius-sm);
		background: transparent;
		color: var(--ink);
		cursor: pointer;
	}
 
	.icon-button:hover {
		border-color: var(--success);
		background: var(--mint-soft);
	}
</style>