Added button component

madebyshape · May 29, 2020 · d6ec496 · d6ec496
1 parent d654bbc
commit d6ec496
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 0 deletions.
diff --git a/templates/_components/button/_base.twig b/templates/_components/button/_base.twig
@@ -0,0 +1,22 @@
+{% set baseClass = '
+    transition--default
+    inline-block
+    font-medium
+    py-3
+    px-6
+    rounded
+    flex-shrink-0
+    focus:outline-none
+    focus:shadow-outline
+' %}
+
+{% set class = class is defined ? baseClass ~ ' ' ~ class : baseClass %}
+{% set type = type is defined ? type : 'button' %}
+
+<{{ type }}
+    {{ type == 'a' ? ('href="' ~ url ~ '"')|raw }} 
+    class="{{ class }}"
+    {{ attributes is defined ? attributes|raw }}
+>
+    {{ text|raw }}
+</{{ type }}>
diff --git a/templates/_components/button/primary.twig b/templates/_components/button/primary.twig
@@ -0,0 +1,3 @@
+{% include '_components/button/_base' with {
+    class: 'bg-primary-500 text-white | active:bg-primary-600 | hover:bg-primary-600'
+} %}
diff --git a/templates/_components/button/secondary.twig b/templates/_components/button/secondary.twig
@@ -0,0 +1,3 @@
+{% include '_components/button/_base' with {
+    class: 'bg-primary-100 text-primary-500 | active:bg-primary-200 | hover:bg-primary-200'
+} %}