Banner

A full-width bar at the top of a page with one message about the whole product or account, in five statuses (Error, Warning, Success, Information, Feature) and four appearances.

DesignReactVuePrompts

Copy

Insert your alert title here!∙Insert your description here.

Button

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

import { Banner } from '@orvain/react';
 
<Banner
  intent="information"
  appearance="light"
  title="Scheduled maintenance"
  description
  descriptionText="Saturday from 02:00 to 06:00 UTC."
  linkButton
  actionLabel="Learn more"
  onAction={() => openStatusPage()}
  dismissIcon
  onDismiss={() => setOpen(false)}
  dismissAriaLabel="Dismiss"
/>

Add a filled error Orvain Banner with a left icon, the title “Insert your alert title here!”, the description “Insert your description here.”, a “Button” link and a dismiss icon.

Orvain MCPIncluded with the library

When to use#

• For something that affects the whole page, not a single field or card.
• For lasting states: an overdue invoice, a read-only workspace, a scheduled outage.
• With one action that resolves or explains the message.

When not to use

• Use an inline Alert for feedback on one form or section.
• Use a toast to confirm something the person just did.

Anatomy#

States#

Source#

Preview – final code pending

The Banner 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 publishedGet notified when the source is published

Used in these blocks