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.

Source Code

uikit-react-core

This is an informational message.

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";


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}
      />
    </>
  );
};


export default function Demo() {
  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";

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}
      />
    </>
  );
};

export default function Demo() {
  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