---
title: TonalIconButton
description: TonalIconButton 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 { TonalIconButton } from "@material";
export component Example inherits Window {
    width: 100px;
    height: 100px;
    background: transparent;
    TonalIconButton {
        icon: @image-url("../icons/music_note.svg");
        tooltip: "Music";
    }
}
```
</CodeSnippetMD>

A `TonalIconButton` is a button that displays a secondary container background with an icon, used for less prominent actions than filled icon buttons.

## Properties

### checkable
<SlintProperty propName="checkable" typeName="bool">
Whether the button can be toggled between checked and unchecked states.
</SlintProperty>

### checked
<SlintProperty propName="checked" typeName="bool" propertyVisibility="in-out">
Whether the button is currently checked.
</SlintProperty>

### enabled
<SlintProperty propName="enabled" typeName="bool" defaultValue="true">
Whether the button is enabled and can be interacted with.
</SlintProperty>

### icon
<SlintProperty propName="icon" typeName="image">
The icon image displayed on the button.
</SlintProperty>

### checked-icon
<SlintProperty propName="checked-icon" typeName="image">
The icon image displayed when the button is checked (if checkable).
</SlintProperty>

### tooltip
<SlintProperty propName="tooltip" typeName="string">
A tooltip text that appears when hovering over the button.
</SlintProperty>

## Callbacks

### clicked()
Invoked when the button is clicked.
