Error

Good error design is clear, useful, and friendly. Designing concise and accurate error messages unblocks users and builds trust by meeting people where they are.

Default

This email address is already in use.
 code<template>
  <PError>This email address is already in use.</PError>
</template>

Custom Label

Email Error:This email address is already in use.
 code<template>
  <PError label="Email Error">This email address is already in use.</PError>
</template>

Sizes

This email is in use.
This email is in use.
This email is in use.
 code<template>
  <PStack gap="8">
    <PError size="sm">This email is in use.</PError>
    <PError>This email is in use.</PError>
    <PError size="lg">This email is in use.</PError>
  </PStack>
</template>

With an error property

Error:The request failed. Contact Us

code

<script setup>
import { ref } from 'vue'

const error = ref({
  message: 'The request failed.',
  action: 'Contact Us',
  label: 'Error',
  link: 'https://vercel.com/contact',
})
</script>

<template>
  <PError :error="error" />
</template>