Hesoyam

Error

Inline failure copy. Exported as GeistError so it does not collide with the built-in Error constructor.

Default

Default label is Error. The default slot is the message. role="alert" is already on the root.


        

          1
          
          <GeistError>This email address is already in use.</GeistError>

Custom label


        

          1
          
          <GeistError label="Email Error">
        

          2
          
            This email address is already in use.
        

          3
          
          </GeistError>

No label

Pass :label="false" when the surrounding field already names the problem.


        

          1
          
          <GeistError :label="false">
        

          2
          
            This email address is already in use.
        

          3
          
          </GeistError>

Sizes

small is 12px, medium is 13px, large is 16px. medium is the default.


        

          1
          
          <GeistError size="small">This email is in use.</GeistError>
        

          2
          
          <GeistError size="medium">This email is in use.</GeistError>
        

          3
          
          <GeistError size="large">This email is in use.</GeistError>

Error object

error.message fills the slot when you do not pass children. action is plain text unless link is set.


        

          1
          
          <GeistError
        

          2
          
            :error="{
        

          3
          
              message: 'The request failed.',
        

          4
          
              action: 'Contact Us',
        

          5
          
              link: 'https://vercel.com/contact',
        

          6
          
            }"
        

          7
          
          />

Best practices

  • GeistError is a line of copy next to a field or under a section, not a full-page boundary. Toasts cover transient save failures. Input's own error state covers a single invalid field.
  • Say what happened, then what to do. Skip "Oops", "Unfortunately", and "Unable to". User-state errors use Couldn't; system errors use Failed to.
  • Name the resource (Couldn't Load Deployments), not Something Went Wrong. Pair platform failures with a stable request or deployment id the user can copy.
  • :label="false" when a nearby Label already identifies the field. A custom label is for a named subsystem (Email Error, Billing Error).
  • The folder also exports Error as an alias of GeistError. New pages should import GeistError.
  • When the message appears after a failed request, wrap it in aria-live="polite". The component already sets role="alert".