Buttons

Close Button

Intended mostly as the top right corner of dialogs, notifications and similar cards.

/routes/button-close/+page.svelte

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

	let open = $state(true);
</script>

<div class="dialog rel" style="max-width: 36em" style:opacity={open ? 1 : 0}>
	<ButtonClose topright onclick={() => ((open = false), setTimeout(() => (open = true), 1000))} />
	<h4 class="h4">Some Closable Dialog</h4>
	<p style="margin-top: 0.3em">Look at the very right. There, you can see this button.</p>
</div>

Some Closable Dialog

Look at the very right. There, you can see this button.

Revert Button

Intended for resetting some input to its default value.

/routes/button-revert/+page.svelte

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

	const colors = ['Red', 'Green', 'Blue'] as const;
	const def = colors[0];
	let color: (typeof colors)[number] = $state(def);
</script>

<fieldset class="input-group">
	<legend class="h5">
		<span>Color option</span>
		<ButtonRevert name="Reset input" onclick={() => (color = def)} hidden={color === def} />
	</legend>
	<div class="ctrl-group" style="width: fit-content">
		{#each colors as c}
			<Radio bind:group={color} name="color" label={c} value={c} />
		{/each}
	</div>
</fieldset>
Color option