User experience principles

Affordance

Affordances refer to designing elements in a way that suggests their intended purpose or functionality. Buttons should appear clickable, links should be visually distinct from other text, interactive elements should exhibit characteristics that signal interactivity and the language used should be intuitive for the users. Employing clear and intuitive affordances helps users intuitively understand how to engage with various parts of the website.

Most component or styling libraries like DHIS2 UI provide features like buttons, links and inputs that are styled with caution to affordance. We highly suggest you use these in your project both for efficiency and clarity.

This link looks clickable

Loading example...

Open  'src/AffordanceExample.js'
import { Button } from '@dhis2/ui'
import Link from 'next/link'

const AffordanceExample = () => {  
    return (
        <>  
            <Link href="">This link looks clickable</Link>
            <br/>
            <Button>This button looks clickable too</Button> 
        </>   
    );
}

export { AffordanceExample }