Feedback

Sync Feedback

A sync feedback indicates the status of an operation to the user.
View source
NONE
SYNCING
SUCCESS
ERROR
1
import {SyncFeedback, SyncFeedbackState} from '@coveord/plasma-react';
2


3
export default () => (
4
    <table className="table">
5
        <tr>
6
            <td>NONE</td>
7
            <td>
8
                <SyncFeedback state={SyncFeedbackState.NONE} />
9
            </td>
10
        </tr>
11
        <tr>
12
            <td>SYNCING</td>
13
            <td>
14
                <SyncFeedback state={SyncFeedbackState.SYNCING} />
15
            </td>
16
        </tr>
17


18
        <tr>
19
            <td>SUCCESS</td>
20
            <td>
21
                <SyncFeedback state={SyncFeedbackState.SUCCESS} />
22
            </td>
23
        </tr>
24


25
        <tr>
26
            <td>ERROR</td>
27
            <td>
28
                <SyncFeedback state={SyncFeedbackState.ERROR} />
29
            </td>
30
        </tr>
31
    </table>
32
);

Props

NameTypeDefaultDescription
staterequiredstring
The current state of the sync feedback component Either 'SYNCING', 'SUCCESS', 'ERROR' or 'NONE'
feedbackstring'Saving changes...' for 'SYNCING', 'Changes saved' for 'SUCCESS', and 'Changes could not be saved.' for 'ERROR'.
The label of the current state

Examples

Custom Labels
1
import {SyncFeedback, SyncFeedbackState} from '@coveord/plasma-react';
2


3
export default () => (
4
    <>
5
        <SyncFeedback state={SyncFeedbackState.SYNCING} feedback="There is something happening" />
6
        <SyncFeedback state={SyncFeedbackState.SUCCESS} feedback="There was a success" />
7
        <SyncFeedback state={SyncFeedbackState.ERROR} feedback="There was an error" />
8
    </>
9
);

No guidelines exist for SyncFeedback yet.

Create guidelines