export component SquareIconWidget {
    // Skeleton of suqre-shaped icon widgets
    // with similar basic functions and appearance
    in property <int> bar_height;
    in property <string> icon_text;
    in property <string> tooltip_text;

    callback square_btn_callback();

    height: bar_height * 1px;   // Same height as the bar
    width: bar_height * 1px;    // Square shape

    Rectangle {
        background: touch_area.pressed ? #4a5f70
                  : touch_area.has-hover ? #6d8a4d
                  : #8e9162;
        border-radius: 3px;

        HorizontalLayout {
            padding-left: 3px;
            padding-right: 3px;

            Text {
                text: icon_text;    // Every `SquareIconWidget` has an icon
                color: white;
                vertical-alignment: center;
                horizontal-alignment: center;
            }
        }

        touch_area := TouchArea {
            // Action when the icon is clicked  
            clicked => { square_btn_callback(); }
        }
    }

    // Tooltip will be added later — Slint’s ToolTip element is window-global
}