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">Button</button>
	<button type="button" class="btn primary">Primary Button</button>
	<button type="button" class="btn" disabled>Disabled Button</button>
	<button type="button" class="btn box-btn">Box Button</button>
	<button type="submit" class="btn primary">Submit Button</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>
</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>