IconButton

import { IconButton } from "material.slint";
export component Example inherits Window {
    width: 100px;
    height: 100px;
    background: transparent;
    IconButton {
        icon: @image-url("icons/menu.svg");
        tooltip: "Menu";
    }
}

slint

An IconButton is a button that displays an icon and can be used for actions, toggles, or navigation.

Properties

checkable

bool default: false

Whether the button can be toggled between checked and unchecked states.

checked

bool (in-out) default: false

Whether the button is currently checked.

enabled

bool default: true

Whether the button is enabled and can be interacted with.

has_error

bool default: false

Whether the button should display an error state.

icon

image default: the empty image

The icon image displayed on the button.

icon_checked

image default: the empty image

The icon image displayed when the button is checked (if checkable).

inline

bool default: false

Whether the button is displayed inline (smaller size, no background).

inverse

bool default: false

Whether to use inverse colors for the button.

string default: ""

A tooltip text that appears when hovering over the button.

Callbacks

clicked()

Invoked when the button is clicked.

IconButton {
    clicked() => {
        debug("Icon button clicked");
    }
}

slint