Alert & Notification

A short message about an event or something that needs attention, in five intents (Info/Help, Warning, Success, Error, Update). Shown inline as an alert, or as a toast that dismisses itself.

Insert your alert title here!

import { InlineAlert } from '@orvain/react';
 
<InlineAlert
  composition="label"
  intent="update"
  shape="pill"
  title="A new update is ready"
  primaryAction={{ label: 'Update', onClick: () => install() }}
  onDismiss={() => setOpen(false)}
/>

Add a solid info Orvain Alert, rounded label style, with the preview icon, the title “Insert your alert title here!”, an “Update” button and a dismiss button.

Orvain MCPIncluded with the library

Show as toast

import { ToastProvider, useToast, FlatButton } from '@orvain/react';
 
function ShowToast() {
  const { toast } = useToast();
  return (
    <FlatButton
      label="Show as toast"
      onClick={() =>
        toast({
          title: 'Update available',
          description: 'Click reload to install.',
          action: { label: 'Reload', onClick: () => window.location.reload() },
        })
      }
    />
  );
}
 
export function App() {
  return (
    <ToastProvider position="bottom-right">
      <ShowToast />
    </ToastProvider>
  );
}

When to use#

Inline, to report on a section or form: a save failed, a setting has a side effect, a trial ends soon.
As a toast, to confirm an action the person just took: Link copied, Invite sent.
In the error intent, to say what went wrong and what to do next in one or two sentences.

When not to use

Use a Banner for a message about the whole product or account that stays at the top of the page.
Use a Modal for a decision that must be made before anything else can happen.

Anatomy#

1Container

534px wide, 24px radius (fully round as a pill), a 1px #e1e1e1 stroke and a soft layered shadow.

2Preview tile

A 38px white tile holding the intent's info glyph, or a file icon in the content-heavy alert.

3Title

Satoshi Medium 14, one line on a label alert.

4Description and links

Content heavy only: a line or two of description, a primary link and a quieter secondary link.

5Action and close

A 32px Update button (label alerts) and a 28px close button, on every variant.

States#

Solid/Fill

The intent's colour with white text, for what must be seen.

Tint/Lighter

A pale wash of the intent, dark text.

Neutral

White with dark text; only the glyph carries the intent.

Label, Pill, Content Heavy

One line, the same as a pill, or a title with description and links.

Toast

The same card, stacked in a corner, gone after five seconds; it waits while hovered or focused.

Source#

Preview – final code pending

The Alert & Notification is available in the Figma library with every variant and state shown above. The React and Vue source, props table and install command will be added to this page when the code library is released.

Get notified when the source is published Get notified when the source is published

Used in these blocks

alerts and toasts notifications feed