hygguile_components_button (Untitled Document)

1.2 (hygguile components button)

Procedures

1.2.1 Procedures

Procedure: button content KEY: #:id #:type #:hidden #:on-click #:loading #:loading-label #: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.
loading: A boolean putting the button in its loading state: a spinner appears, the control is disabled, and aria-busy says why.
loading-label: The spoken label of the loading state. Defaults to "Loading".
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!')")
(button "Saving" #:loading #t)

Procedure: danger-button content KEY: #:loading #:loading-label #:type #:id #:on-click #:extra-classes ¶

A destructive action: the colour is a warning, and the label says what it does.

content: The button’s label or nodes.
loading: A boolean putting the button in its loading state.
loading-label: The spoken label of the loading state.
type: The HTML button type.
id: An optional identifier.
on-click: A JavaScript handler.
extra-classes: Extra layout classes.

(danger-button "Delete project")

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: ghost-button content KEY: #:loading #:loading-label #:type #:id #:on-click #:extra-classes ¶

A quiet action that only shows its surface on hover or focus.

content: The button’s label or nodes.
loading: A boolean putting the button in its loading state.
loading-label: The spoken label of the loading state.
type: The HTML button type.
id: An optional identifier.
on-click: A JavaScript handler.
extra-classes: Extra layout classes.

(ghost-button "Skip for now")

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: icon-only-button KEY: #:icon #:label #:id #:type #:on-click #:loading #:loading-label #:background #:hover-background #:color #:border-color #:icon-css #:extra-classes ¶

An icon button with no visible text, named for assistive technology.

The label is not decoration: an icon-only control has no accessible name without it, so it is rendered as a visually hidden <span> and the button carries aria-label as well.

icon: The Phosphor icon name.
label: The accessible name.
id: An optional identifier.
type: The HTML button type.
on-click: A JavaScript handler.
loading: A boolean putting the button in its loading state.
loading-label: The spoken label of the loading state.
background: Background classes.
hover-background: Hover background classes.
color: Text and icon colour classes.
border-color: Border colour classes.
icon-css: Icon sizing and colour classes.
extra-classes: Extra layout classes.

(icon-only-button #:icon 'gear #:label "Settings")

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: primary-button content KEY: #:loading #:loading-label #:type #:id #:on-click #:extra-classes ¶

The one main action of a page or form.

content: The button’s label or nodes.
loading: A boolean putting the button in its loading state.
loading-label: The spoken label of the loading state.
type: The HTML button type.
id: An optional identifier.
on-click: A JavaScript handler.
extra-classes: Extra layout classes.

(primary-button "Create account")

Procedure: secondary-button content KEY: #:loading #:loading-label #:type #:id #:on-click #:extra-classes ¶

A supporting action beside a primary one.

content: The button’s label or nodes.
loading: A boolean putting the button in its loading state.
loading-label: The spoken label of the loading state.
type: The HTML button type.
id: An optional identifier.
on-click: A JavaScript handler.
extra-classes: Extra layout classes.

(secondary-button "Cancel")

Procedure: submit-button content ¶

Create a green-themed standard HTML form submission button.

The fill is the dark end of the green ramp with near-white type on the light theme, and the light end with dark type on the dark theme, so the label clears WCAG AA (4.5:1) whichever theme is active.

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")