DHIS2

Adding a DHIS2 UI button to an app

1
2
3
4
5

Using the button

Adding dependency

Let us start off by adding the @dhis2/ui library as a dependency to our project.

yarn add @dhis2/ui

Importing

We have to import the Button component in the file where we want to use it.

import { Button } from '@dhis2/ui'

Using the various styles of buttons

Now that we have access to the Button component we can use it however we like. We should still make sure to follow the design guidelines.



// Default
<Button>
    Default button
</Button>


// Primary
<Button primary>
    Primary button
</Button>


// Secondary
<Button secondary>
    Secondary button
</Button>


// Destructive
<Button destructive>
    Destructive button
</Button>

Using the onClick handler



// Primary with onClick handler
<Button onClick={() => window.alert("primary")} primary>
    Primary button (click me)
</Button>
PrevNext