Notification

Usage

Use notifications to inform users about the result of an action. There are different notifications are available for different results, or use a custom version.

Success Notification

Edit live code

Info Notification

Edit live code

Warning Notification

Edit live code

Error Notification

Edit live code

Content

• Always describe what went wrong and what the user should do next.

Accessibility

• Always provide a link back to the submit button if the user needs to resubmit a form
• Ensure the keyboard focus is moved to a notification if it appears as a result of user action
• Ensure a status message is included in the notification, do not solely rely on the notification colour.

Variations

Dismissable

Notifications can also set to dismiss with the dismissable property.

Edit live code

Custom Variant

Custom variants can be defined in your theme using the variants property.

import { createTheme, Badge } from '@ovotech/nebula';
import { ThemeProvider } from 'styled-components';

const Example = () => {
  const theme = createTheme({
    notification: {
      variants: {
        golden: {
          background: 'white',
          borderColor: 'goldenrod'
        }
      }
    }
  });

  return (
    <ThemeProvider theme={customTheme}>
      <Notification title="Custom" variant="golden">
        <P>This is a custom notification</P>
      </Notification>
    </ThemeProvider>
  );
}
import { createTheme, Badge } from '@ovotech/nebula';
import { ThemeProvider } from 'styled-components';

const Example = () => {
  const theme = createTheme({
    notification: {
      variants: {
        golden: {
          background: 'white',
          borderColor: 'goldenrod'
        }
      }
    }
  });

  return (
    <ThemeProvider theme={customTheme}>
      <Notification title="Custom" variant="golden">
        <P>This is a custom notification</P>
      </Notification>
    </ThemeProvider>
  );
}

Properties

Notification

ErrorNotification

In addition to Notification properties, ErrorNotification has a preset title.

Tokens

Theme tokens

Related

• Form Guidelines
• Error Summary
• Inclusive Components - Notifications (opens in new window)