Merge pull request #2106 from cfpb/ans_link_btns

Refine button links - add icon examples
cfpb · Nov 13, 2024 · b907a72 · b907a72
2 parents 59e02dd + 5edc8e5
commit b907a72
Show file tree

Hide file tree

Showing 30 changed files with 152 additions and 129 deletions.
diff --git a/docs/pages/buttons.md b/docs/pages/buttons.md
@@ -171,6 +171,23 @@ variation_groups:
                   See Privacy Act statement
               </a>
           </div>
+
+          <br>
+
+          <div class="m-btn-group">
+              <a class="a-btn">
+                  <span>Download PDF</span>
+                  <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="cf-icon-svg cf-icon-svg--download" viewBox="0 0 12 19"><path d="M11.16 16.153a.477.477 0 0 1-.476.475H1.316a.476.476 0 0 1-.475-.475V3.046a.476.476 0 0 1 .475-.475h6.95l2.893 2.893zm-1.11-9.925H8.059a.575.575 0 0 1-.574-.573V3.679H1.95v11.84h8.102zm-1.234 5.604L6.388 14.26a.554.554 0 0 1-.784 0l-2.428-2.428a.554.554 0 1 1 .783-.784l1.483 1.482V7.41a.554.554 0 1 1 1.108 0v5.12l1.482-1.482a.554.554 0 0 1 .784.783z"></path></svg>
+              </a>
+              <button class="a-btn a-btn--link" href="#">
+                  <span>Download CSV</span>
+                  <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="cf-icon-svg cf-icon-svg--download" viewBox="0 0 12 19"><path d="M11.16 16.153a.477.477 0 0 1-.476.475H1.316a.476.476 0 0 1-.475-.475V3.046a.476.476 0 0 1 .475-.475h6.95l2.893 2.893zm-1.11-9.925H8.059a.575.575 0 0 1-.574-.573V3.679H1.95v11.84h8.102zm-1.234 5.604L6.388 14.26a.554.554 0 0 1-.784 0l-2.428-2.428a.554.554 0 1 1 .783-.784l1.483 1.482V7.41a.554.554 0 1 1 1.108 0v5.12l1.482-1.482a.554.554 0 0 1 .784.783z"></path></svg>
+              </button>
+              <a class="a-btn a-btn--link a-btn--secondary" href="#">
+                  <span>External link</span>
+                  <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="cf-icon-svg cf-icon-svg--external-link" viewBox="0 0 14 19"><path d="M13.017 3.622v4.6a.554.554 0 0 1-1.108 0V4.96L9.747 7.122a1.7 1.7 0 0 1 .13.646v5.57A1.664 1.664 0 0 1 8.215 15h-5.57a1.664 1.664 0 0 1-1.662-1.663v-5.57a1.664 1.664 0 0 1 1.662-1.662h5.57A1.65 1.65 0 0 1 9 6.302l2.126-2.126H7.863a.554.554 0 1 1 0-1.108h4.6a.554.554 0 0 1 .554.554M8.77 8.1l-2.844 2.844a.554.554 0 0 1-.784-.783l2.947-2.948H2.645a.555.555 0 0 0-.554.555v5.57a.555.555 0 0 0 .554.553h5.57a.555.555 0 0 0 .554-.554z"></path></svg>
+              </a>
+          </div>
         variation_description: >
           A link can be styled as a button, and vice versa.
       - variation_is_deprecated: false

diff --git a/packages/cfpb-design-system/dist/components/cfpb-buttons/index.css b/packages/cfpb-design-system/dist/components/cfpb-buttons/index.css