diff --git a/demo/DemoApp.tsx b/demo/DemoApp.tsx
index a998d37..cbe09c9 100644
--- a/demo/DemoApp.tsx
+++ b/demo/DemoApp.tsx
@@ -492,6 +492,16 @@ export function DemoApp()
 				<button>Open a modal</button>
 			</Card>
 
+			<h2>Notifications</h2>
+
+			<Card>
+				<button>Information notification</button>
+				<button className={"success"}>Success notification</button>
+				<button className={"warning"}>Warning notification</button>
+				<button className={"error"}>Error notification</button>
+				<button className={"flat"}>Generic notification</button>
+			</Card>
+
 		</Application>
 	);
 }
diff --git a/src/styles/components/_button.less b/src/styles/components/_button.less
index 11bed29..35ff306 100644
--- a/src/styles/components/_button.less
+++ b/src/styles/components/_button.less
@@ -63,7 +63,7 @@ a.button, button, input[type="submit"], input[type="reset"]
 		}
 	}
 
-	&.green, &.validation, &.ok, &.positive, &.good
+	&.green, &.validation, &.ok, &.positive, &.good, &.success
 	{
 		border-color: var(--green-darker);
 		background: var(--green);
@@ -94,7 +94,7 @@ a.button, button, input[type="submit"], input[type="reset"]
 		}
 	}
 
-	&.orange, &.cancel, &.back, &.return
+	&.orange, &.cancel, &.back, &.return, &.warning
 	{
 		border-color: var(--orange-darker);
 		background: var(--orange);
@@ -125,7 +125,7 @@ a.button, button, input[type="submit"], input[type="reset"]
 		}
 	}
 
-	&.red, &.delete, &.remove, &.close, &.no, &.negative, &.bad
+	&.red, &.delete, &.remove, &.close, &.no, &.negative, &.bad, &.error
 	{
 		border-color: var(--red-darker);
 		background: var(--red);