Next: (hygguile components field), Previous: (hygguile components disclosure), Up: API
Create an accessible inline alert or callout box.
Alerts are plain HTML and CSS, so they continue to render and be announced by assistive technology when JavaScript is disabled.
An optional short, bold heading for the alert.
The alert message text or inline nodes.
A semantic keyword: 'info (default), 'success,
'warning, 'danger or 'neutral.
An optional ARIA role override. Defaults to alert for danger and
status for every other variant.
An optional Phosphor icon name overriding the variant default.
List of symbols representing container CSS classes.
(alert #:title "Heads up" #:body "Your session expires soon." #:variant 'warning)
Create a circular progress ring.
The ring is an SVG with a normalised pathLength of 100, so the
fraction is written as a dash of that length and the browser does the
geometry; no trigonometric value has to be computed in Scheme. With no
value the ring is indeterminate: it spins through CSS and the
accessible value is left out, which is what tells assistive technology
that the work has no known end.
The current value, or #f for an indeterminate ring.
The maximum value. Defaults to 100.
'xs, 'sm, 'md, 'lg or 'xl.
An accessible name for the ring.
Whether the percentage is written in the middle. Defaults to false.
The ring’s stroke width in the SVG’s own units. Defaults to 4.
Extra classes for the wrapper.
(circular-progress #:value 68 #:label "Importing" #:show-value #t)
Create the first-class empty state a data component falls back to.
An empty list is not an error and should not look like one: the icon is
a quiet object, the copy says what is missing and, when there is one,
the action says what to do about it. Assistive technology gets the
heading it needs to understand the region, because the title is a real
<h3>.
The Phosphor icon name. Defaults to 'tray.
The heading that names the state.
Optional explanatory copy.
An optional node – usually a link or a button – offering the next step.
Extra classes for the wrapper.
(empty-state #:title "No projects yet"
#:body "Create one to get started."
#:action (primary-button "New project"))
Create the error state a data component shows when a request failed.
It is an empty state with a different voice – a warning mark, a danger ink, and a retry action – because "there is nothing here" and "this did not load" call for different responses from the reader. The retry is just a link or a button the page passes, so it works with a normal navigation and no client-side store has to be asked to try again.
The heading. Defaults to a generic failure sentence.
The explanation. Defaults to a generic one.
An optional retry node, usually a link back to the same URL.
The text of the default retry link, used when no retry node is given.
Optional technical detail, folded away in a disclosure.
Extra classes for the wrapper.
(error-state #:retry (a "Try again" #:href "/reports"))
Create a native HTML <progress> bar.
The current value. When omitted the bar renders in an indeterminate state.
The maximum value. Defaults to 100.
An optional text label shown above the bar and used for accessibility.
A boolean rendering the percentage next to the label.
List of symbols representing the progress bar CSS classes.
List of additional utility CSS classes.
(progress #:value 42 #:label "Uploading" #:show-value #t)
Create a pulsing placeholder shown while content loads.
The number of placeholder rows to render.
A height keyword: 'sm, 'md or 'lg.
A rounding keyword: 'none, 'sm, 'md or
'full.
List of additional utility CSS classes.
(skeleton #:lines 3 #:height 'md)
A placeholder for an avatar.
'sm, 'md or 'lg.
Extra classes.
(skeleton-avatar #:size 'lg)
A placeholder for a card: a header row and a few lines of copy.
How many body lines to draw.
Whether the header carries an avatar placeholder.
Extra classes.
(skeleton-card #:lines 2 #:avatar? #t)
A placeholder for a form: one field block per control.
How many field blocks to draw.
Extra classes.
(skeleton-form #:fields 4)
A placeholder for a heading line.
A width utility list. Defaults to (w-1/2).
Extra classes.
(skeleton-heading #:width '(w-1/3))
A placeholder for a data table: a header rule and the requested rows.
How many body rows to draw.
How many cells per row.
Extra classes.
(skeleton-table #:rows 5 #:columns 3)
A placeholder for a paragraph, one block per line.
The last line is shorter, which is what makes the block read as text rather than as a table. The whole placeholder is hidden from assistive technology; the loading state is announced once by whatever region owns it.
How many lines to draw.
The width of the final line. Defaults to (w-2/3).
Extra classes.
(skeleton-text #:lines 4)
Create an accessible CSS loading spinner.
The spinner animates through CSS only and exposes a screen-reader label
through role="status", so it works without JavaScript.
A size keyword: 'xs, 'sm, 'md, 'lg or
'xl.
The screen-reader status text. Defaults to "Loading...".
List of additional utility CSS classes.
(spinner #:size 'lg #:label "Fetching results")
Create one toast: a small frosted card that arrives, says one thing, and can leave again.
The toast is a live region of its own – status for a quiet
variant and alert for a danger – so a screen reader announces it
without the page having to move focus. The dismiss control is a
progressive enhancement (js-only); a toast rendered by the server
is still readable and still carries its text, and the script that queues
toasts is what makes it leave on its own.
Toast markup is also the template toast-tray clones, which is why
the title and body carry data-hg-toast-title and
data-hg-toast-body: one shape serves both the server-rendered
case and the queued one.
The toast’s heading.
Optional supporting copy.
'info (default), 'success, 'warning or
'danger.
How long the toast stays, in milliseconds. Defaults to 5000; the
script reads it from the markup.
Whether the dismiss control is rendered. Defaults to true.
The accessible name of the dismiss control.
An optional identifier.
Extra classes for the card.
(toast #:title "Saved" #:body "Your changes are live." #:variant 'success)
Create the live region a page’s toasts arrive in, and its template.
The tray is one polite region, never one region per toast: a screen
reader announces an addition once, and the page keeps a single place
where its notifications live. The template inside it is a toast with
empty slots; the queue script clones it, fills the slots with
textContent, appends the clone, and removes it after its
duration. Nothing a notification says is ever parsed as markup, so a
title cannot smuggle an element into the page.
The tray’s identifier.
Its accessible name.
How many toasts the tray keeps at once, oldest first.
'bottom-end (default), 'bottom-start, 'top-end or
'top-start.
The identifier of the template the script clones.
Extra classes for the tray.
(toast-tray)
Next: (hygguile components field), Previous: (hygguile components disclosure), Up: API