import QtQuick 2.15
import QtQuick.Layouts 2.15

Item {
    width: 400
    height: 400

    component Button : Item {
        property string text
	property Item background
    }

    ColumnLayout {
        Button {
            text: "A Special Button"
            background: Rectangle {
                implicitWidth: 100
                implicitHeight: 40
                color: "red"
                border.color: "#26282a"
                border.width: 1
                radius: 4
            }
        }
        Button {
            text: "A Special Button"
            background: Rectangle {
                implicitWidth: 100
                implicitHeight: 40
                color: "red"
                border.color: "#26282a"
                border.width: 1
                radius: 4
            }
        }
        Button {
            text: "A Special Button"
            background: Rectangle {
                implicitWidth: 100
                implicitHeight: 40
                color: "red"
                border.color: "#26282a"
                border.width: 1
                radius: 4
            }
        }
        Button {
            text: "A Special Button"
            background: Rectangle {
                implicitWidth: 100
                implicitHeight: 40
                color: "red"
                border.color: "#26282a"
                border.width: 1
                radius: 4
            }
        }
        Button {
            text: "A Special Button"
            background: Rectangle {
                implicitWidth: 100
                implicitHeight: 40
                color: "red"
                border.color: "#26282a"
                border.width: 1
                radius: 4
            }
        }
        Button {
            text: "A Special Button"
            background: Rectangle {
                implicitWidth: 100
                implicitHeight: 40
                color: "red"
                border.color: "#26282a"
                border.width: 1
                radius: 4
            }
        }
        Button {
            text: "A Special Button"
            background: Rectangle {
                implicitWidth: 100
                implicitHeight: 40
                color: "red"
                border.color: "#26282a"
                border.width: 1
                radius: 4
            }
        }
        Button {
            text: "A Special Button"
            background: Rectangle {
                implicitWidth: 100
                implicitHeight: 40
                color: "red"
                border.color: "#26282a"
                border.width: 1
                radius: 4
            }
        }
        Button {
            text: "A Special Button"
            background: Rectangle {
                implicitWidth: 100
                implicitHeight: 40
                color: "red"
                border.color: "#26282a"
                border.width: 1
                radius: 4
            }
        }
        Button {
            text: "A Special Button"
            background: Rectangle {
                implicitWidth: 100
                implicitHeight: 40
                color: "red"
                border.color: "#26282a"
                border.width: 1
                radius: 4
            }
        }
        Button {
            text: "A Special Button"
            background: Rectangle {
                implicitWidth: 100
                implicitHeight: 40
                color: "red"
                border.color: "#26282a"
                border.width: 1
                radius: 4
            }
        }
        Button {
            text: "A Special Button"
            background: Rectangle {
                implicitWidth: 100
                implicitHeight: 40
                color: "red"
                border.color: "#26282a"
                border.width: 1
                radius: 4
            }
        }
        Button {
            text: "A Special Button"
            background: Rectangle {
                implicitWidth: 100
                implicitHeight: 40
                color: "red"
                border.color: "#26282a"
                border.width: 1
                radius: 4
            }
        }
        Button {
            text: "A Special Button"
            background: Rectangle {
                implicitWidth: 100
                implicitHeight: 40
                color: "red"
                border.color: "#26282a"
                border.width: 1
                radius: 4
            }
        }
        Button {
            text: "A Special Button"
            background: Rectangle {
                implicitWidth: 100
                implicitHeight: 40
                color: "red"
                border.color: "#26282a"
                border.width: 1
                radius: 4
            }
        }
        Button {
            text: "A Special Button"
            background: Rectangle {
                implicitWidth: 100
                implicitHeight: 40
                color: "red"
                border.color: "#26282a"
                border.width: 1
                radius: 4
            }
        }
        Button {
            text: "A Special Button"
            background: Rectangle {
                implicitWidth: 100
                implicitHeight: 40
                color: "red"
                border.color: "#26282a"
                border.width: 1
                radius: 4
            }
        }
        Button {
            text: "A Special Button"
            background: Rectangle {
                implicitWidth: 100
                implicitHeight: 40
                color: "red"
                border.color: "#26282a"
                border.width: 1
                radius: 4
            }
        }
        Button {
            text: "A Special Button"
            background: Rectangle {
                implicitWidth: 100
                implicitHeight: 40
                color: "red"
                border.color: "#26282a"
                border.width: 1
                radius: 4
            }
        }
        Button {
            text: "A Special Button"
            background: Rectangle {
                implicitWidth: 100
                implicitHeight: 40
                color: "red"
                border.color: "#26282a"
                border.width: 1
                radius: 4
            }
        }
        Button {
            text: "A Special Button"
            background: Rectangle {
                implicitWidth: 100
                implicitHeight: 40
                color: "red"
                border.color: "#26282a"
                border.width: 1
                radius: 4
            }
        }
        Button {
            text: "A Special Button"
            background: Rectangle {
                implicitWidth: 100
                implicitHeight: 40
                color: "red"
                border.color: "#26282a"
                border.width: 1
                radius: 4
            }
        }
        Button {
            text: "A Special Button"
            background: Rectangle {
                implicitWidth: 100
                implicitHeight: 40
                color: "red"
                border.color: "#26282a"
                border.width: 1
                radius: 4
            }
        }
        Button {
            text: "A Special Button"
            background: Rectangle {
                implicitWidth: 100
                implicitHeight: 40
                color: "red"
                border.color: "#26282a"
                border.width: 1
                radius: 4
            }
        }
        Button {
            text: "A Special Button"
            background: Rectangle {
                implicitWidth: 100
                implicitHeight: 40
                color: "red"
                border.color: "#26282a"
                border.width: 1
                radius: 4
            }
        }
        Button {
            text: "A Special Button"
            background: Rectangle {
                implicitWidth: 100
                implicitHeight: 40
                color: "red"
                border.color: "#26282a"
                border.width: 1
                radius: 4
            }
        }
        Button {
            text: "A Special Button"
            background: Rectangle {
                implicitWidth: 100
                implicitHeight: 40
                color: "red"
                border.color: "#26282a"
                border.width: 1
                radius: 4
            }
        }
        Button {
            text: "A Special Button"
            background: Rectangle {
                implicitWidth: 100
                implicitHeight: 40
                color: "red"
                border.color: "#26282a"
                border.width: 1
                radius: 4
            }
        }
        Button {
            text: "A Special Button"
            background: Rectangle {
                implicitWidth: 100
                implicitHeight: 40
                color: "red"
                border.color: "#26282a"
                border.width: 1
                radius: 4
            }
        }
        Button {
            text: "A Special Button"
            background: Rectangle {
                implicitWidth: 100
                implicitHeight: 40
                color: "red"
                border.color: "#26282a"
                border.width: 1
                radius: 4
            }
        }
        Button {
            text: "A Special Button"
            background: Rectangle {
                implicitWidth: 100
                implicitHeight: 40
                color: "red"
                border.color: "#26282a"
                border.width: 1
                radius: 4
            }
        }
        Button {
            text: "A Special Button"
            background: Rectangle {
                implicitWidth: 100
                implicitHeight: 40
                color: "red"
                border.color: "#26282a"
                border.width: 1
                radius: 4
            }
        }
        Button {
            text: "A Special Button"
            background: Rectangle {
                implicitWidth: 100
                implicitHeight: 40
                color: "red"
                border.color: "#26282a"
                border.width: 1
                radius: 4
            }
        }
        Button {
            text: "A Special Button"
            background: Rectangle {
                implicitWidth: 100
                implicitHeight: 40
                color: "red"
                border.color: "#26282a"
                border.width: 1
                radius: 4
            }
        }
        Button {
            text: "A Special Button"
            background: Rectangle {
                implicitWidth: 100
                implicitHeight: 40
                color: "red"
                border.color: "#26282a"
                border.width: 1
                radius: 4
            }
        }
        Button {
            text: "A Special Button"
            background: Rectangle {
                implicitWidth: 100
                implicitHeight: 40
                color: "red"
                border.color: "#26282a"
                border.width: 1
                radius: 4
            }
        }
        Button {
            text: "A Special Button"
            background: Rectangle {
                implicitWidth: 100
                implicitHeight: 40
                color: "red"
                border.color: "#26282a"
                border.width: 1
                radius: 4
            }
        }
        Button {
            text: "A Special Button"
            background: Rectangle {
                implicitWidth: 100
                implicitHeight: 40
                color: "red"
                border.color: "#26282a"
                border.width: 1
                radius: 4
            }
        }
        Button {
            text: "A Special Button"
            background: Rectangle {
                implicitWidth: 100
                implicitHeight: 40
                color: "red"
                border.color: "#26282a"
                border.width: 1
                radius: 4
            }
        }
        Button {
            text: "A Special Button"
            background: Rectangle {
                implicitWidth: 100
                implicitHeight: 40
                color: "red"
                border.color: "#26282a"
                border.width: 1
                radius: 4
            }
        }
        Button {
            text: "A Special Button"
            background: Rectangle {
                implicitWidth: 100
                implicitHeight: 40
                color: "red"
                border.color: "#26282a"
                border.width: 1
                radius: 4
            }
        }
        Button {
            text: "A Special Button"
            background: Rectangle {
                implicitWidth: 100
                implicitHeight: 40
                color: "red"
                border.color: "#26282a"
                border.width: 1
                radius: 4
            }
        }
        Button {
            text: "A Special Button"
            background: Rectangle {
                implicitWidth: 100
                implicitHeight: 40
                color: "red"
                border.color: "#26282a"
                border.width: 1
                radius: 4
            }
        }
        Button {
            text: "A Special Button"
            background: Rectangle {
                implicitWidth: 100
                implicitHeight: 40
                color: "red"
                border.color: "#26282a"
                border.width: 1
                radius: 4
            }
        }
        Button {
            text: "A Special Button"
            background: Rectangle {
                implicitWidth: 100
                implicitHeight: 40
                color: "red"
                border.color: "#26282a"
                border.width: 1
                radius: 4
            }
        }
        Button {
            text: "A Special Button"
            background: Rectangle {
                implicitWidth: 100
                implicitHeight: 40
                color: "red"
                border.color: "#26282a"
                border.width: 1
                radius: 4
            }
        }
        Button {
            text: "A Special Button"
            background: Rectangle {
                implicitWidth: 100
                implicitHeight: 40
                color: "red"
                border.color: "#26282a"
                border.width: 1
                radius: 4
            }
        }
        Button {
            text: "A Special Button"
            background: Rectangle {
                implicitWidth: 100
                implicitHeight: 40
                color: "red"
                border.color: "#26282a"
                border.width: 1
                radius: 4
            }
        }
        Button {
            text: "A Special Button"
            background: Rectangle {
                implicitWidth: 100
                implicitHeight: 40
                color: "red"
                border.color: "#26282a"
                border.width: 1
                radius: 4
            }
        }
        Button {
            text: "A Special Button"
            background: Rectangle {
                implicitWidth: 100
                implicitHeight: 40
                color: "red"
                border.color: "#26282a"
                border.width: 1
                radius: 4
            }
        }
        Button {
            text: "A Special Button"
            background: Rectangle {
                implicitWidth: 100
                implicitHeight: 40
                color: "red"
                border.color: "#26282a"
                border.width: 1
                radius: 4
            }
        }
        Button {
            text: "A Special Button"
            background: Rectangle {
                implicitWidth: 100
                implicitHeight: 40
                color: "red"
                border.color: "#26282a"
                border.width: 1
                radius: 4
            }
        }
        Button {
            text: "A Special Button"
            background: Rectangle {
                implicitWidth: 100
                implicitHeight: 40
                color: "red"
                border.color: "#26282a"
                border.width: 1
                radius: 4
            }
        }
        Button {
            text: "A Special Button"
            background: Rectangle {
                implicitWidth: 100
                implicitHeight: 40
                color: "red"
                border.color: "#26282a"
                border.width: 1
                radius: 4
            }
        }
        Button {
            text: "A Special Button"
            background: Rectangle {
                implicitWidth: 100
                implicitHeight: 40
                color: "red"
                border.color: "#26282a"
                border.width: 1
                radius: 4
            }
        }
        Button {
            text: "A Special Button"
            background: Rectangle {
                implicitWidth: 100
                implicitHeight: 40
                color: "red"
                border.color: "#26282a"
                border.width: 1
                radius: 4
            }
        }
        Button {
            text: "A Special Button"
            background: Rectangle {
                implicitWidth: 100
                implicitHeight: 40
                color: "red"
                border.color: "#26282a"
                border.width: 1
                radius: 4
            }
        }
        Button {
            text: "A Special Button"
            background: Rectangle {
                implicitWidth: 100
                implicitHeight: 40
                color: "red"
                border.color: "#26282a"
                border.width: 1
                radius: 4
            }
        }
        Button {
            text: "A Special Button"
            background: Rectangle {
                implicitWidth: 100
                implicitHeight: 40
                color: "red"
                border.color: "#26282a"
                border.width: 1
                radius: 4
            }
        }
        Button {
            text: "A Special Button"
            background: Rectangle {
                implicitWidth: 100
                implicitHeight: 40
                color: "red"
                border.color: "#26282a"
                border.width: 1
                radius: 4
            }
        }
        Button {
            text: "A Special Button"
            background: Rectangle {
                implicitWidth: 100
                implicitHeight: 40
                color: "red"
                border.color: "#26282a"
                border.width: 1
                radius: 4
            }
        }
        Button {
            text: "A Special Button"
            background: Rectangle {
                implicitWidth: 100
                implicitHeight: 40
                color: "red"
                border.color: "#26282a"
                border.width: 1
                radius: 4
            }
        }
        Button {
            text: "A Special Button"
            background: Rectangle {
                implicitWidth: 100
                implicitHeight: 40
                color: "red"
                border.color: "#26282a"
                border.width: 1
                radius: 4
            }
        }
        Button {
            text: "A Special Button"
            background: Rectangle {
                implicitWidth: 100
                implicitHeight: 40
                color: "red"
                border.color: "#26282a"
                border.width: 1
                radius: 4
            }
        }
        Button {
            text: "A Special Button"
            background: Rectangle {
                implicitWidth: 100
                implicitHeight: 40
                color: "red"
                border.color: "#26282a"
                border.width: 1
                radius: 4
            }
        }
        Button {
            text: "A Special Button"
            background: Rectangle {
                implicitWidth: 100
                implicitHeight: 40
                color: "red"
                border.color: "#26282a"
                border.width: 1
                radius: 4
            }
        }
        Button {
            text: "A Special Button"
            background: Rectangle {
                implicitWidth: 100
                implicitHeight: 40
                color: "red"
                border.color: "#26282a"
                border.width: 1
                radius: 4
            }
        }
        Button {
            text: "A Special Button"
            background: Rectangle {
                implicitWidth: 100
                implicitHeight: 40
                color: "red"
                border.color: "#26282a"
                border.width: 1
                radius: 4
            }
        }

    }
}