docs(buttons): update buttons examples

playwright/snapshots/static.spec.ts-snapshots/buttons--button-groups.yaml

@@ -23,6 +23,19 @@
   - button "Start"
   - button "Middle"
   - button "End"
+- heading "With icons" [level=4]
+- group "Primary group with icon and text":
+  - button "Edit"
+  - button "Copy"
+  - button "Delete"
+- group "Secondary group with icon and text":
+  - button "Edit"
+  - button "Copy"
+  - button "Delete"
+- group "Tertiary group with icon and text":
+  - button "Edit"
+  - button "Copy"
+  - button "Delete"
 - group "Primary group":
   - button "Edit"
   - button "Copy"
@@ -35,16 +48,20 @@
   - button "Edit"
   - button "Copy"
   - button "Delete"
+- group "Ghost group":
+  - button "Edit"
+  - button "Copy"
+  - button "Delete"
 - heading "Sizing" [level=4]
-- group "Large group":
+- group "Large group with icon and text":
   - button "Large"
   - button "Group"
   - button "Size"
-- group "Default group":
+- group "Default group with icon and text":
   - button "Default"
   - button "Group"
   - button "Size"
-- group "Small group":
+- group "Small group with icon and text":
   - button "Small"
   - button "Group"
   - button "Size"
@@ -60,15 +77,15 @@
   - button "Small"
   - button "Group"
   - button "Size"
-- group "Large group":
-  - button "Large"
-  - button "Group"
-  - button "Size"
-- group "Default group":
-  - button "Default"
-  - button "Group"
-  - button "Size"
-- group "Small group":
-  - button "Small"
-  - button "Group"
-  - button "Size"
+- group "Large icon group":
+  - button "Edit"
+  - button "Copy"
+  - button "Delete"
+- group "Default icon group":
+  - button "Edit"
+  - button "Copy"
+  - button "Delete"
+- group "Small icon group":
+  - button "Edit"
+  - button "Copy"
+  - button "Delete"

playwright/snapshots/static.spec.ts-snapshots/buttons--selection-buttons.yaml

@@ -1,22 +1,37 @@
-- heading "Single-select" [level=4]
 - group "Basic radio toggle button group":
   - radio "Day" [checked]
   - text: ""
   - radio "Week"
   - text: ""
   - radio "Month"
   - text: ""
-- group "Radio toggle button group with icon":
+- group "Temperature mode selection":
   - radio "Comfort" [checked]
   - text: ""
   - radio "Pre-comfort"
   - text: ""
   - radio "Economy"
   - text: ""
-- group "Layout selection toggle":
+- group "Layout selection":
   - radio "One pane" [checked]
   - radio "Two panes"
   - radio "Three panes"
+- heading "Multi-select" [level=4]
+- group "Email status filter":
+  - checkbox "Read" [checked]
+  - text: ""
+  - checkbox "Unread"
+  - text: ""
+  - checkbox "Archived" [checked]
+  - text: ""
+  - checkbox "Deleted"
+  - text: ""
+- group "Category filter":
+  - checkbox "Garden" [checked]
+  - checkbox "Mobile"
+  - checkbox "Cloud" [checked]
+  - checkbox "AI"
+  - checkbox "Network"
 - heading "Sizing" [level=4]
 - group "Basic radio toggle button group":
   - radio "Large" [checked]
@@ -39,11 +54,36 @@
   - text: ""
   - radio "Size"
   - text: ""
-- heading "Multi-select" [level=4]
-- group "Basic checkbox toggle button group":
-  - checkbox "€"
+- group "Basic radio toggle button group":
+  - radio "Large" [checked]
+  - text: ""
+  - radio "Group"
   - text: ""
-  - checkbox "€€"
+  - radio "Size"
+  - text: ""
+- group "Basic radio toggle button group":
+  - radio "Default" [checked]
+  - text: ""
+  - radio "Group"
+  - text: ""
+  - radio "Size"
+  - text: ""
+- group "Basic radio toggle button group":
+  - radio "Small" [checked]
+  - text: ""
+  - radio "Group"
+  - text: ""
+  - radio "Size"
   - text: ""
-  - checkbox "€€€"
-  - text: ""
+- group "Climate control mode":
+  - radio "Heating"
+  - radio "Water"
+  - radio "Cooling"
+- group "Climate control mode":
+  - radio "Heating"
+  - radio "Water"
+  - radio "Cooling"
+- group "Climate control mode":
+  - radio "Heating"
+  - radio "Water"
+  - radio "Cooling"

playwright/snapshots/static.spec.ts-snapshots/buttons--split-button.yaml

@@ -1,8 +1,8 @@
 - group "Split button primary":
-  - button " Button"
+  - button "Button"
   - button "Dropdown toggle"
 - group "Split button secondary":
-  - button " Button"
+  - button "Button"
   - button "Dropdown toggle"
 - group "Split button primary label only":
   - button "Button"

projects/element-theme/src/styles/bootstrap/_button-group.scss

@@ -76,6 +76,10 @@ $btn-size-sm: 24px !default;
     &.btn-lg {
       inline-size: $btn-size-lg;
     }
+
+    &.btn-sm {
+      inline-size: $btn-size-sm;
+    }
   }
 
   // Dropdown toggle styling for split buttons