Guides
Get started Component definition Designing custom elements Development best practices
Styles
Colors Typography Spacing Shadows Radii
Components
Avatar Button Checkbox ColorPicker Dropdown FormField Icon IconButton Illustration Link List Loader Logo LogoLoader Menu Modal NotificationBar Pill Radio Select Skeleton Switch Tabs Text Textarea TextButton TextInput Toast Tooltip
Layout
Align Arrange Backdrop Container ErrorContainer Popover Spacer Split
Icons
Icon set
Illustrations
Illustration set
Patterns
Disabled styles Errors Forms Discovery Plan upgrade Settings
Utilities
CSS utilities CSS variables Responsive
Playground
Layout recipes Showcase

ErrorContainer

Inside component

Oops, that didn't work. Try again.

Purpose

ErrorContainers handle displaying inline errors as close to the source of the error (and the action to resolve it) as possible. For example, ErrorContainer can be wrapped around a Button component that calls a GraphQL mutation. See the Errors page for more information on how to handle general errors.

Guidance

Wrap your component with the ErrorContainer to highlight when an error occurs.

Usage

import { ErrorContainer } from '@loomhq/lens'
<ErrorContainer errorActive={true}>{children}</ErrorContainer>

Examples

Standard

() => {
const [errorIsActive, setErrorIsActive] = React.useState(false)
return (
  <ErrorContainer errorActive={errorIsActive}>
    <Arrange autoFlow="row" gap="xsmall">
      <Text>Click this button to trigger an error</Text>
      <Button onClick={() => setErrorIsActive(!errorIsActive)} variant="primary">
        Trigger error
      </Button>
    </Arrange>
  </ErrorContainer>
)}

() => {
const [errorIsActive, setErrorIsActive] = React.useState(false)
return (
  <ErrorContainer errorActive={errorIsActive}>
    <Arrange autoFlow="row" gap="xsmall">
      <Text>Click this button to trigger an error</Text>
      <Button onClick={() => setErrorIsActive(!errorIsActive)} variant="primary">
        Trigger error
      </Button>
    </Arrange>
  </ErrorContainer>
)}

With custom error message

() => {
const [errorIsActive, setErrorIsActive] = React.useState(false)
const errorMessage = 'Something went wrong.'
return (
  <ErrorContainer errorActive={errorIsActive} errorMessage={errorMessage}>
    <Arrange autoFlow="row" gap="xsmall">
      <Text>Click this button to trigger an error</Text>
      <Button onClick={() => setErrorIsActive(!errorIsActive)} variant="primary">
        Trigger error
      </Button>
    </Arrange>
  </ErrorContainer>
)}

() => {
const [errorIsActive, setErrorIsActive] = React.useState(false)
const errorMessage = 'Something went wrong.'
return (
  <ErrorContainer errorActive={errorIsActive} errorMessage={errorMessage}>
    <Arrange autoFlow="row" gap="xsmall">
      <Text>Click this button to trigger an error</Text>
      <Button onClick={() => setErrorIsActive(!errorIsActive)} variant="primary">
        Trigger error
      </Button>
    </Arrange>
  </ErrorContainer>
)}

Props

name

type

default

errorMessage

string

"Oops, that didn't work. Try again."

children

React.ReactNode

required

errorActive

boolean

required

Guides

Styles

Components

Layout

Icons

Illustrations

Patterns

Utilities

Playground