Documentation
Components
Error

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.

Usage

First of all, you need to import the Error component from the kitchn package.

import { Error } from "kitchn"

Default

Code Editor
<Error>This email address is already in use.</Error>

Custom Label

Code Editor
<Error label="Email Error">This email address is already in use.</Error>

No Label

Code Editor
<Error label={false}>This email address is already in use. </Error>

Sizes

Code Editor
<Container direction={["column", "row", "row"]} top>
  <Container left>
    <Error size="small">This email is in use.</Error>
  </Container>
  <Container left>
    <Error>This email is in use.</Error>
  </Container>
  <Container left>
    <Error size="large">This email is in use.</Error>
  </Container>
</Container>

Multiline

Code Editor
<Container>
  <Container>
    <Error size="small">A valid email address is required so that we can verify your GitHub installation. In the event that you cannot provide a valid email address, please contact support.</Error>
  </Container>
  <Container>
    <Error>A valid email address is required so that we can verify your GitHub installation. In the event that you cannot provide a valid email address, please contact support.</Error>
  </Container>
  <Container>
    <Error size="large">A valid email address is required so that we can verify your GitHub installation. In the event that you cannot provide a valid email address, please contact support.</Error>
  </Container>
</Container>

With an error property

Code Editor
<Error 
  error={{ 
    message: "The request failed.", 
    action: "Contact Us", 
    link: "mailto:contact@tonightpass.com" 
  }}
/>

Props

NameTypeDefaultRequiredDescriptionAccepted values
labelboolean | stringtrue-The label of the error.-
sizestringnormal-The size of the error.small | normal | large
error{ message: string; action?: string; link?: string }undefined-The error property.-
Last updated on
EntityFieldset