ButtonAction

The ButtonAction enum defines different variants of a button default, primary and destructive.

• default: The button requires less attention from the user.
• primary: Suggested action - highest level of attention.
• destructive: Destructive action - highest level of attention.

PureButtonBase

The PureButtonBase represents the base for button elements that can be styled by usign ButtonStyle and matches the pure style.

Properties

• enabled (in bool): If set to false the button is disabled.
• has_hover (out bool): Button sets this to true when the mouse is over it.
• has_focus (out bool): Button sets this to true when the area has keyboard focus.
• pressed (out bool): Set to true by the button when the mouse is pressed over it.
• enter_pressed (out bool): Set to true by the button when the area has focus and enter key is pressed.
• style (in ButtonStyle): Defines the style of the button.
• icon_style (out IconStyle): Gets the style of the icon of the button.
• text_style (out TextStyle): Gets the style of the text of the button.
• mouse_cursor (out MouseCursor): The mouse cursor type when the mouse is hovering the button.
• prefered_min_width (in length): Defines the prefered min width.
• prefered_min_height (in length): Defines the prefered min height.

Callbacks

• clicked(): Invoked when clicked: A finger or the left mouse button is pressed, then released on this element.

Example

import { PureButtonBase, PureText } from "@coop/pure.slint";

export component MyButton inherits PureButtonBase {
    in property <string> text <=> text_label.text;

    width: 60px;
    height: 20px;
    
    style: {
        background: black,
        border_radius: 8px,
        text_style: {
            foreground: white,
            font_size: 12px,
            font_weight: 400,
        }
    };

    text_label := PureText {
        style: root.text_style;
        vertical_alignment: center;
        horizontal_alignment: center;
    }
}

export component Example inherits Window {
    width: 200px;
    height: 100px;

    MyButton {
        text: "Click me";

        clicked => {
            debug("Button clicked");
        }
    }    
}