hello today we are going to look at configuring a confirm modal in ui builder so what i want to do is i want to add a button to this page that we've used in some previous demos and i want that button to pop up a modal and my modal is going to have some information on it and then it's going to say yes or cancel and if i hit cancel it just goes away if i hit yes i want to display a message so not not a super practical use case it's a simple use case which should make it easy to follow along so let's start by adding a button here [Music] and i kind of like to add them on the left here so let's do that i have a button let's give it a different label um and let's say uh pop-up modal all right so that's my button we're not to do anything else with this until we've configured the modal all the way but in order to add a modal a modal is basically a component but it works a little bit differently so i'm going to come into add and you can see i can add a component before or after or i can add a modal and then a modal i have some different options here so i would take some time explore these they are explained pretty well in the docs but today we are going to use a confirm modal so if i hit that a modal is going to pop up and gray out the rest of the screen so i have to interact with it before i can do anything else so let's configure it let's say brad's modal i like to put my name all over the place and say confirm this to get a happy message all right and we can change the name of that to confirm and set a yes if we wanted to so let's do that and so i'm going to go ahead and configure some events here so primary button click that's confirm so i want to go ahead and pop a message if we do that and i am going to do that add alert notifications hit edit and i know that it wants an array of objects here so i'm going to say type is info and the message is hey this worked all right i can format that so that it looks a little easier or it's easier to read let's hit apply so that's going to pop that up but i also want to i also want to go ahead and kill this modal once i hit confirm so we're going to do that real easily by saying open or close modal dialog i only have the one modal it's confirm one and so if i don't toggle this to open it's going to automatically close that modal so let's do that and then there's another button they can hit which is the cancel button that's the secondary button so let's add another event handler and tell it hey if you click that event handler we want it to close as well let's hit add and then one last thing is we actually need to go ahead and pop the modal from our button and guess what event handler we're going to use yep open or close modal dialog and for this one i am going to toggle this so that it opens the modal dialog so let's add and save and let's test it so when i click this pop-up modal button i get this modal that's good if i hit confirm i get this message that says hey this worked i could do it again hit cancel i don't get the message but it goes away and then all of the modals have the close dialog button already and this is also going to close the modal so you could do different things with those buttons but generally you know the primary button you want to do something and close the modal the other button you just want to close the modal and that was a really quick demo on how to use the confirm modal