Logo FluentUI

Contents

IconButton QML Type

An icon-only button. More...

Import Statement: import FluentUI.Controls 1.0

Properties

Signals

Methods

Detailed Description

IconButton displays a clickable icon without text. It is commonly used in toolbars, command bars, and other compact UI areas where space is limited. The button provides visual hover and press feedback.

Usage Example

 import QtQuick
 import FluentUI.Controls

 IconButton {
     icon.name: "settings"
     icon.width: 20
     icon.height: 20
     onClicked: console.log("Settings opened")
 }

Property Documentation

enabled : bool

Whether the button is interactive. When false, the button appears grayed out and does not respond to clicks.

icon.color : color

The color of the icon. Defaults to the text color of the current theme.

icon.height : int

The height of the icon in pixels.

icon.name : string

The name of the icon to display. This corresponds to a named glyph in the FluentIcons font family.

icon.width : int

The width of the icon in pixels.

text : string

An optional text label for accessibility purposes. This text is not visually displayed but is used for screen readers and tooltips.

Signal Documentation

void onClicked()

Emitted when the button is clicked by the user.

Note: The corresponding handler is onOnClicked.

Method Documentation

void onClicked()

Handles the click event. Connect to this method to perform an action when the button is pressed.