SUI Docs

When requiring users to interact with the application, but without jumping to a new page and interrupting the user's workflow, you can use Modal to create a new floating layer over the current page to get user feedback or display information.

<su-modal v-if="showModal" @close="hideModalPopup()">
    <div slot="header">Modal header</div>
    <div slot="body">Content text goes here...</div>
    <div slot="footer" class="actions">Footer text is here...</div>
</su-modal>

# Props

@close - Used to close popup when clicked outside of the modal

# Slots

header - Used for to update the title of the modal
body - Used for the main content section of the modal
footer - The slot which contains the action buttons. Use this to replace the buttons

# Usage

<div>
    <su-modal v-if="showModal" @close="hideModalPopup()">
        <h2 slot="header">Modal header</h2>
        <div slot="body">
            <span>Modal content goes here</span><br><br>
            <span>Modal content goes here</span>
        </div>
        <div slot="footer" class="actions">
            <su-button class="button-blue" @click.native="continueAction">
                <span>Continue</span>
            </su-button>
            <su-button class="button-outline" @click.native="hideModalPopup">
                <span>Cancel</span>
            </su-button>
        </div>
    </su-modal>
</div>

← Toast →