---
title: SmallAppBar
description: SmallAppBar API.
---

import CodeSnippetMD from '@slint/common-files/src/components/CodeSnippetMD.astro';
import SlintProperty from '@slint/common-files/src/components/SlintProperty.astro';

<CodeSnippetMD imagePath="" noScreenShot scale="3" imageWidth="300" imageHeight="200" imageAlt="">
```slint
import { SmallAppBar } from "@material";
export component Example inherits Window {
    width: 400px;
    height: 200px;
    background: transparent;
    SmallAppBar {
        title: "My App";
        width: parent.width;
        height: parent.height;
    }
}
```
</CodeSnippetMD>

A `SmallAppBar` is a compact version of the app bar that displays the app title and optional action buttons in a smaller, more condensed layout.

## Properties

### show-background
<SlintProperty propName="show-background" typeName="bool">
Whether to show show the background color of the app bar or be transparent.
</SlintProperty>

### leading-button
<SlintProperty propName="leading-button" typeName="struct" structName="IconButtonItem">
An icon button item displayed at the start of the app bar, typically used for navigation.
</SlintProperty>

### title
<SlintProperty propName="title" typeName="string">
The title text displayed in the app bar.
</SlintProperty>

### trailing-buttons
<SlintProperty propName="trailing-buttons" typeName="[struct]" structName="IconButtonItem">
An array of icon button items displayed at the end of the app bar, typically used for actions.
</SlintProperty>

## Callbacks

### leading-button-clicked()
Invoked when the leading icon is clicked.

### trailing-button-clicked(index: int)
Invoked when a trailing icon is clicked, with the index of the clicked icon.