icon button documentation

Author: lovasoa

CHANGELOG.md

@@ -15,6 +15,8 @@
  - Avoid vertical scrolling caused by the footer even when the page content is short.
  - Add a new `compact` attribute to the [list](https://sql.ophir.dev/documentation.sql?component=list#component), allowing to display more items in a list without taking up too much space. Great for displaying long lists of items.
    - ![compact list screenshot](https://github.com/lovasoa/SQLpage/assets/552629/41302807-c6e4-40a0-9486-bfd0ceae1537)
+ - Add property `narrow` to the [button](https://sql.ophir.dev/documentation.sql?component=button#component) component to make the button narrower. Ideal for buttons with icons.
+   - ![icon buttons](https://github.com/lovasoa/SQLpage/assets/552629/7fcc049e-6012-40c1-a8ee-714ce70a8763)
 
 ## 0.23.0 (2024-06-09)
 

examples/official-site/sqlpage/migrations/18_button.sql

@@ -51,7 +51,20 @@ INSERT INTO example(component, description, properties) VALUES
         {"link":"#", "color":"info", "title":"Info"},
         {"link":"#", "color":"dark", "title":"Dark"},
         {"link":"#", "color":"warning", "title":"Warning"},
-        {"link":"#", "color":"danger", "title":"Narrow", "narrow":true}]')
+        {"link":"#", "color":"danger", "title":"Narrow"}]')
+    );
+
+INSERT INTO example(component, description, properties) VALUES
+    ('button', 'Icon buttons using the narrow property',
+    json('[{"component":"button"}, 
+        {"link":"#", "narrow":true, "icon":"edit", "color":"primary", "tooltip":"Edit" },
+        {"link":"#", "narrow":true, "icon":"trash", "color":"danger", "tooltip":"Delete" },
+        {"link":"#", "narrow":true, "icon":"corner-down-right", "color":"info", "tooltip":"Preview" },
+        {"link":"#", "narrow":true, "icon":"download", "color":"success", "tooltip":"Download" },
+        {"link":"#", "narrow":true, "icon":"upload", "color":"warning", "tooltip":"Upload" },
+        {"link":"#", "narrow":true, "icon":"info-circle", "color":"cyan", "tooltip":"Info" },
+        {"link":"#", "narrow":true, "icon":"help-circle", "color":"purple", "tooltip":"Help" },
+        {"link":"#", "narrow":true, "icon":"settings", "color":"indigo", "tooltip":"Settings" }]')
     );
 
 INSERT INTO example(component, description, properties) VALUES