5 files changed, 34 insertions, 26 deletions

diff --git a/src/index.scss b/src/index.scss
index 3796c18..21054db 100644
--- a/src/index.scss
+++ b/src/index.scss
@@ -6,6 +6,7 @@
 
 @use 'layouts/card';
 @use 'layouts/container';
+@use 'layouts/button-group';
 
 @use 'objects/icon';
 @use 'objects/heading';
diff --git a/src/layouts/_button-group.scss b/src/layouts/_button-group.scss
new file mode 100644
index 0000000..aee2000
--- /dev/null
+++ b/src/layouts/_button-group.scss
@@ -0,0 +1,15 @@
+@use 'iro-sass/src/index' as iro;
+@use '../functions' as fn;
+
+@include iro.props-namespace('button-group') {
+    @include iro.props-store((
+        --dims: (
+            --spacing: 1rem
+        ),
+    ), 'dims');
+
+    @include iro.bem-layout(iro.props-namespace()) {
+        display: flex;
+        gap:     1rem;
+    }
+}
diff --git a/src/objects/_dialog.scss b/src/objects/_dialog.scss
index 453b32b..4f18b08 100644
--- a/src/objects/_dialog.scss
+++ b/src/objects/_dialog.scss
@@ -50,8 +50,8 @@
         }
 
         @include iro.bem-elem('footer') {
-            padding-top: fn.dim(--pad-y);
-            text-align:  right;
+            justify-content: flex-end;
+            padding-top:     fn.dim(--pad-y);
         }
     }
 }
diff --git a/tpl/index.pug b/tpl/index.pug
index 0b74ed8..605fa35 100644
--- a/tpl/index.pug
+++ b/tpl/index.pug
@@ -88,31 +88,23 @@ html
             +rule('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'
+                .l-button-group
+                    +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
+                .l-button-group
+                    +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
-                +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'
+                .l-button-group
+                    +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'
 
             //-----------------------------------------
 
diff --git a/tpl/objects/dialog.pug b/tpl/objects/dialog.pug
index 2cbbd4f..3cbe95e 100644
--- a/tpl/objects/dialog.pug
+++ b/tpl/objects/dialog.pug
@@ -10,7 +10,7 @@ mixin dialog(title)
         +rule('medium')
         section.o-dialog__body
             block
-        footer.o-dialog__footer
+        footer.o-dialog__footer.l-button-group
             +a-button(outline=true)= 'Cancel'
             = ' '
             +a-button(outline=true variant='primary')= 'Continue'