Merge remote-tracking branch 'playground/master'

src/back/jdd-components/buttons/buttons.css

@@ -5,6 +5,11 @@
 		flex-flow: row wrap;
 	}
 
+	&.buttons--mode-row-center {
+		flex-flow: row wrap;
+		justify-content: center;
+	}
+
 	&.buttons--mode-column {
 		flex-flow: column;
 	}
@@ -40,17 +45,24 @@
 	.button {
 		margin: 0;
 
+		svg {
+			height: var(--svg-size);
+			width: var(--svg-size);
+		}
+
 		&.button--size-tiny {
 			font-size: 10px;
+			--svg-size: 12px;
 		}
 
 		&.button--size-small {
 			font-size: 14px;
+			--svg-size: 16px;
 		}
 
 		&.button--size-medium {
 			font-size: 16px;
-
+			--svg-size: 18px;
 			@container (max-width: 500px) {
 				font-size: 15px;
 			}
@@ -58,6 +70,7 @@
 
 		&.button--size-large {
 			font-size: 24px;
+			--svg-size: 24px;
 
 			@container (max-width: 500px) {
 				font-size: 18px;
@@ -66,6 +79,7 @@
 
 		&.button--size-extra-large {
 			font-size: 32px;
+			--svg-size: 32px;
 
 			@container (max-width: 500px) {
 				font-size: 24px;

src/back/jdd-components/buttons/buttons.jdd.tsx

@@ -5,7 +5,7 @@ import { button, button_variants } from "src/back/elements/button.js";
 import { getAllIconNames } from "src/back/icons.js";
 
 const component_arguments = {
-	mode: new ComponentArguments.Enum(["column", "row"]),
+	mode: new ComponentArguments.Enum(["column", "row", "row-center"]),
 	gap: new ComponentArguments.Enum(["none", "narrow", "medium", "wide"]),
 	bleed: new ComponentArguments.Enum(["none", "bleed", "screen"]).setDefaultValue(
 		"none"