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

NotificationBar

Purpose

Notification bars are used to show informational, warning, or error alerts. Since they communicate app-level information, they are placed across the top of the screen.

Dos

Keep messaging clear and short
Stay within the recommended 100 character limit
Add optional in-line links only at the end of the message and use sparingly

Don’ts

Show more than one notification bar at a time
Use for low-attention messages, such as simple confirmations of user action (instead, use Toasts)
Use for feature- or page-level loading errors, which can confuse the user

Usage

import {NotificationBar} from '@loomhq/lens'
<NotificationBar>Content</NotificationBar>

Variants

Variants are determined by severity level, which is dictated in the code.

info (default) — general messages
warning — higher importance messages that are non-blocking to the user now, but may cause issues later
error — urgent messages that are blocking the user right now
internal — local warnings for Loom engineers

Accessibility

Out of box, the NotificationBar has the following properties built in:

Color accessibility: All variants meet WCAG AA contrast
Navigability: Focusable and togglable by every input device (mouse, keyboard, switch, etc).
Screenreader support:
- The NotificationBar is an aside element, as it is complementary to the main body of the page
- The message body (usually the error or confirmation) is set with role is set to either status or alert depending on the severity of the message
- Info: status is less assertive and uses aria-live=”polite”, which waits until the screenreader user is idle to announce the message
- Error/Warning: alert is more assertive and uses aria-live=”assertive”
- (MDN docs), immediately to inform the user of the time-sensitive error
- The X representing “Close” has an aria-label of “Close notification bar”

Examples

Standard

() => {
const [errorIsOpen, setErrorIsOpen] = React.useState(false)
return (
  <>
  <Arrange autoFlow={{ 'default': 'row', 'small': 'row' }} gap="small">
    <Button onClick={() => setErrorIsOpen(true)} variant="primary">
      Trigger Error
    </Button>
    </Arrange>
     <NotificationBar
      isOpen={errorIsOpen}
      onCloseClick={() => setErrorIsOpen(false)}
      severity="error"
    >
      Oops! Failed to save your default Workspace
    </NotificationBar>
  </>
)}

() => {
const [errorIsOpen, setErrorIsOpen] = React.useState(false)
return (
  <>
  <Arrange autoFlow={{ 'default': 'row', 'small': 'row' }} gap="small">
    <Button onClick={() => setErrorIsOpen(true)} variant="primary">
      Trigger Error
    </Button>
    </Arrange>
     <NotificationBar
      isOpen={errorIsOpen}
      onCloseClick={() => setErrorIsOpen(false)}
      severity="error"
    >
      Oops! Failed to save your default Workspace
    </NotificationBar>
  </>
)}

Severity Levels

The three severity levels are directly tied to the error generated in the code.

internal is for alerting engineering Loommates of issues in the local environment. Internal alerts are not user-facing and will never appear in staging or production environments.

() => {
const [errorIsOpen, setErrorIsOpen] = React.useState(false)
const [infoIsOpen, setInfoIsOpen] = React.useState(false)
const [warningIsOpen, setWarningIsOpen] = React.useState(false)
const [internalIsOpen, setInternalIsOpen] = React.useState(false)
return (
  <>
  <Arrange autoFlow={{ 'default': 'row', 'small': 'row' }} gap="small">
    <Button onClick={() => setErrorIsOpen(true)} variant="primary">
      Trigger Error
    </Button>
       
    <Button onClick={() => setInfoIsOpen(true)} variant="primary">
      Trigger Info
    </Button>
   
     <Button onClick={() => setWarningIsOpen(true)} variant="primary">
      Trigger Warning
    </Button>
     <Button onClick={() => setInternalIsOpen(true)} variant="primary">
      Trigger Internal Warning
    </Button>
    </Arrange>
     <NotificationBar
      isOpen={errorIsOpen}
      onCloseClick={() => setErrorIsOpen(false)}
      severity="error"
    >
      Oops! Failed to save your default Workspace
    </NotificationBar>
     <NotificationBar
      isOpen={infoIsOpen}
      onCloseClick={() => setInfoIsOpen(false)}
      severity="info"
    >
      You have successfully verified yourdomainname.com for Single Sign On
    </NotificationBar>
    <NotificationBar
      isOpen={warningIsOpen}
      onCloseClick={() => setWarningIsOpen(false)}
      severity="warning"
    ><Text fontWeight="regular">You may not want to do that or try this at home. We recommend a max character count of 100.</Text>
    </NotificationBar>
    <NotificationBar
      isOpen={internalIsOpen}
      onCloseClick={() => setInternalIsOpen(false)}
      severity="internal"
    ><Arrange autoFlow="row"><Text fontWeight="bold">Dev alert</Text>
      Your changes will cause destructive errors in production. Verify your work before merging.
      </Arrange>
    </NotificationBar>
  </>
)}

