PageBanner

Description: The Banner component is a versatile alert-style component used to display important information at the top of the page. It supports various styles, optional dismiss functionality, icons, titles, descriptions, and links.

Usage:

import React, { useState } from 'react';
import Banner from 'blendx-ui/Banner';

const MyBanner = () => {
  const [show, setShow] = useState(true);

  const handleDismiss = () => {
    setShow(false);
  };

  return (
    <Banner
      show={show}
      variant="info"
      icon="info-icon"
      title="Notice"
      description="This is an important announcement."
      link={{ url: '/more-info', label: 'Learn More' }}
      dismissible
      onDismiss={handleDismiss}
    />
  );
};

export default MyBanner;

Props:

children (node): An element to be rendered inside the banner.
dismissible (bool): If true, the banner will include a dismiss button (default: false).
dismissAltText (node): The alt text for the dismiss button, useful for accessibility (default: 'Dismiss').
onDismiss (func): A function to be called when the dismiss button is clicked (default: an empty function).
show (bool): Controls whether the banner is visible (default: true).
variant (string): The color variant of the banner, can be one of 'primary', 'secondary', 'success', 'danger', 'warning', 'info', 'light', 'dark', 'red', 'green', 'blue', 'yellow' (default: 'primary').
icon (string): A string representing the class name of an icon to display on the left side of the banner.
title (string): The title to be displayed in the banner.
description (string): A description text to be displayed alongside the title.
link (object): An optional link to display within the banner. The object should include:
- url (string): The URL for the link.
- label (string): The text to display for the link. className (string): Additional class names to be added to the banner.

Example:

<Banner
  show={true}
  variant="danger"
  icon="alert-icon"
  title="Error"
  description="Something went wrong."
  link={{ url: '/help', label: 'Get Help' }}
  dismissible
  onDismiss={() => alert('Banner dismissed')}
/>

In this example, the banner is displayed with a danger variant, an icon, a title, a description, and a dismiss button. The user can click the dismiss button to hide the banner.

Banner​

Banner