Skip to main content

Skeletons.Note

A text or label element. The most lightweight Skeletons primitive — renders inline text, labels, buttons, status messages, or any content that is primarily textual.


Signature

// Full object form
Skeletons.Note(props, style?)

// Shorthand — string content
Skeletons.Note("My text")

// Shorthand — string content + class name
Skeletons.Note("My text", "my-class")

The shorthand forms are automatically expanded to { content: "...", className: "..." }.


Common Props

PropTypeDescription
contentStringText to display. Defaults to "" if omitted
classNameStringCSS class(es) to apply
sys_pnStringNamed part — enables onPartReady and ensurePart
uiHandlerWidgetRoutes interaction events to onUiEvent
serviceStringService triggered on click
styleOptObjectInline styles applied to the element
activeNumber0 to render in inactive state

Examples

Plain text label

Skeletons.Note("Hello World");

With class shorthand

Skeletons.Note("Loading...", "my-spinner");

Clickable label / button

Skeletons.Note({
className: `${fig}__submit-btn`,
content: LOCALE.SUBMIT,
service: "my-submit",
uiHandler: ui,
});

Named status message

Skeletons.Note({
className: `${fig}__status`,
sys_pn: "status-message",
content: message || "",
});

With inline style

Skeletons.Note({
className: `${fig}__label`,
content: ui.mget("label"),
styleOpt: {
background: ui.mget("color"),
},
});