dev: Provide a button--ghost variant

Probesys · Dec 11, 2024 · b1508f3 · b1508f3
1 parent a35d65c
commit b1508f3
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 0 deletions.
diff --git a/assets/stylesheets/components/buttons.css b/assets/stylesheets/components/buttons.css
@@ -126,6 +126,27 @@ button[disabled],
     --button-background-color: var(--color-primary4);
 }
 
+.button--ghost {
+    --button-padding: var(--space-smaller) var(--space-small);
+    --button-background-color: transparent;
+    --button-color: var(--color-grey11);
+
+    font-weight: normal;
+
+    border: 1px solid transparent;
+}
+
+.button--ghost:not([disabled]):hover,
+.button--ghost:not([aria-disabled]):hover,
+.button--ghost:not([disabled]):focus,
+.button--ghost:not([aria-disabled]):focus,
+.button--ghost:not([disabled]):active,
+.button--ghost:not([aria-disabled]):active {
+    --button-background-color: var(--color-grey4);
+
+    border-color: currentcolor;
+}
+
 .button--icon {
     --button-padding: var(--space-small);
 

diff --git a/docs/developers/buttons.md b/docs/developers/buttons.md
@@ -54,6 +54,18 @@ Actually, this form is used for buttons that remove elements from a dynamic list
 </button>
 ```
 
+## Ghost button
+
+Ghost buttons are similar to discreet buttons, but should be used only in places that already contain a lot of information.
+Their border color is transparent by default, making them less intrusive.
+They should only be used for secondary actions.
+
+```html
+<button class="button--ghost">
+    Edit
+</button>
+```
+
 ## Anchor button
 
 It is possible to style buttons as links.