() => {
const [errorIsOpen, setErrorIsOpen] = React.useState(false)
const [infoIsOpen, setInfoIsOpen] = React.useState(false)
const [warningIsOpen, setWarningIsOpen] = React.useState(false)
const [internalIsOpen, setInternalIsOpen] = React.useState(false)
return (
  <>
  <Arrange autoFlow={{ 'default': 'row', 'small': 'row' }} gap="small">
    <Button onClick={() => setErrorIsOpen(true)} variant="primary">
      Trigger Error
    </Button>
       
    <Button onClick={() => setInfoIsOpen(true)} variant="primary">
      Trigger Info
    </Button>
   
     <Button onClick={() => setWarningIsOpen(true)} variant="primary">
      Trigger Warning
    </Button>
     <Button onClick={() => setInternalIsOpen(true)} variant="primary">
      Trigger Internal Warning
    </Button>
    </Arrange>
     <NotificationBar
      isOpen={errorIsOpen}
      onCloseClick={() => setErrorIsOpen(false)}
      severity="error"
    >
      Oops! Failed to save your default Workspace
    </NotificationBar>
     <NotificationBar
      isOpen={infoIsOpen}
      onCloseClick={() => setInfoIsOpen(false)}
      severity="info"
    >
      You have successfully verified yourdomainname.com for Single Sign On
    </NotificationBar>
    <NotificationBar
      isOpen={warningIsOpen}
      onCloseClick={() => setWarningIsOpen(false)}
      severity="warning"
    ><Text fontWeight="regular">You may not want to do that or try this at home. We recommend a max character count of 100.</Text>
    </NotificationBar>
    <NotificationBar
      isOpen={internalIsOpen}
      onCloseClick={() => setInternalIsOpen(false)}
      severity="internal"
    ><Arrange autoFlow="row"><Text fontWeight="bold">Dev alert</Text>
      Your changes will cause destructive errors in production. Verify your work before merging.
      </Arrange>
    </NotificationBar>
  </>
)}

Optional onCloseClick

() => {
const [errorIsOpen, setErrorIsOpen] = React.useState(false)
return (
  <>
  <Arrange autoFlow={{ 'default': 'row', 'small': 'row' }} gap="small">
    <Button onClick={() => setErrorIsOpen(true)} variant="primary">
      Trigger Error
    </Button>
    </Arrange>
     <NotificationBar
      isOpen={errorIsOpen}
      severity="error"
    >
      Oops! Failed to save your default Workspace
    </NotificationBar>
  </>
)}

() => {
const [errorIsOpen, setErrorIsOpen] = React.useState(false)
return (
  <>
  <Arrange autoFlow={{ 'default': 'row', 'small': 'row' }} gap="small">
    <Button onClick={() => setErrorIsOpen(true)} variant="primary">
      Trigger Error
    </Button>
    </Arrange>
     <NotificationBar
      isOpen={errorIsOpen}
      severity="error"
    >
      Oops! Failed to save your default Workspace
    </NotificationBar>
  </>
)}

Props

name

type

default

severity

SeverityLevels

'info'

children

React.ReactNode

isOpen

boolean

onCloseClick

() => void

Guides

Styles

Components

Layout

Icons

Illustrations

Patterns

Utilities

Playground