ButtonStyle

Defines the visual settings of a button.

Fields

• background (brush): Defines the brush of the background. (default value: black)
• border_brush (brush): Defines the brush of the border. (default value: black)
• border_radius (length): The size of the radius. (default value: 0)
• border_width (length): Defines the width of the border. (default value: 0)
• icon_style (IconStyle): Defines the style of the icon.
• text_style (TextStyle): Defines the style of the text. (default value: 0)
• padding_left (length): Defines the padding on the left side of the button layout. (default value: 0)
• padding_rigth (length): Defines the padding on the right side of the button layout. (default value: 0)
• padding_top (length): Defines the padding on the top side of the button layout. (default value: 0)
• padding_bottom (length): Defines the padding on the bottom side of the button layout. (default value: 0)
• spacing (length): Defines the distance between elements in the button layout. (default value: 0)
• alignment (LayoutAlignment): Defines the alignment of elements in the button layout. (default value: 0)

ButtonBase

The ButtonBase represents the base for button elements that can be styled by usign ButtonStyle.

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.

Callbacks

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

Example

import { ButtonBase, TextBase } from "@coop/foundation.slint";

export component MyButton inherits ButtonBase {
    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 := TextBase {
        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");
        }
    }    
}