slint/internal/compiler/widgets/material/button.slint

// Copyright © SixtyFPS GmbH <info@slint.dev>
// SPDX-License-Identifier: GPL-3.0-only OR LicenseRef-Slint-Royalty-free-2.0 OR LicenseRef-Slint-Software-3.0

import { StateLayer } from "components.slint";
import { MaterialFontSettings, MaterialPalette, Elevation } from "styling.slint";

component MaterialButtonBase {
    in property <string> text;
    in property <image> icon;
    in property <length> border-radius <=> state-layer.border-radius;
    in property <bool> checkable;
    in property <brush> text-color;
    in property <float> text-opacity;
    in property <bool> colorize-icon;
    in property <bool> enabled <=> state-layer.enabled;
    in property <length> layout-padding-left;
    in property <length> layout-padding-right;
    out property <bool> has-focus <=> state-layer.has-focus;
    out property <bool> pressed <=> state-layer.pressed;
    in-out property <bool> checked;

    callback clicked <=> state-layer.clicked;

    min-width: layout.min-width;
    min-height: layout.min-height;
    forward-focus: state-layer;

    state-layer := StateLayer {
        width: 100%;
        height: 100%;
        has-ripple: true;
        background: MaterialPalette.foreground-alt;
        ripple-color: MaterialPalette.secondary-ripple;
        checked-background: MaterialPalette.accent-background;
        focusable: true;
    }

    layout := HorizontalLayout {
        spacing: 8px;
        padding-left: root.layout-padding-left;
        padding-right: root.layout-padding-right;

        if root.icon.width > 0 && root.icon.height > 0: Image {
            source <=> root.icon;
            width: 24px;
            opacity: root.text-opacity;
            colorize: root.colorize-icon ? root.text-color : transparent;
        }

        if root.text != "": Text {
            text: root.text;
            color: root.text-color;
            opacity: root.text-opacity;
            vertical-alignment: center;
            horizontal-alignment: center;
            font-weight: MaterialFontSettings.label-large.font-weight;
            accessible-role: none;

            animate color {
                duration: 250ms;
                easing: ease;
            }
        }
    }
}

// Default button widget with Material Design Filled Button look and feel.
export component Button {
    in property <string> text <=> base.text;
    in property <bool> enabled <=> base.enabled;
    in property <bool> checkable;
    in property <image> icon <=> base.icon;
    in property <bool> primary;
    in property <bool> colorize-icon <=> base.colorize-icon;
    out property <bool> has-focus: base.has-focus;
    out property <bool> pressed: self.enabled && base.pressed;
    in-out property <bool> checked;

    callback clicked;

    min-height: max(40px, layout.min-height);
    min-width: max(40px, layout.min-width);
    forward-focus: base;

    accessible-role: button;
    accessible-enabled: root.enabled;
    accessible-checkable: root.checkable;
    accessible-checked: root.checked;
    accessible-label: root.text;
    accessible-action-default => {
        base.clicked();
    }

    states [
        disabled when !root.enabled: {
            background.background: MaterialPalette.foreground-alt;
            background.opacity: 0.12;
            base.text-opacity: 0.38;
            base.text-color: MaterialPalette.control-foreground;
        }
        checked when root.checked: {
            base.text-color: MaterialPalette.accent-foreground;
        }
    ]

    background := Rectangle {
        width: 100%;
        height: 100%;
        border-radius: 20px;
        background: root.primary ? MaterialPalette.accent-background : MaterialPalette.control-background;
        drop-shadow-color: transparent;
        drop-shadow-blur: Elevation.level0;
        drop-shadow-offset-y: 1px;
    }

    layout := HorizontalLayout {
        base := MaterialButtonBase {
            layout-padding-left: 24px;
            layout-padding-right: 24px;
            border-radius: background.border-radius;
            text-color: root.primary ? MaterialPalette.accent-foreground : MaterialPalette.control-foreground;
            text-opacity: 1.0;

            clicked => {
                if root.checkable {
                    root.checked = !root.checked;
                }
                root.clicked();
            }
        }
    }
}

export component TextButton {
    in property <string> text <=> base.text;
    in property <bool> enabled <=> base.enabled;
    in property <image> icon <=> base.icon;
    in property <bool> colorize-icon <=> base.colorize-icon;
    out property <bool> has-focus: base.has-focus;
    out property <bool> pressed: self.enabled && base.pressed;

    callback clicked <=> base.clicked;

    min-height: max(40px, base.min-height);
    min-width: max(40px, base.min-width);
    forward-focus: base;

    accessible-role: button;
    accessible-label: root.text;
    accessible-action-default => {
        clicked();
    }

    base := MaterialButtonBase {
        layout-padding-left: 12px;
        layout-padding-right: 12px;
        height: 100%;
        border-radius: 20px;
        text-color: MaterialPalette.accent-background;
        text-opacity: 1.0;
    }
}

export component IconButton {
    in property <bool> enabled <=> base.enabled;

    in property <image> icon <=> base.icon;

    out property <bool> has-focus: base.has-focus;
    out property <bool> pressed: self.enabled && base.pressed;

    callback clicked <=> base.clicked;

    min-height: max(40px, base.min-height);
    min-width: max(40px, base.min-width);
    forward-focus: base;

    accessible-role: button;
    accessible-action-default => {
        clicked();
    }

    base := MaterialButtonBase {
        layout-padding-left: 8px;
        layout-padding-right: 8px;
        width: 100%;
        height: 100%;
        border-radius: 20px;
        text-color: MaterialPalette.control-foreground-variant;
        colorize-icon: true;
        text-opacity: 1.0;
    }
}