diff --git a/package.json b/package.json
index 6b750084..f6df9315 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@netdata/netdata-ui",
-  "version": "5.0.66",
+  "version": "5.0.67",
   "description": "netdata UI kit",
   "main": "dist/index.js",
   "module": "dist/es6/index.js",
diff --git a/src/components/button/styled.js b/src/components/button/styled.js
index 1afe2d9c..db0b340d 100644
--- a/src/components/button/styled.js
+++ b/src/components/button/styled.js
@@ -50,10 +50,21 @@ const getTextColor = props =>
     : getColor(props.flavour === HOLLOW ? "secondaryColor" : "mainBackground")(props)
 const getHoverColor = props =>
   props.neutral ? getColor("generic")(props) : getColor("accent")(props)
-const getAccentColor = props =>
-  props.neutral
-    ? getColor(props.flavour === BORDER_LESS ? "textFocus" : "neutralHighlight")(props)
-    : getColor(props.flavour === HOLLOW ? "secondaryHighlight" : "primaryHighlight")(props)
+
+const getAccentColor = props => {
+  if (props.neutral)
+    return getColor(props.flavour === BORDER_LESS ? "textFocus" : "neutralHighlight")(props)
+
+  const errorColor = props.danger ? "error" : undefined
+  const errorBgColor = props.danger ? "errorSemi" : undefined
+  const warningColor = props.warning ? "warning" : undefined
+  const warningBgColor = props.warning ? "warningSemi" : undefined
+  const primaryColor = errorColor || warningColor || "primaryHighlight"
+  const secondaryHollow = errorBgColor || warningBgColor || "secondaryHighlight"
+
+  return getColor(props.flavour === HOLLOW ? secondaryHollow : primaryColor)(props)
+}
+
 const getTransparent = getColor(["transparent", "full"])
 
 const colorsByFlavour = ({ flavour = DEFAULT, danger, warning, iconColor }) => {