Buttons

Basic Buttons

For most buttons, you will just use simple classes.

/routes/buttons/+page.svelte

<div class="btn-group">
	<button type="button" class="btn">Basic</button>
	<button type="button" class="btn primary">Primary</button>
	<button type="button" class="btn dark">Dark</button>
	<button type="button" class="btn" disabled>Disabled</button>
	<button type="button" class="btn box-btn">Boxy</button>
	<button type="button" class="btn primary theme-error">Destructive</button>
</div>

Icon Buttons

Or you can also use it in combination with an icon. Jhana will auto-detect any direct svg or img child. In case you need an only-icon no-text button, you should add the icon class.

/routes/icon-button/+page.svelte

<script lang="ts">
	import { Icon, iconPrint, iconDownload } from '@leon8ix/jhana-ui';
</script>

<div class="input-group">
	<button type="button" class="btn">
		<Icon icon={iconDownload} width="1.4em" height="1.4em" color="var(--cDark)" />
		<span>Icon Button</span>
	</button>
	<button type="button" class="btn icon">
		<Icon icon={iconPrint} width="1.4em" height="1.4em" color="var(--cDark)" />
	</button>

	<button type="button" class="btn dark icon-root">
		<Icon icon={iconDownload} width="1.4em" height="1.4em" color="var(--cLight)" hover="var(--cLighter)" />
		<span>Icon Button</span>
	</button>
	<button type="button" class="btn dark icon-root icon">
		<Icon icon={iconPrint} width="1.4em" height="1.4em" color="var(--cLight)" hover="var(--cLighter)" />
	</button>
</div>

Spinner Buttons

If you want to indicate the progress of a button click, you can juts drop a Spinner in there. It will magically work. But you need to wrap the spinner in an empty container.

/routes/icon-button/+page.svelte

<script lang="ts">
	import { NumberInput, Spinner } from '@leon8ix/jhana-ui';

	let isProcessing = $state([false, false]);
	let durationMs = $state(1000);

	function onclick(index: number) {
		isProcessing[index] = true;
		setTimeout(() => (isProcessing[index] = false), durationMs);
	}
</script>

<div class="flex-hrz">
	<NumberInput label="Duration (ms)" bind:value={durationMs} min={0} step={500} class="w-md" />
	<div class="btn-group">
		<button type="button" class="btn" onclick={() => onclick(0)}>
			<span>Spinner Button</span>
			{#if isProcessing[0]}
				<span><Spinner color="var(--cLight)" size="1.4em" strength={9} /></span>
			{/if}
		</button>
		<button type="button" class="btn primary" onclick={() => onclick(1)}>
			<span>Primary Spinner Button</span>
			{#if isProcessing[1]}
				<span><Spinner color="var(--cAcc)" size="1.4em" strength={9} /></span>
			{/if}
		</button>
	</div>
</div>

Action Buttons

/routes/action-buttons/+page.svelte

<script lang="ts">
	import { ActionButton, iconActionAdd, iconActionDown, iconActionRemove, iconActionUp } from '@leon8ix/jhana-ui';
</script>

<div class="ctrl-group" style="width: fit-content">
	<ActionButton icon={iconActionAdd} label="Add" />
	<ActionButton icon={iconActionUp} label="Up" />
	<ActionButton icon={iconActionDown} label="Down" />
	<ActionButton icon={iconActionRemove} label="Remove" />
</div>