Note

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

<template>
  <VNote headline="Changes Saved Successfully" connotation="success"
    ><template #icon><VIcon name="check-circle" /></template
  ></VNote>
</template>

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

<your-prefix-note
headline="Changes Saved"
connotation="success"

>

    <your-prefix-icon slot="icon" name="check-circle" label="Success:"></your-prefix-icon>
    Your changes have been saved successfully. You can now continue working.

</your-prefix-icon>

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

<template>
  <VNote headline="Note Headline" connotation="information">
    <template #icon>
      <VIcon name="home-line" label="User information:" />
    </template>
    <p>This is the text that explains about something important!</p>
  </VNote>
</template>

<vwc-note headline="Note Headline" connotation="information">
  <vwc-icon slot="icon" name="home-line" label="User information:"></vwc-icon>
  <p>This is the text that explains about something important!</p>
</vwc-note>

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

<template>
  <VNote headline="Task in my todo list">
    <template #icon>
      <VIcon name="check-circle-solid" connotation="success" label="Done" />
    </template>
  </VNote>
</template>

<vwc-note headline="Task in my todo list">
  <vwc-icon slot="icon" name="check-circle-solid" connotation="success" label="Done"></vwc-icon>
</vwc-note>