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

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

Custom Label

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

No Label

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

Sizes

<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>
↓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

<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>
↓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

<Error 
  error={{ 
    message: "The request failed.", 
    action: "Contact Us", 
    link: "mailto:contact@tonightpass.com" 
  }}
/>
↓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.-
EntityFieldset