Toolbar component
Toolbar
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.
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.
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.
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.
Variant
Demonstrates the use of visual variants: outline, text or dash to adapt the style of the bar to different UI contexts.
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.
