Prompt

Prompt is the confirmation / alert dialog — not a duplicate of Dialog.

	Prompt (s-prompt)	Dialog (s-dialog)
Purpose	Quick confirm, alert, or short forms with validation	General-purpose modal shell
Layout	Fixed: title bar + body + Accept / Cancel footer	Fully custom #header, default, #footer slots
Typical use	“Delete this item?”, security code, name validation	Login panel, nested modals, fullscreen content
Overlay (confirm)	Shakes to hint “use a button”	Closes or uses prevent-close

In Vuesax 3.x both come from the Dialogs family (vs-prompt is a preset on the same dialog primitive). Popup (vs-popup) is yet another component — a titled content panel, not yet migrated here.

Rule of thumb: need built-in OK/Cancel → Prompt. Need to own the whole layout → Dialog.

Default

Use the default slot to place inputs, selects, or any custom content inside the prompt.

Code copied

<template>
  <div class="prompt-demo">
    <p class="modelx">{{ val || 'null' }}</p>
    <s-button type="border" @click="activePrompt = true">Run prompt</s-button>

    <p class="modelx">{{ valMultiple.value1 }} {{ valMultiple.value2 }}</p>
    <s-button type="border" @click="activePrompt2 = true">
      Run prompt inputs
    </s-button>

    <s-prompt
      v-model="activePrompt"

      @cancel="val = ''"
      @accept="activePrompt = false"
      @close="activePrompt = false"
    >
      <div class="con-exemple-prompt">
        Enter the security code
        <s-input v-model="val" placeholder="Code" />
        <s-select v-model="select1" label="Figuras" class="select-example">
          <s-select-item
            v-for="(item, index) in options1"
            :key="index"
            :value="item.value"
            :text="item.text"
          />
        </s-select>
      </div>
    </s-prompt>

    <s-prompt
      v-model="activePrompt2"
      color="danger"
      title="Dialog"

      @cancel="
        () => {
          valMultiple.value1 = ''
          valMultiple.value2 = ''
        }
      "
      @accept="activePrompt2 = false"
      @close="activePrompt2 = false"
    >
      <div class="con-exemple-prompt">
        Enter your first and last name to <b>continue</b>.
        <s-input v-model="valMultiple.value1" placeholder="Name" />
        <s-input v-model="valMultiple.value2" placeholder="Last Name" />
        <s-alert :model-value="!validName" color="danger">
          <template #icon><s-icon name="cb:warning-alt" /></template>
          Fields can not be empty please enter the data
        </s-alert>
      </div>
    </s-prompt>
  </div>
</template>

<script setup lang="ts">
import { computed, reactive, ref } from 'vue'

Alert

type="alert" adds a header close button and closes when the overlay is clicked.

Code copied

<template>
  <div class="prompt-demo">
    <s-button @click="active = true">Alert</s-button>
    <s-prompt
      v-model="active"
      type="alert"
      title="Notice"
      text="Saved successfully."
      @accept="active = false"
      @close="active = false"
    />
  </div>

<script setup lang="ts">
import { ref } from 'vue'

const active = ref(false)

Validation

Use is-valid to disable the accept button until the form inside the slot is valid.

Code copied

<template>
  <div class="prompt-demo">
    <s-button type="border" @click="active = true"
      >Run validation prompt</s-button
    >
    <s-prompt
      v-model="active"
      color="danger"
      title="Dialog"
      :is-valid="validName"
      @cancel="reset"
      @accept="active = false"
      @close="active = false"
    >
      <div class="con-exemple-prompt">
        Enter your first and last name to <b>continue</b>.
        <s-input v-model="firstName" placeholder="Name" />
        <s-input v-model="lastName" placeholder="Last Name" />
        <s-alert :model-value="!validName" color="danger">
          <template #icon><s-icon name="cb:warning-alt" /></template>
          Fields can not be empty please enter the data
        </s-alert>

    </s-prompt>
  </div>
</template>

<script setup lang="ts">
import { computed, ref } from 'vue'

const active = ref(false)
const firstName = ref('')
const lastName = ref('')

const validName = computed(
  () => firstName.value.length > 0 && lastName.value.length > 0
)

const reset = () => {
  firstName.value = ''

Programmatic

After app.use(SaxDesignVue), call $prompt (Options API) or import SPromptBox — no template required. This matches the official $vs.dialog() helper.

import { SPromptBox } from 'sax-design-vue'

// Alert — resolves when dismissed
await SPromptBox.alert('Saved successfully.', 'Notice')

// Confirm — resolves on Accept, rejects on Cancel / close
try {
  await SPromptBox.confirm('Delete this item?', 'Confirm')
  // user accepted
} catch {
  // user cancelled
}

// Full options + action result
const action = await SPromptBox({
  title: 'Confirm',
  text: 'Continue?',
  type: 'confirm',
  color: 'danger',
})
// action: 'accept' | 'cancel' | 'close'

Code copied

<template>
  <div class="prompt-programmatic-demo">
    <s-button type="border" @click="runAlert">Alert (JS)</s-button>
    <s-button type="border" @click="runConfirm">Confirm (JS)</s-button>
    <p v-if="message" class="result">{{ message }}</p>
  </div>
</template>

import { ref } from 'vue'
import { SPromptBox } from 'sax-design-vue'

const message = ref('')

const runAlert = async () => {
  await SPromptBox.alert('Saved successfully.', 'Notice')
  message.value = 'Alert closed'
}

const runConfirm = async () => {
  try {
    await SPromptBox.confirm('Do you want to continue?', 'Confirm action')
    message.value = 'Confirmed'
  } catch {
    message.value = 'Cancelled'
  }
}

API