Adding a DHIS2 UI button to an app

Buttons demonstrated in an app

Let us add onClick handlers to the buttons and confirm that they are called as expected.

We are going to use React state to remember which button was clicked.

Copy
const [clicked, setClicked] = useState(undefined)

And use the onClick handlers to change this state.

Copy
<Button onClick={() => setClicked('default')}>
    Default button
</Button>

Open  'src/App.js'
import React, { useState } from 'react'
import { Button } from '@dhis2/ui'

import styles from './App.module.css'

const MyApp = () => {
    const [clicked, setClicked] = useState(undefined)

    return (
        <div className={styles.container}>
            <Button onClick={() => setClicked('default')}>
                Default button
            </Button>
            <Button primary onClick={() => setClicked('primary')}>
                Primary button
            </Button>
            <Button secondary onClick={() => setClicked('secondary')}>
                Secondary button
            </Button>
            <Button destructive onClick={() => setClicked('destructive')}>
                Destructive button
            </Button>
            <span className={styles.flexBreak} />
            {clicked && <p>You clicked the {clicked} button!</p>}
        </div>
    )
}

export default MyApp

Open  'src/App.module.css'
.container {
    width: 100%;
    height: 200px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: space-around;
    font-size: 1rem;
    margin-top: 200px;
}

button {
    width: 150px;
}

.flexBreak {
    flex-basis: 100%;
    height: 0;
}