Overview
A toolbar component designed for app bars and navigation. It provides structure for displaying a title, navigation, and action buttons.
Usage
Light theme
Uses the light app bar theme token.
Dark theme
Uses the dark app bar theme token.
Navigation and actions
Brand area
Props
| Name | Description | Type | Default | Required |
|---|---|---|---|---|
type | Controls the toolbar appearance and styling. Options:
| string |
'default'
| — |
textColor | Text color. Default is $themeTokens.text. | string |
null
| — |
backgroundColor | Background color | string |
null
| — |
title | The main title text displayed in the toolbar | string |
''
| — |
brand | Brand text displayed alongside the title in the left area | string |
''
| — |
raised | Whether the toolbar has elevated shadow styling | boolean |
true
| — |
Slots
| Name | Description |
|---|---|
icon | For the navigation icon |
brand | Brand area. Shows brand text by default. |
default | Main content area. Shows the title by default. |
navigation | Navigation links or menu items area. |
actions | Action buttons or secondary controls area. |