diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml
index 9726d49c25..6666e630a3 100644
--- a/locales/ja-JP.yml
+++ b/locales/ja-JP.yml
@@ -2024,6 +2024,7 @@ pages:
 
     _button:
       text: "タイトル"
+      colored: "色付き"
       action: "ボタンを押したときの動作"
       _action:
         dialog: "ダイアログを表示する"
diff --git a/src/client/app/common/views/pages/page-editor/els/page-editor.el.button.vue b/src/client/app/common/views/pages/page-editor/els/page-editor.el.button.vue
index 579de6a8fc..04001d8560 100644
--- a/src/client/app/common/views/pages/page-editor/els/page-editor.el.button.vue
+++ b/src/client/app/common/views/pages/page-editor/els/page-editor.el.button.vue
@@ -4,6 +4,7 @@
 
 	<section class="xfhsjczc">
 		<ui-input v-model="value.text"><span>{{ $t('blocks._button.text') }}</span></ui-input>
+		<ui-switch v-model="value.primary"><span>{{ $t('blocks._button.colored') }}</span></ui-switch>
 		<ui-select v-model="value.action">
 			<template #label>{{ $t('blocks._button.action') }}</template>
 			<option value="dialog">{{ $t('blocks._button._action.dialog') }}</option>
@@ -52,6 +53,7 @@ export default Vue.extend({
 		if (this.value.content == null) Vue.set(this.value, 'content', null);
 		if (this.value.event == null) Vue.set(this.value, 'event', null);
 		if (this.value.message == null) Vue.set(this.value, 'message', null);
+		if (this.value.message == null) Vue.set(this.value, 'primary', false);
 	},
 });
 </script>
diff --git a/src/client/app/common/views/pages/page/page.button.vue b/src/client/app/common/views/pages/page/page.button.vue
index 9f760bf48c..d3f0307625 100644
--- a/src/client/app/common/views/pages/page/page.button.vue
+++ b/src/client/app/common/views/pages/page/page.button.vue
@@ -1,6 +1,6 @@
 <template>
 <div>
-	<ui-button class="kudkigyw" @click="click()">{{ script.interpolate(value.text) }}</ui-button>
+	<ui-button class="kudkigyw" @click="click()" :primary="value.primary">{{ script.interpolate(value.text) }}</ui-button>
 </div>
 </template>