diff --git a/frappe/templates/components/button.html b/frappe/templates/components/button.html
index 985e80315c..a89f0d547b 100644
--- a/frappe/templates/components/button.html
+++ b/frappe/templates/components/button.html
@@ -1,16 +1,19 @@
 ---
 name: "button"
 variant: "secondary"
+size: "small"
 disabled: 0
 url: null
 ---
 
-{%- set static_classes = "px-4 py-2 border rounded-md inline-flex justify-center items-center focus:outline-none leading-5 font-medium text-sm" -%}
+{%- set static_classes = "border rounded-md inline-flex justify-center items-center focus:outline-none font-medium transition duration-150 ease-in-out" -%}
 {%- set dynamic_classes = {
+	"px-4 py-2 text-sm leading-5": size == "small",
+	"px-8 py-3 sm:px-10 sm:py-4 text-base sm:text-lg leading-6": size == "large",
 	"opacity-50 cursor-not-allowed pointer-events-none": disabled,
-	"bg-blue-500 border-transparent hover:bg-blue-400 text-white focus:shadow-outline-blue focus:border-blue-700":
+	"bg-primary-500 border-transparent hover:bg-primary-400 text-white focus:shadow-outline-primary focus:border-primary-600":
 	  variant == "primary",
-	"bg-white border-gray-400 hover:text-gray-800 text-gray-900 focus:shadow-outline-blue focus:border-blue-300":
+	"bg-primary-100 border-transparent text-primary-700 hover:text-primary-600 hover:bg-primary-50 focus:shadow-outline-primary focus:border-primary-300":
 	  variant == "secondary",
 	"bg-red-500 border-transparent hover:bg-red-400 text-white focus:shadow-outline-red focus:border-red-700":
 	  variant == "danger"
@@ -21,7 +24,6 @@ url: null
 <{{html_tag}}
 	class="{{ resolve_class([static_classes, dynamic_classes, class]) }}"
 	{{ 'disabled' if disabled else '' }}
-	{{ ('href="' + url + '"') if url else '' }}
->
+	{{ ('href="' + url + '"') if url else '' }}>
 	{{ label }}
 </{{html_tag}}>