Skip to content
Wildloop Wildloop

IconButtonOptions

Defined in: components/button.ts:7

Options for iconButton.

Properties

Section titled “Properties”

icon

Section titled “icon”

icon: Slot

Defined in: components/button.ts:9

The glyph, usually one of the staffa/icons draw functions.

ariaLabel?

Section titled “ariaLabel?”

optional ariaLabel?: string

Defined in: components/button.ts:15

What it does, for screen readers: there is no visible text to read. Required, unless the tooltip is a string — that names the button just as well, and is taken as the label when this is left out.

click?

Section titled “click?”

optional click?: (event) => unknown

Defined in: components/button.ts:20

Click handler. Return a promise and the glyph becomes a spinner until it settles, with further clicks bouncing off — see ButtonOptions.click.

Parameters

Section titled “Parameters”
event
Section titled “event”

Event

Returns

Section titled “Returns”

unknown

key?

Section titled “key?”

optional key?: string

Defined in: components/button.ts:26

A keyboard shortcut that presses this button — see ButtonOptions.key. It is shown after the button’s tooltip, or alone in a tooltip of its own when there is none, and the ? overview lists it under the button’s label.

tooltip?

Section titled “tooltip?”

optional tooltip?: false | Slot

Defined in: components/button.ts:38

A tooltip, shown on hover and keyboard focus; a string renders as rich text. There is none unless you ask for one — but do consider it here, as a glyph says nothing to whoever cannot guess it. A string doubles as the ariaLabel when that is left out, so an icon button usually needs one option, not two. A key is appended to the tip, behind a ·; pass false to suppress even that.

Works on a disabled button too, which is where a tooltip earns its keep: it is the only room there is to say why.

href?

Section titled “href?”

optional href?: string

Defined in: components/button.ts:40

Render as a link (<a role=button>) pointing here instead of a <button>.

disabled?

Section titled “disabled?”

optional disabled?: boolean

Defined in: components/button.ts:42

Disables it.

attrs?

Section titled “attrs?”

optional attrs?: string

Defined in: components/button.ts:48

Aberdeen attr/style string applied to the button. .small and .large size the hit area (medium is the default and needs no class); a .small or .large parent sizes the ones inside it, as with button.