From b910d6f73044bf18476dcb4bca909439d6ae4bca Mon Sep 17 00:00:00 2001
From: Joren Broekema <joren.broekema@ing.com>
Date: Mon, 19 Oct 2020 13:06:46 +0200
Subject: [PATCH] fix(button): set width/height clickarea 100%

---
 .changeset/curly-oranges-promise.md | 5 +++++
 packages/button/src/LionButton.js   | 2 ++
 2 files changed, 7 insertions(+)
 create mode 100644 .changeset/curly-oranges-promise.md

diff --git a/.changeset/curly-oranges-promise.md b/.changeset/curly-oranges-promise.md
new file mode 100644
index 000000000..d7b9a385e
--- /dev/null
+++ b/.changeset/curly-oranges-promise.md
@@ -0,0 +1,5 @@
+---
+'@lion/button': patch
+---
+
+On top of the 40x40px min height and width, set width/height to 100% so that the clickarea covers the entire width or height of the button.
diff --git a/packages/button/src/LionButton.js b/packages/button/src/LionButton.js
index f2c615c65..8f9449163 100644
--- a/packages/button/src/LionButton.js
+++ b/packages/button/src/LionButton.js
@@ -76,6 +76,8 @@ export class LionButton extends DisabledWithTabIndexMixin(SlotMixin(LitElement))
           /* src = https://www.smashingmagazine.com/2012/02/finger-friendly-design-ideal-mobile-touchscreen-target-sizes/ */
           min-height: 40px;
           min-width: 40px;
+          width: 100%;
+          height: 100%;
         }
 
         .button-content {