Create variant for link with 'btn' class (#704)

epfl-si · Feb 13, 2024 · 8a5f63f · 8a5f63f
1 parent c79d1d4
commit 8a5f63f
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 5 deletions.
diff --git a/assets/components/atoms/link/link-button.twig b/assets/components/atoms/link/link-button.twig
@@ -0,0 +1,2 @@
+<a class="btn btn-primary" href="#">Primary button link</a>
+<a class="btn btn-secondary" href="#">Secondary button link</a>
diff --git a/assets/components/atoms/link/link.scss b/assets/components/atoms/link/link.scss
@@ -1,11 +1,7 @@
 @charset 'utf-8';
 
 // All links are underlined by default. Supported browsers will have the right color. https://caniuse.com/#feat=text-decoration
-a,
-a:visited {
-  color: $black;
-  text-decoration: underline;
-  background-color: transparent;
+a {
   text-decoration-color: $link-hover-color;
   transition:
     text-decoration-color 0.2s ease-in-out,

diff --git a/assets/components/atoms/link/link.yml b/assets/components/atoms/link/link.yml
@@ -25,3 +25,9 @@ variants:
   - name: login
     title: Login link
     notes:
+  - name: button
+    title: Button link
+    notes: |
+      Use the classes `btn`, `btn-primary` or `btn-secondary` to create a link with the look of a button.
+
+      ⚠️ Button links should be used to target a page or section of a page – like a regular link. To trigger an action, use an [HTML button](#/atoms/button).