search

React

hashtag
DDA with React

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

hashtag
Setup

First, install the package @dubai-design-system/componts-reactarrow-up-right

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

For Versions 3.11.0+, add CSS reference as below:

import '@dubai-design-system/components-js/dist/dda/dda.css';

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 JSNextVue

Last updated