GitHub

feedback.busy

Something is working, with no measure of how far: in a button while it sends, over a region while it updates. A spinning mark before its text, like "Saving…"; with no text, give it an aria-label

Component

<Text>

Renders

<span>

Role

status

Profile

UI

Comes from

starter
View as Markdown

Feedback intents

Example

Preview
<Action intent="action.submit" disabled={saving}>
  {saving ? <Text intent="feedback.busy" as="span">Saving…</Text> : 'Save'}
</Action>

Code that says spinner, loading, working, pending points here. prongs check warns when an element with this intent has a handler or label that points somewhere else.

Choosing between neighbours

Find the row that describes your element, and use the intent on the right.

  • If it is

    Use

  • Something is working, with no measure of how far: in a button while it sends, over a region while it updates. A spinning mark before its text, like "Saving…"; with no text, give it an aria-label

    feedback.busy this page

  • Standing in for content that has not arrived

    layout.loading

  • Showing that something is working right now, without words

    rather than feedback.info
    feedback.busy this page

Connections

Declared in the registry, both directions. Where an intent is used in your own code is something check and the gallery see; this site has no app code.

For registry authors

Starter intents. These are the intents prongs add puts in your registry, shown in this site’s theme. Yours are your own registry.ts: rename, restyle and add to them, and see them with prongs add gallery.

What this intent is built from and its entry in components/prongs/registry.ts. You only need this to change how it looks or to add an intent like it.

How feedback.busy resolves, and its definition

Each layer adds to the one before it; a later class wins over an earlier one that sets the same thing.

  • tone.muted

    Secondary text colour, readable on every surface

    text-surface-muted
  • feedback.busy

    Something is working, with no measure of how far: in a button while it sends, over a region while it updates. A spinning mark before its text, like "Saving…"; with no text, give it an aria-label

    inline-flex items-center gap-2 before:size-4 before:shrink-0
before:animate-spin before:rounded-full before:border-2
before:border-current before:border-t-transparent
before:content-[''] motion-reduce:before:animate-none
Final classes
text-surface-muted inline-flex items-center gap-2 before:size-4
before:shrink-0 before:animate-spin before:rounded-full
before:border-2 before:border-current
before:border-t-transparent before:content-['']
motion-reduce:before:animate-none
Definition
TS
'feedback.busy': {
  kind: 'semantic',
  description: 'Something is working, with no measure of how far: in a button while it sends, over a region while it updates. A spinning mark before its text, like "Saving…"; with no text, give it an aria-label',
  refs: ['tone.muted'],
  keywords: ['spinner', 'loading', 'working', 'pending'],
  binding: {
    element: 'span',
    ariaRole: 'status',
    classes: 'inline-flex items-center gap-2 before:size-4 before:shrink-0 before:animate-spin before:rounded-full before:border-2 before:border-current before:border-t-transparent before:content-[\'\'] motion-reduce:before:animate-none',
  },
  notFor: [
    {
      context: 'standing in for content that has not arrived',
      instead: 'layout.loading',
    },
  ],
},