Confirmation

Status	stable
Published	3.3.0

When to Use

If the user is about to do something:

Hard to reverse (e.g. archiving or deleting)
That may have widespread impact (e.g. bulk action)
That may cause unintended side-effects, especially publicly (e.g. take down a web property)

We can make sure they're actually intending to do it with a Confirmation.

Do not use a Confirmation for something repetitive or easily reversed. It should deliberately interrupt the user's flow — there should be a legitimate reason a user might want to click "cancel".

Example

<jds-button @click="openBasicDemo">Open Confirmation</jds-button>
<jds-confirmation ref="basicDemoEl">
    Are you sure?
</jds-confirmation>

<jds-button @click="openCustomButtonDemo">Custom Buttons</jds-button>
<jds-confirmation ref="customButtonDemoEl" danger>
    <template #title>
        Delete all entities under "Entity name"?
    </template>
    <template #default>
        Once you delete this, there's no going back. Deleted entities are gone <em>forever</em>.
    </template>
    <template #confirm>Delete this</template>
</jds-confirmation>

How to Use

Add a jds-confirmation component to your template, providing each slot as desired.

<jds-confirmation ref="basicDemoEl">
    Are you sure?
</jds-confirmation>

Then, to open the confirmation, call it programmatically via the reference:

class Wrapper extends Vue {
    @Ref() basicDemoEl!: JdsConfirmation;

    openBasicDemo () {
        this.basicDemoEl.confirm()
            .then((resp: UIEvent) => console.log('confirmed', resp))
            .catch((resp: UIEvent) => console.log('canceled', resp))
            .finally(() => console.log('closed'));
    }
}

JdsConfirmation

Props

Prop	Value	Default
danger	`boolean`	false	Use this if this confirmation affects a particularly destructive action, such as deletion.

Events

Event	Payload
confirm
cancel

Slots

Slot
title	Ask the user if they intend to do this action. Use interrogative text. If an entity is involved, show an identifiable name of the entity so the user can make sure they're working with the right entity. example "Delete John Doe's Account?"
default	Explain the consequences of this action. If it's not undoable, particularly dangerous, or has side-effects, highlight that here. If it is undoable, describe how to undo the action here. If an entity is involved, you can show a preview or mention details of the entity, so the user can make sure they're interacting with the correct entity. example "You're about to archive the account associated with john.doe@example.com. They will no longer be able to login to their account, and any active sessions will be terminated. You can un-archive their account from the Company Settings → Users page."
confirm	Use this to change the button text, while still using the default confirmation button. If an entity is being interacted upon, you may include the entity identifier here. example "Delete Account" example "Delete john.doe@example.com Account"