Add a row-level id attribute to the button component.

fixes #340

CHANGELOG.md

@@ -9,6 +9,7 @@
       - This change is particularly useful in SQLite, which generates naive datetime strings by default. You should still store and query datetimes as unix timestamps when possible, to avoid ambiguity and reduce storage size.
  - When calling a file with [`sqlpage.run_sql`](https://sql.ophir.dev/functions.sql?function=run_sql#function), the target file now has access to uploaded files.
  - New article by [Matthew Larkin](https://github.com/matthewlarkin) about [migrations](https://sql.ophir.dev/your-first-sql-website/migrations.sql).
+ - Add a row-level `id` attribute to the button component.
 
 ## 0.21.0 (2024-05-19) 
 

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

@@ -19,6 +19,7 @@ INSERT INTO parameter(component, name, description, type, top_level, optional) S
     ('space_after', 'Whether there should be extra space to the right of the button. In a line of buttons, this will put the buttons before this one on the left, and the ones after on the right.', 'BOOLEAN', FALSE, TRUE),
     ('icon', 'Name of an icon to be displayed on the left side of the button.', 'ICON', FALSE, TRUE),
     ('form', 'Identifier (id) of the form to which the button should submit.', 'TEXT', FALSE, TRUE)
+    ('id', 'HTML Identifier to add to the button element.', 'TEXT', FALSE, TRUE)
 ) x;
 
 -- Inserting example information for the button component

sqlpage/templates/button.handlebars

@@ -11,6 +11,7 @@
         {{~#if outline}} btn-outline-{{outline}}{{/if}}
         {{~#if ../shape}} btn-{{../shape}}{{/if}}
         {{~#if space_after}} me-auto{{/if}}"
+        {{~#if id}} id="{{id}}"{{/id}}
         role="button">
         {{~#if icon~}}
             <span class="me-1">{{~icon_img icon~}}</span>