ActionChip

import { ActionChip } from "@material";
export component Example inherits Window {
    width: 200px;
    height: 100px;
    background: transparent;
    ActionChip {
        text: "Action";
        icon: @image-url("../icons/add.svg");
        width: 100px;
        height: 32px;
    }
}

slint

An ActionChip is a compact element that represents an action or choice. It can contain text, icons, and avatars, and is commonly used in forms, search interfaces, and other interactive areas.

Properties

avatar-icon

image default: the empty image

An optional avatar image displayed on the chip.

avatar-background

color default: #00000000

The background color for the avatar.

enabled

bool default: true

Whether the chip is enabled and can be interacted with.

has-focus

bool default: false

Whether the component has focus.

icon

image default: the empty image

An optional icon displayed on the chip.

text

string default: ""

The text label displayed on the chip.

string default: ""

A tooltip text that appears when hovering over the chip.

Callbacks

clicked()

Invoked when the chip is clicked.

functions

clear-focus()

Clears the focus from the component.

focus()

Focuses the component.