Toolbars

Regular

Viewi
<Toolbar>
    <Btn icon="true">
        <Icon name="mdi-menu" />
    </Btn>
    <ToolbarTitle>Viewi</ToolbarTitle>
    <Spacer></Spacer>
    <Btn icon="true">
        <Icon name="mdi-export" />
    </Btn>
</Toolbar>

Dark and Prominent

Viewi
<Toolbar dark="true" prominent="true">
    <Btn icon="true" dark="true">
        <Icon name="mdi-menu" dark="true" />
    </Btn>
    <ToolbarTitle>Viewi</ToolbarTitle>
    <Spacer></Spacer>
    <Btn icon="true" dark="true">
        <Icon name="mdi-export" dark="true" />
    </Btn>
</Toolbar>

Colors

Warning
Success
Error
Secondary
Primary
Info
Tertiary
Accent
Available colors: success, primary, secondary, accent, error, warning, tertiary, info
<Toolbar color="warning">
    <Btn icon="true" dark="true">
        <Icon name="mdi-menu" dark="true" />
    </Btn>
    <ToolbarTitle>Warning</ToolbarTitle>
</Toolbar>

Collapse

Viewi
<Toolbar dark="true" color="info" collapse="true">
    <Btn icon="true" dark="true">
        <Icon name="mdi-menu" dark="true" />
    </Btn>
    <ToolbarTitle>Viewi</ToolbarTitle>
    <Spacer></Spacer>
    <Btn icon="true" dark="true">
        <Icon name="mdi-dots-vertical" dark="true" />
    </Btn>
</Toolbar>

Dense

Viewi
<Toolbar dark="true" color="info" dense="true">
    <Btn icon="true" dark="true">
        <Icon name="mdi-menu" dark="true" />
    </Btn>
    <ToolbarTitle>Viewi</ToolbarTitle>
    <Spacer></Spacer>
    <Btn icon="true" dark="true">
        <Icon name="mdi-magnify" dark="true" />
    </Btn>
    <Btn icon="true" dark="true">
        <Icon name="mdi-heart" dark="true" />
    </Btn>
    <Btn icon="true" dark="true">
        <Icon name="mdi-dots-vertical" dark="true" />
    </Btn>
</Toolbar>

Extended

Viewi
<Toolbar dark="true" color="info" extended="true">
    <Btn icon="true" dark="true">
        <Icon name="mdi-menu" dark="true" />
    </Btn>
    <ToolbarTitle>Viewi</ToolbarTitle>
    <Spacer></Spacer>
    <Btn icon="true" dark="true">
        <Icon name="mdi-magnify" dark="true" />
    </Btn>
    <Btn icon="true" dark="true">
        <Icon name="mdi-heart" dark="true" />
    </Btn>
    <Btn icon="true" dark="true">
        <Icon name="mdi-dots-vertical" dark="true" />
    </Btn>
</Toolbar>

Floating

<Toolbar floating="true" dense="true">
    <TextField prependIcon="mdi-magnify" hideDetails="true" singleLine="true" />
    <Btn icon="true">
        <Icon name="mdi-crosshairs-gps" />
    </Btn>
    <Btn icon="true">
        <Icon name="mdi-dots-vertical" />
    </Btn>
</Toolbar>