indicator

Reference

indicator={IndicatorSignal|IndicatorSignal[]}

The indicator attribute allows to pass one or several IndicatorSignal generated by the indicate function.

More details about the indicate function:

• Read more docs about indicate in Server Components.
• Read more docs about indicate in Web Components.

These indicators placed in the indicator attribute allow the brisa-request class to be added during the execution of a server action, allowing interactions with CSS from the server components such as disabling buttons, showing spinners, transitions, etc.

Example of CSS:

const incrementing = indicate("increment");

return (
  <button
    indicator={incrementing} // It adds .brisa-request in action-time
    indicateClick={incrementing}
    onClick={() => store.set("count", store.get("count") + 1)}
  >
    Increment
    <span
      indicator={incrementing} // It adds .brisa-request in action-time
      class="spinner"
    />
  </button>
);

Example of CSS:

button.brisa-request {
  pointer-events: none;
  cursor: not-allowed;
  background-color: rgba(0, 0, 0, 0.1);
}
.spinner,
.btn-text.brisa-request {
  display: none;
}
.spinner.brisa-request {
  display: inline;
}

Parameters:

• IndicatorSignal | IndicatorSignal[] - One or several IndicatorSignal generated by indicate method.

More docs

For more details, take a look to:

• indicate method in server components.
• indicate method in web components.
• indicateEvent HTML extended attribute to connect an indicator to a server action.

Support