React

DDA with React

This is a step-by-step guide to use the DDA components in React.

Setup

First, install the package

npm i @dubai-design-system/components-react

Next, add the material-icons package which is the icon package used by DDA:

Start by adding the material-icons package inside the <head> tag

<style>
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</style>

You should now be able to use DDA components:

import React from 'react';
import { DdaButton } from "@dubai-design-system/components-react";

const App = () => (
  <div>
    <DdaButton
    button_color="default-primary"
    start_icon="sentiment_satisfied"
    end_icon="arrow_forward"
    custom_class=""
    component_mode=""
    button_id="button"
    aria_label="button"
    onclick="console.log('clicked')"
    >Button</DdaButton>
  </div>
);

export default App;

PreviousVanilla JS NextVue

Last updated 2 months ago