Icons

Built-in icons

Notifications of different types (toast.info, toast.error, toast.success, toast.warning) display an icon associated with the selected type.

<template>
  <h1>Hello {{ msg }}</h1>
</template>

<script setup lang="ts">
import { ref } from 'vue';
const msg = ref<string>('world');
</script>

Open Sandbox

Disable icons

• Disable the icon individually

<template>
  <h1>Hello {{ msg }}</h1>
</template>

<script setup lang="ts">
import { ref } from 'vue';
const msg = ref<string>('world');
</script>

Open Sandbox

• Disable the icon gloabally

<template>
  <h1>Hello {{ msg }}</h1>
</template>

<script setup lang="ts">
import { ref } from 'vue';
const msg = ref<string>('world');
</script>

Open Sandbox

Custom icons

<template>
  <h1>Hello {{ msg }}</h1>
</template>

<script setup lang="ts">
import { ref } from 'vue';
const msg = ref<string>('world');
</script>

Open Sandbox

Custom icons globally

<template>
  <h1>Hello {{ msg }}</h1>
</template>

<script setup lang="ts">
import { ref } from 'vue';
const msg = ref<string>('world');
</script>

Open Sandbox

TIP

Code in Jsx:

toast('HELLO', {
  icon: ({ theme, type }) => (
    <ComponentIcon
      theme={theme}
      type={type}
      class={theme}
      style={{ fontSize: '12px' }}
    />
  ),
});