Modal alert, confirm, and prompt dialogs using V2 semantic content types with focus trapping and accessibility features
Use V2 semantic content types (alertButton, confirmButton, promptButton) to create interactive dialog buttons declaratively. No HTML strings required!
const config = {
version: 2,
layoutId: "alerts-demo-1",
breakpoints: { xs: 1, sm: 2, md: 3 },
items: [
{
content: {
type: "alertButton",
text: "Show Alert",
message: "Your changes have been saved successfully!",
title: "Success",
alertType: "success",
variant: "primary"
}
},
{
content: {
type: "confirmButton",
text: "Show Confirm",
message: "Are you sure you want to delete this item?",
title: "Confirm Deletion",
confirmType: "warning",
variant: "warning"
}
},
{
content: {
type: "promptButton",
text: "Show Prompt",
message: "Please enter your email address:",
title: "Email Required",
promptType: "info",
required: true,
variant: "info"
}
}
]
};
RSL.JSONLayout.renderLayout('#demo1-output', config);Combine V2 semantic button components with the JavaScript API to show alerts programmatically with async/await support. This example uses V2 button content type with onClick handlers.
// V2 buttons with onClick handlers calling the API directly
const config = {
version: 2,
layoutId: "alerts-demo-2",
breakpoints: { xs: 1, sm: 2, md: 3 },
items: [
{
content: {
type: "button",
text: "Success Alert",
variant: "success",
onClick: async function() {
await RSL.Alerts.alert({
title: 'Success!',
message: 'Operation completed successfully.',
type: 'success',
animation: 'slide-down'
});
}
}
},
{
content: {
type: "button",
text: "Delete Confirm",
variant: "danger",
onClick: async function() {
const confirmed = await RSL.Alerts.confirm({
title: 'Delete Item?',
message: 'This action cannot be undone.',
type: 'danger',
animation: 'zoom-in'
});
if (confirmed) {
await RSL.Alerts.alert('Item deleted!');
}
}
}
},
{
content: {
type: "button",
text: "Name Prompt",
variant: "primary",
onClick: async function() {
const name = await RSL.Alerts.prompt({
title: 'Enter Name',
message: 'What is your name?',
placeholder: 'John Doe',
type: 'info',
required: true
});
if (name) {
await RSL.Alerts.alert(`Hello, ${name}!`);
}
}
}
}
]
};
RSL.JSONLayout.renderLayout('#demo2-output', config);Alerts support multiple visual styles: success, error, warning, and info. Each type has distinct colors and icons.
const config = {
version: 2,
layoutId: "alerts-demo-3",
breakpoints: { xs: 1, sm: 2, md: 4 },
items: [
{
content: {
type: "alertButton",
text: "Success Type",
message: "Operation completed successfully!",
title: "Success",
alertType: "success",
variant: "success"
}
},
{
content: {
type: "alertButton",
text: "Error Type",
message: "An error occurred while processing your request.",
title: "Error",
alertType: "error",
variant: "danger"
}
},
{
content: {
type: "alertButton",
text: "Warning Type",
message: "Please review your changes before continuing.",
title: "Warning",
alertType: "warning",
variant: "warning"
}
},
{
content: {
type: "alertButton",
text: "Info Type",
message: "New features are now available in your account.",
title: "Information",
alertType: "info",
variant: "info"
}
}
]
};
RSL.JSONLayout.renderLayout('#demo3-output', config);