Svelte Toolbar Component • Lapikit

Components

On this page

The kit:toolbar component creates a flexible, customizable toolbar, ideal for organizing actions, titles, filters or other navigation content. It is designed to adapt to different contexts thanks to its layout, style and density options.

<script lang="ts">
	import {
		Bold,
		Italic,
		Underline,
		TextAlignStart,
		TextAlignEnd,
		TextAlignCenter
	} from 'lucide-svelte';
</script>

<kit:toolbar>
	<kit:btn variant="text" size="sm" icon>
		{#snippet prepend()}<kit:icon><Bold /></kit:icon>{/snippet}
	</kit:btn>
	<kit:btn variant="text" size="sm" icon>
		{#snippet prepend()}<kit:icon><Italic /></kit:icon>{/snippet}
	</kit:btn>
	<kit:btn variant="text" size="sm" icon>
		{#snippet prepend()}<kit:icon><Underline /></kit:icon>{/snippet}
	</kit:btn>
	<kit:separator orientation="vertical" />
	<kit:btn variant="text" size="sm" icon>
		{#snippet prepend()}<kit:icon><TextAlignStart /></kit:icon>{/snippet}
	</kit:btn>
	<kit:btn variant="text" size="sm" icon>
		{#snippet prepend()}<kit:icon><TextAlignCenter /></kit:icon>{/snippet}
	</kit:btn>
	<kit:btn variant="text" size="sm" icon>
		{#snippet prepend()}<kit:icon><TextAlignEnd /></kit:icon>{/snippet}
	</kit:btn>
</kit:toolbar>

kit:toolbar renders as a <div> by default but can be changed to <header> or <nav>. It sets role="toolbar" automatically. Place kit:btn, kit:separator, or any other element as children.

Variants

Demonstrates the use of visual variants: filled, outline, text or dash to adapt the style of the bar to different UI contexts.

filled (default): solid background.
outline: visible border.
text : transparent background.
dash : dashed border.
variant: 'filled' | 'outline' | 'text' | 'dash' = 'filled'

<script lang="ts">
	import { Bold, Italic, Underline } from 'lucide-svelte';
	const variants = ['filled', 'outline', 'text', 'dash'] as const;
</script>

<div style="display: flex; flex-direction: column; gap: 1rem;">
	{#each variants as variant (variant)}
		<kit:toolbar {variant}>
			<kit:btn variant="text" size="sm" icon>
				{#snippet prepend()}<kit:icon><Bold /></kit:icon>{/snippet}
			</kit:btn>
			<kit:btn variant="text" size="sm" icon>
				{#snippet prepend()}<kit:icon><Italic /></kit:icon>{/snippet}
			</kit:btn>
			<kit:btn variant="text" size="sm" icon>
				{#snippet prepend()}<kit:icon><Underline /></kit:icon>{/snippet}
			</kit:btn>
		</kit:toolbar>
	{/each}
</div>

density

Shows how to adjust density (compact, comfortable, default) to manage vertical spacing within the bar. Useful for optimizing the interface according to available space.

compact: reduced margins and padding, useful for lists or tables.
comfortable: a visual compromise.
default: standard spacing.
density: 'compact' | 'default' | 'comfortable' = 'default'

<script lang="ts">
	import { Bold, Italic, Underline } from 'lucide-svelte';
	const densities = ['compact', 'default', 'comfortable'] as const;
</script>

<div style="display: flex; flex-direction: column; gap: 1rem;">
	{#each densities as density (density)}
		<kit:toolbar {density}>
			<kit:btn variant="text" size="sm" icon>
				{#snippet prepend()}<kit:icon><Bold /></kit:icon>{/snippet}
			</kit:btn>
			<kit:btn variant="text" size="sm" icon>
				{#snippet prepend()}<kit:icon><Italic /></kit:icon>{/snippet}
			</kit:btn>
			<kit:btn variant="text" size="sm" icon>
				{#snippet prepend()}<kit:icon><Underline /></kit:icon>{/snippet}
			</kit:btn>
		</kit:toolbar>
	{/each}
</div>

orientation

The toolbar can be displayed horizontally (default) or vertically. This example illustrates the use of the orientation=“vertical” option to stack elements from top to bottom.

orientation: 'horizontal' | 'vertical' = 'horizontal'

<script lang="ts">
	import { Bold, Italic, Underline } from 'lucide-svelte';
</script>

<div style="display: flex; gap: 2rem; align-items: flex-start; flex-wrap: wrap;">
	<kit:toolbar>
		<kit:btn variant="text" size="sm" icon>
			{#snippet prepend()}<kit:icon><Bold /></kit:icon>{/snippet}
		</kit:btn>
		<kit:btn variant="text" size="sm" icon>
			{#snippet prepend()}<kit:icon><Italic /></kit:icon>{/snippet}
		</kit:btn>
		<kit:btn variant="text" size="sm" icon>
			{#snippet prepend()}<kit:icon><Underline /></kit:icon>{/snippet}
		</kit:btn>
	</kit:toolbar>

	<kit:toolbar orientation="vertical">
		<kit:btn variant="text" size="sm" icon>
			{#snippet prepend()}<kit:icon><Bold /></kit:icon>{/snippet}
		</kit:btn>
		<kit:btn variant="text" size="sm" icon>
			{#snippet prepend()}<kit:icon><Italic /></kit:icon>{/snippet}
		</kit:btn>
		<kit:btn variant="text" size="sm" icon>
			{#snippet prepend()}<kit:icon><Underline /></kit:icon>{/snippet}
		</kit:btn>
	</kit:toolbar>
</div>

location

Set location to 'top' or 'bottom' to pin the toolbar to the viewport edge (position: fixed). This is intended for app-level toolbars like a top navigation bar or a bottom action bar.

location: 'top' | 'bottom' | undefined = undefined

Without preprocess Lapikit

If you aren’t using the Lapikit preprocessor in svelte.config.js, import the components directly:

import { Toolbar } from 'lapikit/components';

API Reference

kit:toolbar

props	type	description	default
ref $bindable	`HTMLElement`	Bindable reference to the rendered DOM element.	`null`
is	enum	HTML element to render.	`'div'`
s-class	enum	Sets className on toolbar.
s-style	enum	Sets styles on toolbar.
variant	enum	Visual style.	`'filled'`
size	enum	Field size.	`'md'`
density	enum	Padding and size density.	`'default'`
orientation	enum	Layout direction.	`'horizontal'`
rounded	enum	Border radius.	`'md'`
classContent	`string \| string[]`	Class(es) applied to the inner wrapper.
color	`string`	Foreground color override (`--kit-toolbar-fg`).
background	`string`	Background color override (`--kit-toolbar-bg`).
children	`Snippet`	Toolbar content.
elevation	`ElevationState`enum	Add shadow effect.

kit:toolbar is the right place to group Buttons, Chips and Icons in a coherent space.

Examples of toolbar