diff --git a/src/components/CheckboxRadioSwitch/CheckboxRadioSwitch.vue b/src/components/CheckboxRadioSwitch/CheckboxRadioSwitch.vue
index a0b75eb5ca..a8efc64043 100644
--- a/src/components/CheckboxRadioSwitch/CheckboxRadioSwitch.vue
+++ b/src/components/CheckboxRadioSwitch/CheckboxRadioSwitch.vue
@@ -70,6 +70,27 @@ export default {
 		sharingPermission: {{ sharingPermission }}
 	</div>
 </template>
+<script>
+	export default {
+		data() {
+			return {
+				sharingPermission: 'r',
+			}
+		}
+	}
+</script>
+```
+
+### Standard radio set with alternative button style
+```vue
+<template>
+	<div>
+		<CheckboxRadioSwitch :checked.sync="sharingPermission" value="r" name="sharing_permission_radio" type="radio" :button-variant="true" button-variant-grouped="vertical">Default permission read</CheckboxRadioSwitch>
+		<CheckboxRadioSwitch :checked.sync="sharingPermission" value="rw" name="sharing_permission_radio" type="radio" :button-variant="true" button-variant-grouped="vertical">Default permission read+write</CheckboxRadioSwitch>
+		<br>
+		sharingPermission: {{ sharingPermission }}
+	</div>
+</template>
 <script>
 export default {
 	data() {
@@ -133,6 +154,9 @@ export default {
 			'checkbox-radio-switch--checked': isChecked,
 			'checkbox-radio-switch--disabled': disabled,
 			'checkbox-radio-switch--indeterminate': indeterminate,
+			'checkbox-radio-switch--button-variant': buttonVariant,
+			'checkbox-radio-switch--button-variant-v-grouped': buttonVariant && buttonVariantGrouped === 'vertical',
+			'checkbox-radio-switch--button-variant-h-grouped': buttonVariant && buttonVariantGrouped === 'horizontal',
 		}"
 		:style="cssVars"
 		class="checkbox-radio-switch">
@@ -149,7 +173,7 @@ export default {
 		<label :for="id" class="checkbox-radio-switch__label">
 			<div v-if="loading" class="icon-loading-small checkbox-radio-switch__icon" />
 			<icon :is="checkboxRadioIconElement"
-				v-else
+				v-else-if="!buttonVariant"
 				:size="size"
 				class="checkbox-radio-switch__icon"
 				title=""
@@ -210,6 +234,25 @@ export default {
 			validator: type => type === TYPE_CHECKBOX || type === TYPE_RADIO || type === TYPE_SWITCH,
 		},
 
+		/**
+		 * Toggle the alternative button style
+		 */
+		buttonVariant: {
+			type: Boolean,
+			default: false,
+		},
+
+		/**
+		 * Are the elements are all direct siblings?
+		 * If so they will be grouped horizontally or vertically
+		 * Possible values are `no`, `horizontal`, `vertical`.
+		 */
+		buttonVariantGrouped: {
+			type: String,
+			default: 'no',
+			validator: v => ['no', 'vertical', 'horizontal'].includes(v),
+		},
+
 		/**
 		 * Checked state. To be used with `:value.sync`
 		 */
@@ -459,10 +502,80 @@ $spacing: 4px;
 		color: var(--color-text-lighter);
 	}
 
-	// If  switch is checked AND disabled, use the fade primary colour
+	// If switch is checked AND disabled, use the fade primary colour
 	&-switch.checkbox-radio-switch--disabled.checkbox-radio-switch--checked &__icon {
 		color: var(--color-primary-element-light);
 	}
-}
 
+	&--button-variant &__label {
+		border-radius: 0;
+		width: 100%;
+		margin: 0;
+	}
+
+	&--button-variant:not(&--button-variant-v-grouped):not(&--button-variant-h-grouped) {
+		border-radius: var(--border-radius-large);
+	}
+
+	&--button-variant-v-grouped {
+		&:first-of-type {
+			border-top-left-radius: var(--border-radius-large);
+			border-top-right-radius: var(--border-radius-large);
+		}
+		&:last-of-type {
+			border-bottom-left-radius: var(--border-radius-large);
+			border-bottom-right-radius: var(--border-radius-large);
+		}
+
+		// avoid double borders between elements
+		& + &:not(&.checkbox-radio-switch--checked) {
+			border-top: 0;
+		}
+		& + &.checkbox-radio-switch--checked {
+			// as the selected element has all borders:
+			// small trick to cover the previous bottom border (only if there is one)
+			margin-top: -2px;
+		}
+	}
+
+	&--button-variant-h-grouped {
+		&:first-of-type {
+			border-top-left-radius: var(--border-radius-large);
+			border-bottom-left-radius: var(--border-radius-large);
+		}
+		&:last-of-type {
+			border-top-right-radius: var(--border-radius-large);
+			border-bottom-right-radius: var(--border-radius-large);
+		}
+
+		// avoid double borders between elements
+		& + &:not(&.checkbox-radio-switch--checked) {
+			border-left: 0;
+		}
+		& + &.checkbox-radio-switch--checked {
+			// as the selected element has all borders:
+			// small trick to cover the previous bottom border (only if there is one)
+			margin-left: -2px;
+		}
+	}
+
+	&--button-variant.checkbox-radio-switch {
+		border: 2px solid var(--color-border-dark);
+		// better than setting border-radius on labels (producing a small gap)
+		overflow: hidden;
+
+		&--checked {
+			font-weight: bold;
+			border: 2px solid var(--color-primary-element-light);
+
+			&:hover {
+				border: 2px solid var(--color-primary);
+			}
+
+			label {
+				background-color: var(--color-background-dark);
+			}
+		}
+	}
+}
 </style>