EccButton
EccButton runs an async action and shows its state: idle, loading, success, error. It reads the result of platform API calls automatically.
import { EccButton } from "@/ecc/components/forms/EccButton";
Examples
// API call: success/error is taken from the response envelope
<EccButton label="Claim" iconIdle="fa-solid fa-hand" onClick={() => claimTask(task.id)} />
// stays in success state and closes the tab
<EccButton label="Done" labelSuccess="Saved" successPersist onClick={saveSomething} onSuccess={() => window.close()} />
// own async code - throw to show an error
<EccButton label="Check" onClick={async () => {
const ok = await checkBudget();
if (!ok) throw new Error("Budget exceeded");
}} />
Behaviour
response with | success, back to idle after |
response with | error, |
thrown error | error, error message below the button |
The button is disabled while the action runs.
Props
|
| - | text |
|
| - | action |
|
| - | called after success |
|
|
| text in success state |
|
|
| how long success is shown |
|
|
| keep the success state |
|
| - | fixed error text |
| Font Awesome class | check, spinner, check, warning | icons per state |
|
|
| disable |
|
| - | tooltip |
|
| styling |
Related
sub component: EccGenerateJsonOutputButton is built on |
On this page
- EccButton