slint/ui-libraries/material/ui/components/tonal_button.slint

// Copyright © SixtyFPS GmbH <info@slint.dev>
// SPDX-License-Identifier: MIT

import { Elevation } from "./elevation.slint";
import { BaseButton } from "./base_button.slint";
import { Typography } from "../styling/typography.slint";
import { MaterialPalette } from "../styling/material_palette.slint";

export component TonalButton {
    in property <image> icon <=> base.icon;
    in property <string> text <=> base.text;
    in property <bool> enabled <=> base.enabled;
    in property <string> tooltip <=> base.tooltip;

    callback clicked <=> base.clicked;

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

    elevation := Elevation {
        border_radius: root.height / 2;
        background: MaterialPalette.secondary_container;
        width: 100%;
        height: 100%;
    }

    base := BaseButton {
        border_radius: elevation.border_radius;
        color: MaterialPalette.on_secondary_container;
    }

    states [
        disabled when !root.enabled : {
            elevation.background: transparent;
            elevation.level: 0;
            base.color: MaterialPalette.on_surface;
        }
        hover when base.has_hover && !base.pressed && !base.enter_pressed : {
            elevation.level: 2;
        }
    ]
}