1 files changed, 40 insertions, 7 deletions

diff --git a/tpl/index.pug b/tpl/index.pug
index c63e9f1..47dbc55 100644
--- a/tpl/index.pug
+++ b/tpl/index.pug
@@ -2,13 +2,14 @@
     let loremIpsum = 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat'
 
 include layouts/container.pug
+
 include objects/heading.pug
 include objects/rule.pug
+include objects/button.pug
 
-mixin box
-    .t-raised
-        +container(padH=true padV=true inPage=true themed=true)
-            block
+mixin box 
+    +container(padX=true padY=true inPage=true theme="raised")
+        block
 
 
 doctype html
@@ -17,11 +18,11 @@ html
         meta(charset='utf-8')
         meta(name='viewport' content='width=device-width, initial-scale=1')
         title iro-design
-        link(rel="stylesheet", href="style.css")
-        script(src="script.js") 
+        link(rel="stylesheet" href="style.css")
+        script(src="script.js")
 
     body(class='t-lighter')
-        +container(padH=true padV=true narrow=true)
+        +container(padX=true padY=true narrow=true)
 
             +h1-heading(level='xl')= 'Heading'
             +rule(level='medium')
@@ -58,3 +59,35 @@ html
                 +rule(level='strong')= 'Strong'
                 +rule(level='medium')= 'Medium'
                 +rule(level='faint')= 'Faint'
+
+            //-----------------------------------------
+
+            +h1-heading(level='xl')= 'Button'
+            +rule(level='medium')
+
+            +box
+                +a-button(variant='accent')= 'Button'
+                = ' '
+                +a-button(variant='accent' disabled=true)= 'Button'
+                = ' '
+                +a-button(variant='accent' outline=true)= 'Button'
+                = ' '
+                +a-button(variant='accent' outline=true disabled=true)= 'Button'
+                br
+                br
+                +a-button(variant='primary')= 'Button'
+                = ' '
+                +a-button(variant='primary' disabled=true)= 'Button'
+                = ' '
+                +a-button(variant='primary' outline=true)= 'Button'
+                = ' '
+                +a-button(variant='primary' outline=true disabled=true)= 'Button'
+                br
+                br
+                +a-button(variant='secondary')= 'Button'
+                = ' '
+                +a-button(variant='secondary' disabled=true)= 'Button'
+                = ' '
+                +a-button(variant='secondary' outline=true)= 'Button'
+                = ' '
+                +a-button(variant='secondary' outline=true disabled=true)= 'Button'