Banner

A Banner displays an important and succinct message. It can also provide actions for the user to address, or dismiss. It requires a user action, for it to be dismissed. Banners should appear at the top of the screen, below a top app bar.

Usage

import { HvBanner } from "@hitachivantara/uikit-react-core";

Source

View Source Code

Package

@hitachivantara/uikit-react-core

This is an informational message.

nothing to show...

variant

showIcon

<HvBanner label="This is an informational message." variant="default" showIcon open />

<HvBanner label="This is an informational message." variant="default" showIcon open />

Actions

You can add a set of actions to the banner by specifying the actions prop. The onAction prop is a callback function that is called when an action is clicked.

This is a banner.

<HvBanner
  open
  offset={0}
  label="This is a banner."
  showIcon
  actions={[
    { id: "action_1", label: "Action 1", disabled: false },
    { id: "action_2", label: "Action 2", disabled: false },
  ]}
  onAction={(event, action) => console.log("Clicked", action)}
  style={{ position: "relative", top: 0 }}
/>

<HvBanner
  open
  offset={0}
  label="This is a banner."
  showIcon
  actions={[
    { id: "action_1", label: "Action 1", disabled: false },
    { id: "action_2", label: "Action 2", disabled: false },
  ]}
  onAction={(event, action) => console.log("Clicked", action)}
  style={{ position: "relative", top: 0 }}
/>

Custom icons

You can pass a custom icon to the banner by using the customIcon prop.

This is a banner with a custom icon.

<HvBanner
  open
  offset={0}
  label="This is a banner with a custom icon."
  customIcon={<LightOn color="base_dark" />}
  style={{ position: "relative", top: 0 }}
/>

<HvBanner
  open
  offset={0}
  label="This is a banner with a custom icon."
  customIcon={<LightOn color="base_dark" />}
  style={{ position: "relative", top: 0 }}
/>

Controlled

Controlled banner. Click the buttons to display different banners.

import { useState } from "react";


export default function Demo() {
  const SimpleBanner = ({
      variant,
      ...others
    }: Omit<HvBannerProps, "open">) => {
      const [open, setOpen] = useState(false);


      return (
        <>
          <HvButton
            onClick={() => setOpen(true)}
            color="primary"
            style={{ width: "150px", textTransform: "capitalize", margin: 10 }}
          >
            {variant}
          </HvButton>
          <HvBanner
            open={open}
            onClose={() => setOpen(false)}
            offset={10}
            variant={variant}
            showIcon
            actions={
              <HvButton variant="secondaryGhost" style={{ color: "inherit" }}>
                Action
              </HvButton>
            }
            bannerContentProps={{
              actionProps: { "aria-label": "Close the banner" },
            }}
            {...others}
          />
        </>
      );
    };


    return (
      <>
        <SimpleBanner variant="default" label="This is a banner." />
        <SimpleBanner variant="success" label="This is a success banner." />
        <SimpleBanner variant="error" label="This is an error banner." />
      </>
    );


}

import { useState } from "react";

export default function Demo() {
  const SimpleBanner = ({
      variant,
      ...others
    }: Omit<HvBannerProps, "open">) => {
      const [open, setOpen] = useState(false);

      return (
        <>
          <HvButton
            onClick={() => setOpen(true)}
            color="primary"
            style={{ width: "150px", textTransform: "capitalize", margin: 10 }}
          >
            {variant}
          </HvButton>
          <HvBanner
            open={open}
            onClose={() => setOpen(false)}
            offset={10}
            variant={variant}
            showIcon
            actions={
              <HvButton variant="secondaryGhost" style={{ color: "inherit" }}>
                Action
              </HvButton>
            }
            bannerContentProps={{
              actionProps: { "aria-label": "Close the banner" },
            }}
            {...others}
          />
        </>
      );
    };

    return (
      <>
        <SimpleBanner variant="default" label="This is a banner." />
        <SimpleBanner variant="success" label="This is a success banner." />
        <SimpleBanner variant="error" label="This is an error banner." />
      </>
    );

}

Badge Button