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.

MagicButtonBase

The MagicButtonBase represents the base for button elements that can be styled by using ButtonStyle and matches the magic 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.
  • mouse_cursor (out MouseCursor): The mouse cursor type when the mouse is hovering the button.
  • preferred_min_width (in length): Defines the preferred min width.
  • preferred_min_height (in length): Defines the preferred min height.

Callbacks

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

Example

import { MagicButtonBase, MagicText } from "@vivi/magic.slint";

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