# Toast

<div class="app">
  <v-data v-slot="state" :data="{ showToast: false, type: 'success' }">
    <v-select class="mb-5" placeholder="Type" :value="state.type" @input="state.type = $event.target.value">
      <v-option value="success">Success toast</v-option>
      <v-option value="info">Info toast</v-option>
      <v-option value="error">Error toast</v-option>
    </v-select>
    <v-button @click="state.showToast = true;">Show toast</v-button>
    <v-toast
      v-if="state.showToast"
      @close="state.showToast = false"
      :success="state.type === 'success'"
      :info="state.type === 'info'"
      :error="state.type === 'error'"
    >This is a toast!</v-toast>
  </v-data>
</div>

<div class="app">
  <v-form v-slot="form" method="POST" action="https://www.mocky.io/v2/5d81366f300000690069959a?mocky-delay=500ms" async>
    <v-input name="name" class="mb-5" placeholder="Name"></v-input>
    <v-button tag="button" :loading="form.submitting">Save button</v-button>
    <!-- Toasts -->
    <v-toast v-if="!form.submitting && form.response && form.response.ok" success>
      Changes have been saved.
    </v-toast>
    <v-toast v-else-if="!form.submitting && form.response && !form.response.ok" error>
      Something went wrong.
    </v-toast>
  </v-form>
</div>