Module: run-button
Table of contents
Functions
Functions
RunButton
▸ RunButton(props): ReactElement<any, string | JSXElementConstructor<any>>
RunButton is a component that toggles between a 'Start' and 'Stop' state with an option to show progress. It provides visual feedback to the user through icons and optional progress indicators, indicating the current state of a process such as starting or stopping an operation.
Parameters
| Name | Type | Description |
|---|---|---|
props | Object | The properties passed to the RunButton component. |
props.disabled | undefined | boolean | If true, the button will be disabled and not clickable. |
props.isLoading | undefined | boolean | If true, a CircularProgress indicator will be shown on the button, indicating ongoing activity or processing. |
props.isRunning | undefined | boolean | Determines the state of the button. If true, the button represents a 'Stop' action, otherwise a 'Start' action. |
props.labels | undefined | Object | Labels for the button in different states. |
props.onStart | Function | Function to call when the start button is clicked, initiating a process. |
props.onStop | Function | Function to call when the stop button is clicked, terminating a process. The component switches its appearance and functionality based on the isRunning and isLoading props, showing a play icon for start and a stop icon for stop. It is designed for use in applications where start/stop actions control significant processes, like media playback or task execution. |
Returns
ReactElement<any, string | JSXElementConstructor<any>>
Example
<RunButton
isRunning={isTaskRunning}
onStart={() => startTask()}
onStop={() => stopTask()}
isLoading={isTaskProcessing}
labels={{ start: "Activate", stop: "Terminate" }}
/>This example sets up a RunButton to control a task, with custom labels for starting and stopping the task.
Defined in
node_modules/@captn/joy/dist/esm/run-button/index.js:37