Banner

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

<HvBanner
  open
  offset={0}
  label="This is a banner with a custom icon."
  className="relative"
  customIcon={<LightOn />}
/>

import { useState } from "react";


export default function Demo() {
  return (
    <div className="flex gap-sm">
      <BannerButton variant="default" label="This is a banner." />
      <BannerButton variant="success" label="This is a success banner." />
      <BannerButton variant="warning" label="This is a warning banner." />
      <BannerButton variant="error" label="This is an error banner." />
    </div>
  );
}


const BannerButton = ({ variant, ...others }: Omit<HvBannerProps, "open">) => {
  const [open, setOpen] = useState(false);


  return (
    <>
      <HvButton
        onClick={() => setOpen(true)}
        variant={buttonVariantMap[variant]}
        className="capitalize w-120px"
      >
        {variant}
      </HvButton>
      <HvBanner
        open={open}
        onClose={() => setOpen(false)}
        offset={10}
        variant={variant}
        showIcon
        actions={
          <HvButton variant="ghost" color="inherit">
            Action
          </HvButton>
        }
        bannerContentProps={{
          actionProps: { "aria-label": "Close the banner" },
        }}
        {...others}
      />
    </>
  );
};


const buttonVariantMap = {
  default: "secondarySubtle",
  success: "positiveSubtle",
  warning: "warningSubtle",
  error: "negativeSubtle",
};