Alert

<script setup lang="ts">
import { VAlert } from '@vonage/vivid-api-vue';
</script>

<template>
  <VAlert text="Some important information for you" open />
</template>

<script type="module">
  import { registerAlert } from '@vonage/vivid-api';
  registerAlert('your-prefix');
</script>

<your-prefix-alert text="Some important information for you" open></your-prefix-alert>

<script setup lang="ts">
import { VAlert, VButton } from '@vonage/vivid-api-vue';
import { ref } from 'vue';

const open = ref(false);
</script>

<template>
  <VAlert text="An important information for you" :open="open" />
  <VButton appearance="outlined" label="Show/Hide alert" @click="open = !open" />
</template>

<vwc-alert text="Some important information for you"></vwc-alert>

<vwc-button appearance="outlined" label="Show/Hide Alert" onclick="toggleAlert()"></vwc-button>

<script>
  alert = document.querySelector('vwc-alert');
  function toggleAlert() {
    alert.open = !alert.open;
  }
</script>

<script setup lang="ts">
import { VAlert, VButton } from '@vonage/vivid-api-vue';
import { ref } from 'vue';

const open = ref(false);
</script>

<template>
  <VAlert text="An important information for you" :open="open" timeoutms="2000" />
  <VButton appearance="outlined" label="Show an Alert for 2 seconds" @click="open = true" />
</template>

<vwc-alert text="Some important information for you" timeoutms="2000"></vwc-alert>

<vwc-button appearance="outlined" label="Show an Alert for 2 seconds" onclick="openAlert()"></vwc-button>

<script>
  alert = document.querySelector('vwc-alert');
  function openAlert() {
    alert.open = true;
  }
</script>

<script setup lang="ts">
import { VAlert } from '@vonage/vivid-api-vue';
</script>

<template>
  <p>Content above</p>
  <VAlert strategy="static" text="This Alert has position set to static" open />
  <p>Content below</p>
</template>

<p>Content above</p>
<vwc-alert strategy="static" text="This Alert has position set to static" open></vwc-alert>
<p>Content below</p>

<script setup lang="ts">
import { VAlert, VSwitch } from '@vonage/vivid-api-vue';
</script>

<template>
  <VAlert open>
    <template #main>
      <VSwitch label="Do not show more Alerts" />
    </template>
  </VAlert>
</template>

<vwc-alert open>
  <vwc-switch slot="main" label="Do not show more Alerts"></vwc-switch>
</vwc-alert>

<script setup lang="ts">
import { VAlert, VButton } from '@vonage/vivid-api-vue';
</script>

<template>
  <VAlert text="Some important information for you" open>
    <template #action-items>
      <VButton label="Action" appearance="outlined" shape="pill" />
    </template>
  </VAlert>
</template>

<vwc-alert text="Some important information for you" open>
  <vwc-button slot="action-items" appearance="outlined" shape="pill" label="Action"></vwc-button>
</vwc-alert>

<script setup lang="ts">
import { VAlert, VIcon } from '@vonage/vivid-api-vue';
</script>

<template>
  <VAlert text="Some important information for you" open>
    <template #icon>
      <VIcon name="megaphone-solid" connotation="cta" label="Announcement:" />
    </template>
  </VAlert>
</template>

<vwc-alert text="Some important information for you" open>
  <vwc-icon slot="icon" name="megaphone-solid" connotation="cta" label="Announcement:"></vwc-icon>
</vwc-alert>

<script setup lang="ts">
import { VAlert } from '@vonage/vivid-api-vue';
</script>

<template>
  <VAlert style="--alert-min-inline-size: auto" text="Very fitting!" open />
</template>

<vwc-alert style="--alert-min-inline-size: auto" text="Very fitting!" open></vwc-alert>

<script setup lang="ts">
import { VAlert } from '@vonage/vivid-api-vue';
</script>

<template>
  <VAlert style="--alert-max-inline-size: 300px;" text="This text is very long and will wrap to the next line." open />
</template>

<vwc-alert style="--alert-max-inline-size: 300px;" text="This text is very long and will wrap to the next line." open></vwc-alert>