User experience principles

Feedback

The feedback principle is about promptly informing users about the results of their actions. Whenever users interact with elements like buttons, forms, or links, there should be visual cues or notifications that indicate whether their action was successful or not. Feedback can be conveyed through animations, color changes, or error messages, ensuring that users remain informed and confident in their interactions.

Using the AlertBar from the UI library is a great way to inform the user of an action.

Loading example...

Open  'src/FeedbackExample.js'
import React, {useEffect, useState} from "react";
import { Button, AlertBar } from '@dhis2/ui'

const FeedbackExample = () => {
    
    const [success, setSuccess] = useState(false);

    return (
        <>
            <Button onClick={()=>setSuccess(true)}>Click me!</Button>

            {success && (
                <AlertBar success onHidden={() => {setSuccess(false);}}>
                    This is an example of feedback!
                </AlertBar>
                )}
        </>       
    );
}

export { FeedbackExample }