diff --git a/src/style/theme/common.scss b/src/style/theme/common.scss
index 05bee70..39391f5 100644
--- a/src/style/theme/common.scss
+++ b/src/style/theme/common.scss
@@ -101,6 +101,16 @@ body {
     gap: 12px;
 }
 
+.gap20{
+    display: flex;
+    gap: 20px;
+}
+.gap24{
+    display: flex;
+    gap: 24px;
+}
+
+
 .mt16 {
     margin-top: 16px;
 }
diff --git a/src/views/elementGroups.vue b/src/views/elementGroups.vue
index 7471270..f4093a6 100644
--- a/src/views/elementGroups.vue
+++ b/src/views/elementGroups.vue
@@ -339,6 +339,7 @@
                     <label for="">文字按钮：</label>
                     <GuipButton type="text">强引导</GuipButton>
                     <GuipButton type="grey">弱引导</GuipButton>
+                    <GuipButton type="warn">警示</GuipButton>
                 </div>
                 <div class="ele-item gap12">
                     <label for="">独特按钮：可以自定义划过时 图标图片、文字颜色</label>