diff --git a/src/button/button.styles.ts b/src/button/button.styles.ts
index 9de973f2..9865a5c0 100644
--- a/src/button/button.styles.ts
+++ b/src/button/button.styles.ts
@@ -59,7 +59,7 @@ const BaseButtonStyles = css`
 		justify-content: center;
 		align-items: center;
 		padding: ${buttonPaddingVertical} ${buttonPaddingHorizontal};
-		white-space: nowrap;
+		white-space: wrap;
 		outline: none;
 		text-decoration: none;
 		border: calc(${borderWidth} * 1px) solid ${buttonBorder};
@@ -68,6 +68,7 @@ const BaseButtonStyles = css`
 		fill: inherit;
 		cursor: inherit;
 		font-family: inherit;
+		max-width: 300px;
 	}
 	:host(:hover) {
 		background: ${buttonPrimaryHoverBackground};