Vanilla JS

DDA with Web Components

This is a step-by-step guide to use vanilla web components.

Setup

First, import the package script:

<script type="module">
        import { defineCustomElements } from 'https://cdn.jsdelivr.net/npm/@dubai-design-system/components-js@latest/loader/index.js';
        defineCustomElements();
</script>

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

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

You should now be able to use DDA components:

<dda-button 
    button_color="default-primary" 
    start_icon="sentiment_satisfied"
    end_icon="arrow_forward" 
    custom_class="" 
    mode="light" 
    button_id="button" 
    aria_label="button"
    size="lg"
    button_shape="circle">
    Click Here
 </dda-button>

PreviousFont Family NextReact

Last updated 12 days ago

Vanilla JS

DDA with Web Components

This is a step-by-step guide to use vanilla web components.

Setup

First, import the package script:

<script type="module">
        import { defineCustomElements } from 'https://cdn.jsdelivr.net/npm/@dubai-design-system/components-js@latest/loader/index.js';
        defineCustomElements();
</script>

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

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

You should now be able to use DDA components:

<dda-button 
    button_color="default-primary" 
    start_icon="sentiment_satisfied"
    end_icon="arrow_forward" 
    custom_class="" 
    mode="light" 
    button_id="button" 
    aria_label="button"
    size="lg"
    button_shape="circle">
    Click Here
 </dda-button>

PreviousFont Family NextReact

Last updated 12 days ago