diff --git a/front/ui-docs/components/ui/button.md b/front/ui-docs/components/ui/button.md
index fa8b7d15e..45321eae7 100644
--- a/front/ui-docs/components/ui/button.md
+++ b/front/ui-docs/components/ui/button.md
@@ -1,6 +1,7 @@
 <script setup>
 import Button from '~/components/ui/Button.vue'
 import Layout from '~/components/ui/Layout.vue'
+import { color } from '~/composables/colors.ts';
 
 const click = () => new Promise(resolve => setTimeout(resolve, 1000))
 </script>
@@ -23,14 +24,30 @@ In addition, use [Colors] and [Variants]
 
 Buttons come in different types depending on the type of action they represent.
 
+Find [a complete overview of recommended styles on the color page](../../using-color#links-and-buttons).
+
+### Default
+
+<Layout flex>
+
+```vue-html
+<Button>
+  Default button
+</Button>
+```
+
+<Layout class="preview">
+  <Button>
+    Default button
+  </Button>
+</Layout>
+
+</Layout>
+
 ### Primary
 
 Primary buttons represent **positive** actions such as uploading, confirming, and accepting changes.
 
-::: info
-This is the default type. If you don't specify a type, a primary button is rendered.
-:::
-
 ```vue-html
 <Button primary>
   Primary button