Error Message

Displays a clear message to indicate errors or issues. Helps users understand problems and take corrective action quickly.

String Message

vue
<script setup lang="ts">
import { ref } from 'vue'
import { ErrorMessage } from 'frappe-ui'

const message = ref('Invalid value')
</script>

<template>
  <ErrorMessage :message="message" />
</template>

Error Object

vue
<script setup lang="ts">
import { ErrorMessage } from "frappe-ui";

const error = new Error("There was an error");
</script>

<template>
  <ErrorMessage :message="error">
    <template #source>
      <textarea v-pre>
        <ErrorMessage :message="Error('There was an error')" />
      </textarea>
    </template>
  </ErrorMessage>
</template>

API Reference

Show types
typescript
export interface ErrorMessageProps {
  /** The error message to display. Can be a string or an Error object */
  message?: string | Error
}
message
string | Error

The error message to display. Can be a string or an Error object