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
↓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
↓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
↓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
↓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
↓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
↓Code Editor
<Error error={{ message: "The request failed.", action: "Contact Us", link: "mailto:contact@tonightpass.com" }} />
Props
Name | Type | Default | Required | Description | Accepted values |
---|---|---|---|---|---|
label | boolean | string | true | - | The label of the error. | - |
size | string | normal | - | The size of the error. | small | normal | large |
error | { message: string; action?: string; link?: string } | undefined | - | The error property. | - |