The 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.
Toolbar
Examples of toolbar
Base
A simple example of Toolbar usage with a few elements placed inside. This is the default configuration, with no particular density or custom orientation.
Toolbar
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.
Toolbar
Toolbar compact
Toolbar comfortable
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.
Toolbar horizontal
Toolbar vertical
Variant
Demonstrates the use of visual variants: outline, text or dash to adapt the style of the bar to different UI contexts.
Toolbar
Toolbar text
Toolbar outline
Toolbar dash
API Reference
props
type
description
default
type_extend
ref $bindable
HTMLElement
Direct access to DOM element
undefined
is
enum
Defines the HTML tag.
div
header | nav | div
classContent
string
Adds one or more custom CSS classes to the Appbar wrapper.
undefined
dark
boolean
Enable dark theme for component.
false
light
boolean
Enable light theme for the component.
false
color
string
Applies a custom color to text or icons.
undefined
background
string
Apply a custom background color.
undefined
density
enum
Controls vertical density
default
compact | comfortable | default
variant
enum
Sets the visual style of the Toolbar.
undefined
outline | text | dash
rounded
string
Controls item rounding (none, sm, md, lg, etc.).
md
orientation
enum
Controls the arrangement of elements in the bar (row or column)
horizontal
horizontal | vertical
location
enum
Allows the toolbar to be attached to the top or bottom of the container
undefined
top | bottom
Variables CSS
variable
default
description
–-toolbar-color
--kit-label-primary
Text color
–-toolbar-background
--kit-background-grouped-tertiary
Background color
–-toolbar-radius
--system-shape-md
Toolbar edge radius
Toolbar is the right place to group Buttons, Chips and Icons in a coherent space.