Button

Introduction

Name: didomi-button Component type: button

Display a button.

Object configuration

window.didomiConfig = {
...
components: {
activeComponents: [
{
id: "ID_OF_THE_COMPONENT",
type: "button",
options: {
...,
propKey: "PROP_VALUE" // Remember to use camelCase for the key
}
}
]
}
};
<didomi-button id="ID_OF_THE_COMPONENT" />

Inline configuration

<didomi-button prop-key="PROP_VALUE" .../>

Props

Name

Type

Description

id

String

If you decide to configure your component in the didomiConfig object, you can use this id to link your component to your configuration object. See this section for more information

text

DidomiText

Text of the button

isDisabled

Boolean

Is the button disabled ?

style

Object

See this section for style information

For inline configuration, make sure to use kebab-case syntax. For example fontSize will become font-size.

Slots

You have the possibility to add a slot which allow you to override the content of the button.

<didomi-button id="ID_OF_THE_COMPONENT">
<span slot="content">New Content</span>
</didomi-button>

Events

Name

Description

click-btn

Trigger when the user clicks on the button

const button = document.querySelector('#didomi-button');
button.addEventListener('click-btn', (e) => {
button.setAttribute('is-disabled', true);
setTimeout(() => {
button.removeAttribute('is-disabled');
}, 2000);
});

Examples

Object configuration

window.didomiConfig = {
...
components: {
activeComponents: [
{
id: "section-button",
type: "button",
options: {
text: {
content: "My Button"
},
style: {
default: {
color: "white",
backgroundColor: "#F07D5A",
padding: "10px 20px"
}
}
}
}
]
}
};
<didomi-button id="section-button"></didomi-button>

Inline configuration

<didomi-button
text='{"content": "My Button"}'
style='{"default":{"color": "white", "backgroundColor": "#F07D5A", "padding": "10px 20px"}}'
/>