Banner

Used to grab attention for important system-wide updates or important information that impacts how users interact with the system. Banners are not dismissible and only disappear when no longer required.

Basic

  • Banner component will display information at a corners of the viewport by setting the open prop to true.

Source Code

import { Banner, Button } from '@ocean-network-express/magenta-ui/react';
import { useState } from 'react';

export function Basic() {
  const [showBanner, setShowBanner] = useState(false);
  return (
    <>
      <div className="flex gap-4">
        <Button onClick={() => setShowBanner((prev) => !prev)}>Toggle A Banner</Button>
        <Button onClick={() => setShowBanner(true)}>Show Banner</Button>
        <Button onClick={() => setShowBanner(false)}>Hide Banner</Button>
      </div>

Colors

  • Banner supports 5 colors red, green, blue, orange, and neutral and can be changed by passing the color prop.
  • Default color is blue.

Source Code

import {
  Banner,
  BannerProps,
  Button,
  FeedbackMessageColor,
} from '@ocean-network-express/magenta-ui/react';
import { useRef, useState } from 'react';

const upperFirst = (str: string) => \`\${str[0].toUpperCase()}\${str.slice(1)}\`;

const ColorOptions = Object.values(FeedbackMessageColor).map((color) => ({
  label: upperFirst(color),

Sizes

  • Banner component supports 4 sizes: sm, md, lg, and responsive by setting the size prop.
  • Default size is lg.

Source Code

import { InfoCircleOutline } from '@ocean-network-express/magenta-ui/icons';
import { Banner, BannerProps, Button } from '@ocean-network-express/magenta-ui/react';
import { useRef, useState } from 'react';

const SizeOptions = [
  { label: 'SM', value: 'sm' as const },
  { label: 'MD', value: 'md' as const },
  { label: 'LG', value: 'lg' as const },
  { label: 'Responsive', value: 'responsive' as const },
];

export function Sizes() {

Positions

  • Banner component supports 6 positions: top-left, top-right, bottom-left, bottom-right, top-center, and bottom-center by setting the position prop.
  • Default position is top-right.

Source Code

import { Banner, Button, FeedbackMessagePosition } from '@ocean-network-express/magenta-ui/react';
import { useState } from 'react';

const upperFirst = (str: string) => \`\${str[0].toUpperCase()}\${str.slice(1)}\`;

const PositionOptions = Object.values(FeedbackMessagePosition).map((position) => ({
  label: position.split('-').map(upperFirst).join(' '),
  value: position,
  name: position.split('-').join(' '),
}));

export function Position() {

Prefix Icon

  • Banner supports icons from the @ocean-network-express/magenta-ui/icons package.
  • The prop icon support to add icon or other content to the left side.

Source Code

import { CheckCircleOutline } from '@ocean-network-express/magenta-ui/icons';
import { Banner, Button } from '@ocean-network-express/magenta-ui/react';
import { useState } from 'react';

export function PrefixIcon() {
  const [showBanner, setShowBanner] = useState(false);
  return (
    <>
      <Button onClick={() => setShowBanner((prev) => !prev)}>Banner with icon</Button>
      <Banner
        icon={<CheckCircleOutline />}
        title="Banner title"

Action Buttons

  • Banner can include button actions by passing the actions prop.
  • The actions prop is an array of objects with the following properties:
    • label: The text to display on the button.
    • All other props are the same as the Button component.
    • Some default props in the action button are color is neutral, variant is ghost, and size is md.

Source Code

import { InfoCircleOutline } from '@ocean-network-express/magenta-ui/icons';
import { Banner, Button } from '@ocean-network-express/magenta-ui/react';
import { useState } from 'react';

export function BannerAction() {
  const [showBanner, setShowBanner] = useState(false);
  const handleCloseBanner = () => setShowBanner(false);

  return (
    <>
      <Button onClick={() => setShowBanner((prev) => !prev)}>Banner with actions</Button>
      <Banner

Links

  • Banner can include links by passing the urls prop.
  • The urls prop is an array of objects with the following properties:
    • displayText: The text to display on the link.
    • All other props are the same as the Link component.

Source Code

import { InfoCircleOutline } from '@ocean-network-express/magenta-ui/icons';
import { Banner, Button } from '@ocean-network-express/magenta-ui/react';
import { useState } from 'react';

export function BannerLink() {
  const [showBanner, setShowBanner] = useState(false);
  const handleCloseBanner = () => setShowBanner(false);

  return (
    <>
      <Button onClick={() => setShowBanner((prev) => !prev)}>Banner with links</Button>
      <Banner

Custom links and actions

  • You can custom urls and actions by passing custom React component

Source Code

import { Button, InlineBanner, Text } from '@ocean-network-express/magenta-ui/react';

export function CustomBanner() {
  const TitleComponent = () => (
    <Text className="text-red-700" size="lg">
      Title of the banner
    </Text>
  );

  const MessageComponent = () => (
    <Text size="lg">
      This is a custom banner message. You can customize the content of the banner by passing{' '}

Close A Banner

Remove Close Icon Button

  • Banner can remove the close button icon or by setting the closable prop to false.

Source Code

import { Banner, Button } from '@ocean-network-express/magenta-ui/react';
import { useState } from 'react';

export function UnClosableBanner() {
  const [showBanner, setShowBanner] = useState(false);
  return (
    <>
      <Button onClick={() => setShowBanner((prev) => !prev)}>Un-Closable Banner</Button>
      <Banner
        title="Banner title"
        message="Banner without close icon"
        open={showBanner}

Close duration

  • Banner can be set to automatically call onClose prop after a certain duration.
  • Default duration is 10000ms, it can be changed by passing the duration prop.

Source Code

import { Banner, Button } from '@ocean-network-express/magenta-ui/react';
import { useState } from 'react';

export function CloseDurationBanner() {
  const [showBanner, setShowBanner] = useState(false);
  return (
    <>
      <Button onClick={() => setShowBanner((prev) => !prev)}>Banner 2000ms duration</Button>
      <Banner
        title="Banner title"
        message="Banner will be auto-closed after 2000 ms."
        onClose={() => setShowBanner(false)}
  • To prevent the Banner from closing automatically, set the duration prop to 0 or Infinity.

Source Code

import { Banner, Button } from '@ocean-network-express/magenta-ui/react';
import { useState } from 'react';

export function NotCloseBanner() {
  const [showBanner, setShowBanner] = useState(false);
  return (
    <>
      <Button onClick={() => setShowBanner((prev) => !prev)}>Not auto close Banner</Button>
      <Banner
        title="Banner title"
        message="Banner will not be auto-closed."
        onClose={() => setShowBanner(false)}

Inline Banner

  • Banner can be displayed inline block by using InlineBanner component.
  • InlineBanner component accepts all the props of Banner component except open prop.
  • By default, InlineBanner component will have inline props set to true.

Source Code

import { InlineBanner } from '@ocean-network-express/magenta-ui/react';

export function InlineBannerBasic() {
  return (
    <InlineBanner
      title="Inline banner title"
      message="Banner are used to grab attention for important system-wide updates or important information that impacts how users interact with the system."
    />
  );
}

Was this page helpful?