Toolbar component

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.

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.

Examples of toolbar

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'

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'

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'

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:

API Reference

kit:toolbar

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