"alert" button mode to draw attention to a button.

2 files changed, 5 insertions, 2 deletions

diff --git a/framework/qml/AbstractButton.qml b/framework/qml/AbstractButton.qml
index 6738fc63..a5ec4650 100644
--- a/framework/qml/AbstractButton.qml
+++ b/framework/qml/AbstractButton.qml
@@ -30,6 +30,7 @@ T.Button {
     property alias highlightOpacity: background.highlightOpacity
     property alias horizontalAlignment: label.horizontalAlignment
     property alias verticalAlignment: label.verticalAlignment
+    property alias alert: background.alert
 
     width: Math.max(Units.gridUnit, contentItem.implicitWidth + leftPadding + rightPadding)
     height: contentItem.implicitHeight + topPadding + bottomPadding
diff --git a/framework/qml/DelegateBackground.qml b/framework/qml/DelegateBackground.qml
index 4059d69a..f725352a 100644
--- a/framework/qml/DelegateBackground.qml
+++ b/framework/qml/DelegateBackground.qml
@@ -24,9 +24,11 @@ Rectangle {
     id: root
     property bool focused: false
     property bool selected: false
+    property bool alert: false
     property color highlightColor: Kube.Colors.highlightColor
     property alias highlightOpacity: highlight.opacity
     property color borderColor: Kube.Colors.focusedButtonColor
+    property color alertColor: Kube.Colors.warningColor
 
     Rectangle {
         anchors.fill: parent
@@ -42,8 +44,8 @@ Rectangle {
     }
     Rectangle {
         anchors.fill: parent
-        visible: root.focused && root.selected
-        border.color: root.borderColor
+        visible: root.focused && root.selected || root.alert
+        border.color: root.alert ? root.alertColor : root.borderColor
         border.width: 2
         color: "transparent"
     }