1.2.1 Procedures

Procedure: button content KEY: #:id #:type #:hidden #:on-click #:background #:hover-background #:border-size #:border-color #:shadow #:color #:size #:active #:family #:weight #:rounding #:extra-classes ¶

Create a standard HTML button element.

content

The inner content (text string or HTML fragments) of the button.

id

An optional HTML identifier string.

type

A symbol representing the HTML button type (e.g., 'button, 'submit).

hidden

A boolean indicating whether the button should be hidden.

on-click

A JavaScript handler string triggered on click events.

background

List of symbols for background CSS classes.

hover-background

List of symbols for hover background CSS classes.

border-size

List of symbols for border width CSS classes.

border-color

List of symbols for border color CSS classes.

shadow

List of symbols for container shadow CSS classes.

color

List of symbols for text color CSS classes.

size

List of symbols for text sizing CSS classes.

active

List of symbols for active state transformation CSS classes.

family

List of symbols for font family CSS classes.

weight

List of symbols for font weight CSS classes.

rounding

List of symbols for border radius CSS classes.

extra-classes

List of utility formatting layout classes.

(button "Click Me" #:id "btn-primary" #:on-click "alert('Hello!')")

Procedure: danger-submit-button content ¶

Create a red-themed HTML form submission button meant for destructive actions.

content

The inner content (text string or HTML fragments) of the button.

(danger-submit-button "Delete Repository")

Procedure: icon-button KEY: #:id #:icon #:content #:hidden #:on-click #:type #:background #:hover-background #:border-size #:border-color #:shadow #:size #:family #:weight #:color #:rounding #:active #:icon-css #:extra-classes #:icon-text-container-classes ¶

Create a button containing both an icon and text.

id

An optional HTML identifier string.

icon

A symbol identifying the type of icon to render.

content

The text string or components positioned next to the icon.

hidden

A boolean indicating whether the button should be hidden.

on-click

A JavaScript handler string triggered on click events.

type

A symbol representing the HTML button type.

background

List of symbols for background CSS classes.

hover-background

List of symbols for hover background CSS classes.

border-size

List of symbols for border width CSS classes.

border-color

List of symbols for border color CSS classes.

shadow

List of symbols for shadow CSS classes.

size

List of symbols for text sizing CSS classes.

family

List of symbols for font family CSS classes.

weight

List of symbols for font weight CSS classes.

color

List of symbols for text color CSS classes.

rounding

List of symbols for border radius CSS classes.

active

List of symbols for active state transformation CSS classes.

icon-css

List of symbols targeting icon coloring and sizing classes.

extra-classes

List of utility layout CSS classes.

icon-text-container-classes

List of symbols applied to the inner layout wrapper surrounding the icon and content.

(icon-button #:icon 'download #:content "Fetch Data" #:on-click "downloadData()")

Procedure: light-button content ¶

Create a button pre-configured with a light font weight.

content

The inner content (text string or HTML fragments) of the button.

(light-button "Read More...")

Procedure: mono-button content ¶

Create a button pre-configured with a monospace font family.

content

The inner content (text string or HTML fragments) of the button.

(mono-button "git commit")

Procedure: submit-button content ¶

Create a green-themed standard HTML form submission button.

content

The inner content (text string or HTML fragments) of the button.

(submit-button "Save Preferences")

Procedure: ui-mode-button KEY: #:icon #:content #:type #:background #:hover-background #:border-size #:border-color #:shadow #:size #:active #:family #:weight #:color #:on-click #:rounding #:icon-css #:extra-classes #:icon-text-container-classes ¶

Create a utility button pre-wired to toggle UI dark/light mode themes.

icon

A symbol identifying the default icon type.

content

The description text displayed within the button layout.

type

A symbol representing the HTML button type.

background

List of symbols for background CSS classes.

hover-background

List of symbols for hover background CSS classes.

border-size

List of symbols for border width CSS classes.

border-color

List of symbols for border color CSS classes.

shadow

List of symbols for shadow CSS classes.

size

List of symbols for text sizing CSS classes.

active

List of symbols for active state transformation CSS classes.

family

List of symbols for font family CSS classes.

weight

List of symbols for font weight CSS classes.

color

List of symbols for text color CSS classes.

on-click

The global JavaScript function invocation string triggered to process the theme change.

rounding

List of symbols for border radius CSS classes.

icon-css

List of symbols targeting icon coloring and sizing classes.

extra-classes

List of utility layout CSS classes.

icon-text-container-classes

List of symbols applied to the inner layout wrapper surrounding the icon and content.

(ui-mode-button #:content "Switch Theme")