{"result":{"depiction_url":null,"edges":{"in_module":{"objects":[{"created":"2020-05-30T05:48:09Z","object_id":{"id":1303,"is_a":["text","documentation","reference","module"],"name":"doc_module_mod_wires","title":"mod_wires","uri":"https:\/\/zotonic.com\/id\/1303"},"seq":1000000}],"predicate":{"id":333,"is_a":["meta","predicate"],"name":"in_module","title":{"_type":"trans","tr":{"en":"In module"}},"uri":"https:\/\/zotonic.com\/id\/in_module"}},"references":{"objects":[{"created":"2020-05-30T05:48:09Z","object_id":{"id":1486,"is_a":["text","documentation","reference","template_action"],"name":"doc_template_action_action_alert","title":"alert","uri":"https:\/\/zotonic.com\/id\/1486"},"seq":1000000}],"predicate":{"id":332,"is_a":["meta","predicate"],"name":"references","title":{"_type":"trans","tr":{"en":"References"}},"uri":"https:\/\/zotonic.com\/id\/references"}},"refers":{"objects":[{"created":"2026-09-09T13:48:07Z","object_id":{"id":1486,"is_a":["text","documentation","reference","template_action"],"name":"doc_template_action_action_alert","title":"alert","uri":"https:\/\/zotonic.com\/id\/1486"},"seq":1000000}],"predicate":{"id":2409,"is_a":["meta","predicate"],"name":"refers","title":{"_type":"trans","tr":{"en":"Refers"}},"uri":"https:\/\/zotonic.com\/id\/refers"}},"subject":{"objects":[{"created":"2026-09-09T13:48:07Z","object_id":{"id":2555,"is_a":["categorization","keyword","keyword_information_type"],"name":"zotonic_topic_reference","title":"Reference","uri":"https:\/\/zotonic.com\/id\/2555"},"seq":1},{"created":"2026-09-09T13:48:07Z","object_id":{"id":2563,"is_a":["categorization","keyword","keyword_audience"],"name":"zotonic_topic_frontend_developer","title":"Frontend developer","uri":"https:\/\/zotonic.com\/id\/2563"},"seq":2},{"created":"2026-09-09T13:48:07Z","object_id":{"id":2583,"is_a":["categorization","keyword","keyword_domain"],"name":"zotonic_topic_user_interface_and_interaction","title":"User interface and interaction","uri":"https:\/\/zotonic.com\/id\/2583"},"seq":3},{"created":"2026-09-09T13:48:07Z","object_id":{"id":2623,"is_a":["categorization","keyword","keyword_architecture"],"name":"zotonic_topic_scomp","title":"Server component","uri":"https:\/\/zotonic.com\/id\/2623"},"seq":4},{"created":"2026-09-09T13:48:07Z","object_id":{"id":2624,"is_a":["categorization","keyword","keyword_architecture"],"name":"zotonic_topic_wire_action","title":"Wire action","uri":"https:\/\/zotonic.com\/id\/2624"},"seq":5},{"created":"2026-09-09T13:48:07Z","object_id":{"id":2641,"is_a":["categorization","keyword","keyword_task"],"name":"zotonic_topic_render","title":"Render","uri":"https:\/\/zotonic.com\/id\/2641"},"seq":6},{"created":"2026-09-09T13:48:07Z","object_id":{"id":2673,"is_a":["categorization","keyword","keyword_technology"],"name":"zotonic_topic_javascript","title":"JavaScript","uri":"https:\/\/zotonic.com\/id\/2673"},"seq":7}],"predicate":{"id":308,"is_a":["meta","predicate"],"name":"subject","title":{"_type":"trans","tr":{"en":"Keyword"}},"uri":"http:\/\/purl.org\/dc\/elements\/1.1\/subject"}}},"id":1384,"is_a":["text","documentation","reference","template_scomp"],"links":[{"rel":"self","target":"https:\/\/zotonic.com\/.zotonic\/websub\/topic\/1384"},{"rel":"hub","target":"https:\/\/zotonic.com\/.zotonic\/websub"}],"medium":null,"medium_url":null,"name":"doc_template_scomp_scomp_button","page_url":{"en":"https:\/\/zotonic.com\/docs\/1384\/button","x-default":"https:\/\/zotonic.com\/docs\/1384\/button"},"preview_url":null,"resource":{"version":3332,"pivot_location_lat":null,"title":"button","is_authoritative":true,"body":"

Makes a button with an action attached.<\/p>\n

This is an easy way to make a button and attach one or more actions or a postback.<\/p>\n

For example:<\/p>\n

{% button text="Click me" action={alert text="Hello Word!"} %}\n<\/code><\/pre>\n
This show a button with the text “Click me”. When clicked it will trigger the\naction#alert<\/code><\/a> action, showing an alert message with the text “Hello World!”.<\/p>\n
Another example:<\/p>\n
{% button text="Postback" postback={my_postback arg1=1 arg2=2} %}\n<\/code><\/pre>\n
When clicked it will call the event\/2<\/code> function in the controller that served the page. The function will be called as:<\/p>\n
event(#postback{message={mypostback, [{arg1,1}, {arg2,2}]},\n    trigger=TriggerId, target=TargetId}, Context)\n<\/code><\/pre>\n
Where TriggerId and TargetId are both the HTML id of the button.<\/p>\n
button<\/code> accepts the following arguments:<\/p>\n
Argument<\/th>Description<\/th>Example<\/th><\/tr><\/thead>
text<\/code><\/td>The text on the button, defaults to “Submit”<\/td>text=”click me”<\/code><\/td><\/tr>
postback<\/code><\/td>An event sent to the delegate or the resource serving the page.<\/td>postback=”hello”<\/code><\/td><\/tr>
tag<\/code><\/td>The type of HTML tag that will be created. Defaults to “button”.<\/td>tag=”a”<\/code><\/td><\/tr>
delegate<\/code><\/td>The name of the erlang module to be called for handling the postback.<\/td>delegate=”myresource”<\/code><\/td><\/tr>
action<\/code><\/td>The action to be triggered when the button is clicked. There can be more than one action argument.<\/td>action={show target=”msg”}<\/code><\/td><\/tr>
id<\/code><\/td>Id of the button.<\/td>id=#submit<\/code><\/td><\/tr>
class<\/code><\/td>The css class of the button. This argument can be repeated to add multiple classes.<\/td>class=”submit”<\/code><\/td><\/tr>
style<\/code><\/td>The css style of the button.<\/td>style=”color: #fc0”<\/code><\/td><\/tr>
tabindex<\/code><\/td>The value for the tabindex property.<\/td>tabindex=1<\/code><\/td><\/tr>
type<\/code><\/td>The type attribute of the button.<\/td>type=”submit”<\/code><\/td><\/tr>
title<\/code><\/td>The title attribute of the button.<\/td>title=”click to submit”<\/code><\/td><\/tr>
disabled<\/code><\/td>The disabled attribute of the button, set to true or false. When the button is disabled then the class “disabled” is added to the class list.<\/td>disabled=true<\/code><\/td><\/tr>
href<\/code><\/td>The href attribute of the button if tag “a” is used. Defaults to “#”.<\/td>href=”\/foobar”<\/code><\/td><\/tr><\/tbody><\/table>","slug":"button","is_protected":false,"visible_for":0,"tz":"UTC","language":["en"],"doc_source_hash":"85cfa8002c483e1d32d129327b596601b2b5c5c992e0712f1ad2d08960956f41","is_featured":false,"content_group_id":{"id":2551,"is_a":["meta","content_group"],"name":"content_group_imported_docs","title":"Imported documentation","uri":"https:\/\/zotonic.com\/id\/content_group_imported_docs"},"category_id":{"id":327,"is_a":["meta","category"],"name":"template_scomp","title":"Scomp","uri":"https:\/\/zotonic.com\/id\/template_scomp"},"doc_source_path":"apps\/zotonic_mod_wires\/src\/scomps\/scomp_wires_button.erl","publication_start":"2023-01-30T19:23:57Z","github_url":"https:\/\/github.com\/zotonic\/zotonic\/blob\/master\/apps\/zotonic_mod_wires\/src\/scomps\/scomp_wires_button.erl","pivot_location_lng":null,"doc_source_kind":"scomp","name":"doc_template_scomp_scomp_button","is_unfindable":false,"is_published":true,"pivot_geocode":null,"created":"2020-05-30T05:47:20Z","uri":null,"doc_status":"current","is_dependent":false,"erlang_app":"zotonic_mod_wires","publication_end":"9999-06-01T00:00:00Z","modifier_id":{"id":1,"is_a":["person"],"name":"administrator","title":"Site Administrator","uri":"https:\/\/zotonic.com\/id\/1"},"privacy":0,"doc_source_commit":"66cb145eae7002b184e7d8c4c7bba5e53e8248e5\n","erlang_module":"scomp_wires_button","creator_id":{"id":336,"is_a":["person","robot"],"name":"gitbot","title":"Git","uri":"https:\/\/zotonic.com\/id\/336"},"modified":"2026-10-02T12:40:33Z","title_slug":"button"},"uri":"https:\/\/zotonic.com\/id\/1384","uri_template":"https:\/\/zotonic.com\/id\/:id","websub":{"hub":"https:\/\/zotonic.com\/.zotonic\/websub","topic":"https:\/\/zotonic.com\/.zotonic\/websub\/topic\/1384"}},"status":"ok"}