In progress

BannerNotification

A BannerNotification displays important temporary messages that affect the entire view or service, appearing below the header and remaining visible until dismissed.

• Figma
• Storybook
• Edit this page
• Create a new issue

Scheduled maintenance

The service will be unavailable on Sunday from 02:00 to 04:00.

Code example

import { BannerNotification } from '@yleisradio/yds-components-react';

<BannerNotification level="warning" title="Scheduled maintenance">
  The service will be unavailable on Sunday from 02:00 to 04:00.
</BannerNotification>

Why to use

A BannerNotification is used to communicate messages that affect the entire page or service, ensuring users notice significant states such as maintenance alerts, authentication requirements, or system errors. Unlike Inline Notifications, which relate to specific content or form elements, and Toast Notifications, which provide short-lived feedback, BannerNotifications offer broad visibility for messages that require sustained attention across the interface.

When to use

Use BannerNotification when a message applies to the entire view or service — such as maintenance, downtime, or authentication notices — or when you need a persistent, manually dismissible notification. It is best suited for situations where Inline or Toast Notifications are not prominent enough to ensure user awareness.

Do

• Use BannerNotification when the message affects the entire view or service and must stay visible until acknowledged.
• Include a Close button only for non-critical, informational, or time-limited messages that users can safely dismiss.
• Keep messages short, clear, and user-centered.
• Make the content informative, actionable, and relevant.
• Display only one banner at a time to maintain clarity.
• Select the correct level (info, success, warning, error) to match the context and importance.

Don’t

• Don’t use Toast Notification or Inline Notification when the message applies to the whole view or service — use BannerNotification instead.
• Don’t use banners for minor, decorative, or redundant information.
• Don’t include a Close button for critical or system-wide messages that must be acknowledged elsewhere.

Differences between Notification Types

Type	Purpose	Placement	Use case
Banner Notification	A notification covering the entire view or service (e.g., maintenance, error state).	Fixed, below the header.	“Maintenance in progress”
Inline Notification	A local notification within content or a form (e.g., field error).	Embedded in content.	“This field is required”
Toast Notification	A short-lived, automatically disappearing feedback message (e.g., save confirmation).	Floating near the bottom of the screen, sliding in and out smoothly.	“Saved successfully”

Anatomy

1. Icon – Icon indicating the message level (info, success, warning, error).
2. Title – Short heading.
3. Body – Main message content.
4. Secondary Button (Actions) – Optional supporting or alternative action.
5. Primary Button (Actions) – Main action guiding the user’s next step.
6. Close Button – Optional dismiss control that allows the user to close non-critical or informational notifications.

Key BannerNotification Props

Use these props to configure the BannerNotification component.

level

Sets semantic and visual level (icon + colors).

Value	Example	Description
info	General information.	Neutral informational context.
success	Task completed.	Positive confirmation.
warning	Check details.	Caution, requires attention soon.
error	Action failed.	Critical or blocking issue.

Code example

<BannerNotification level="info">General information.</BannerNotification>
<BannerNotification level="success">Task completed.</BannerNotification>
<BannerNotification level="warning">Check details.</BannerNotification>
<BannerNotification level="error">Action failed.</BannerNotification>

title

Optional short heading preceding body.

Type	Example	Description
ReactNode	Update Service updated.	Concise summary of message.

Code example

<BannerNotification title="Update">Service updated.</BannerNotification>

children (body)

Main descriptive text.

Type	Example	Description
ReactNode	Maintenance Will occur Sunday.	Explains status or guidance.

Code example

<BannerNotification title="Maintenance">Will occur Sunday.</BannerNotification>
<BannerNotification>Standalone message without title.</BannerNotification>

hideIcon

Suppresses level icon (text/color still convey status).

Type	Example	Description
boolean	Plain text only.	Removes icon for minimal layout.

Code example

<BannerNotification hideIcon>Plain text only.</BannerNotification>

onClose (close button)

Type	Example	Description
() => void	Dismissable Close me.	If provided, displays close button at the right side. Closing the notification needs to be handled in the callback.

Code example

const [show, setShow] = useState(true);
{show && (
  <BannerNotification onClose={() => setShow(false)} title="Dismissable">
    Close me.
  </BannerNotification>
)}

actions

Inline actionable elements (e.g., Retry, View details).

Type	Example	Description
ReactNode	Beta test We are looking for user to participate in our beta test.	Buttons aligned within banner.

Code example

  <BannerNotification
    actions={
      <div style={{ display: 'flex', gap: 8}}>
        <Button size="xs" text="Participate" />
        <Button variant="secondary" size="xs" text="Dismiss" />
      </div>
    }
    title="Beta test"
  >
    We are looking for users to participate in our beta test.
  </BannerNotification>

contentContainer

Custom wrapper component to constrain or style inner content.

Type	Example	Description
ComponentType<PropsWithChildren>	See implementation examples	Limits width / adds layout styling.

Behavior

• Appears directly below the global header, spanning the full width of the viewport.
• Persists until closed or issue is resolved.
• Should not overlap or obscure key content.
• Typically only one banner is visible per view.

Accessibility

• Place logically after the header in DOM order for easy navigation.
• Ensure close button includes a descriptive aria-label (e.g., “Close notification”).
• Fully keyboard-accessible and visible focus states.

Implementation examples

With actions

Vahvista, että kotikuntasi on Suomessa

Ohjelma katsottavissa EU:n alueella.

Code example

<BannerNotification
  level="info"
  title="Vahvista, että kotikuntasi on Suomessa"
  actions={<Button size="xs" text="Vahvista kotikuntasi" />}
>
  <span>Ohjelma katsottavissa EU:n alueella.</span>
</BannerNotification>

Constrained content width

Feature rollout

We are gradually rolling out a new navigation experience. Some users may see the update earlier than others.

Code example

import { BannerNotification } from '@yleisradio/yds-components-react';

const Container = ({ children }: { children: React.ReactNode }) => (
  <div style={{ maxWidth: 640, margin: '0 auto', width: '100%' }}>{children}</div>
);

export const BannerNotificationContentContainer = () => {
  return (
    <BannerNotification level="info" title="Feature rollout" contentContainer={Container}>
      We are gradually rolling out a new navigation experience. Some users may see the update
      earlier than others.
    </BannerNotification>
  );
};

API Reference

Props

The BannerNotification component accepts all standard HTML <div> attributes in addition to the following props:

Prop	Type	Required	Default	Description
children	React.ReactNode	No	—
title	React.ReactNode	No	—
level	NotificationLevel	No	'info'
hideIcon	boolean	No	—
onClose	() => void	No	—
actions	React.ReactNode	No	—
contentContainer	ComponentType<PropsWithChildren>	No	—

Type Definitions

export type NotificationLevel = 'info' | 'success' | 'warning' | 'error';

export interface BannerNotificationDSProps {
  children?: React.ReactNode;
  title?: React.ReactNode;
  level?: NotificationLevel;
  hideIcon?: boolean;
  onClose?: () => void;
  actions?: React.ReactNode;
  contentContainer?: ComponentType<PropsWithChildren>;
}

export type BannerNotificationProps = Omit<
  HTMLAttributes<HTMLDivElement>,
  keyof BannerNotificationDSProps
> &
  BannerNotificationDSProps;

Related Components

• Notification – Inline contextual messages.
• Toast Notification – Short-lived floating feedback.