Banner

A Banner shows an important message with optional actions. It appears below the top app bar and requires user dismissal.

Source Code

uikit-react-core

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.

If you want to show a close button, you’ll need to pass a function to the onClose prop.

This could be a one-line message text string with two actions on a tablet or on a desktop. This could be a two-lines message text string with two actions on a tablet or on a desktop. However, this is actually a three-lines message text string with two actions on a tablet or on a desktop.

<HvBanner
  open
  offset={0}
  label="This could be a one-line message text string with two actions on a tablet or on a desktop. This could be a two-lines message text string with two actions on a tablet or on a desktop. However, this is actually a three-lines message text string with two actions on a tablet or on a desktop."
  showIcon
  className="relative"
  actions={[
    { id: "action_1", label: "Action 1", disabled: false },
    { id: "action_2", label: "Action 2", disabled: false },
  ]}
  variant="info"
  onAction={(event, action) => console.log("Clicked", action)}
  onClose={() => alert("Banner closed")}
/>

<HvBanner
  open
  offset={0}
  label="This could be a one-line message text string with two actions on a tablet or on a desktop. This could be a two-lines message text string with two actions on a tablet or on a desktop. However, this is actually a three-lines message text string with two actions on a tablet or on a desktop."
  showIcon
  className="relative"
  actions={[
    { id: "action_1", label: "Action 1", disabled: false },
    { id: "action_2", label: "Action 2", disabled: false },
  ]}
  variant="info"
  onAction={(event, action) => console.log("Clicked", action)}
  onClose={() => alert("Banner closed")}
/>

By default, the actions will be placed inline with the banner content. You can change this behavior by using the actionsPosition prop.

<HvBanner
  open
  offset={0}
  label="This could be a one-line message text string with two actions on a tablet or on a desktop. This could be a two-lines message text string with two actions on a tablet or on a desktop. However, this is actually a three-lines message text string with two actions on a tablet or on a desktop."
  showIcon
  className="relative"
  actions={[
    { id: "action_1", label: "Action 1", disabled: false },
    { id: "action_2", label: "Action 2", disabled: false },
  ]}
  variant="info"
  onAction={(event, action) => console.log("Clicked", action)}
  onClose={() => alert("Banner closed")}
  actionsPosition="bottom-right"
/>

<HvBanner
  open
  offset={0}
  label="This could be a one-line message text string with two actions on a tablet or on a desktop. This could be a two-lines message text string with two actions on a tablet or on a desktop. However, this is actually a three-lines message text string with two actions on a tablet or on a desktop."
  showIcon
  className="relative"
  actions={[
    { id: "action_1", label: "Action 1", disabled: false },
    { id: "action_2", label: "Action 2", disabled: false },
  ]}
  variant="info"
  onAction={(event, action) => console.log("Clicked", action)}
  onClose={() => alert("Banner closed")}
  actionsPosition="bottom-right"
/>

You can also pass custom action components, instead of the actions prop. In this case the onAction prop will not be called when an action is clicked, so you’ll need to handle the click events yourself.

<HvBanner
  open
  size="large"
  offset={0}
  label="This could be a one-line message text string with two actions on a tablet or on a desktop. This could be a two-lines message text string with two actions on a tablet or on a desktop. However, this is actually a three-lines message text string with two actions on a tablet or on a desktop."
  showIcon
  className="relative"
  actions={
    <div className="flex gap-xxs self-end">
      <HvButton variant="secondaryGhost" color="inherit">
        Read More
      </HvButton>
      <HvButton
        variant="secondarySubtle"
        color="inherit"
        startIcon={
          <HvIconContainer>
            <div className="i-ph-check" />
          </HvIconContainer>
        }
      >
        Accept
      </HvButton>
    </div>
  }
  variant="info"
  onAction={(event, action) => console.log("Clicked", action)}
  onClose={() => alert("Banner closed")}
  bannerContentProps={{
    classes: {
      root: "gap-0",
      message: "flex-col items-start",
      iconContainer: "absolute",
      messageContainer: "text-wrap ml-56px",
      action: "pl-0",
    },
  }}
/>

<HvBanner
  open
  size="large"
  offset={0}
  label="This could be a one-line message text string with two actions on a tablet or on a desktop. This could be a two-lines message text string with two actions on a tablet or on a desktop. However, this is actually a three-lines message text string with two actions on a tablet or on a desktop."
  showIcon
  className="relative"
  actions={
    <div className="flex gap-xxs self-end">
      <HvButton variant="secondaryGhost" color="inherit">
        Read More
      </HvButton>
      <HvButton
        variant="secondarySubtle"
        color="inherit"
        startIcon={
          <HvIconContainer>
            <div className="i-ph-check" />
          </HvIconContainer>
        }
      >
        Accept
      </HvButton>
    </div>
  }
  variant="info"
  onAction={(event, action) => console.log("Clicked", action)}
  onClose={() => alert("Banner closed")}
  bannerContentProps={{
    classes: {
      root: "gap-0",
      message: "flex-col items-start",
      iconContainer: "absolute",
      messageContainer: "text-wrap ml-56px",
      action: "pl-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."
  className="relative"
  customIcon={<LightOn />}
/>

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

Controlled

Controlled banner. Click the buttons to display different banners.

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

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

Showing a banner inline with content

The HvBanner component is typically used as a global banner with a fixed position and transition. But you can also use it inline with other content by using the HvBannerContent component directly. You may also want to use the banner contained on the top of a section. While the component itself doesn’t support it out of the box, you can achieve this effect by customizing the styles a bit. The example below shows illustrates both use cases.

Opps, something went wrong!

Target status

You need to select a target status before you can proceed.

Assign to

<div className="w-full h-fit border-1 border-borderSubtle bg-bgContainer">
  <HvBannerContent
    variant="error"
    showIcon
    actions={
      <HvButton color="negative" startIcon={<div className="i-ph-wrench" />}>
        Fix
      </HvButton>
    }
    className="outline-none rounded-0 border-b [border-bottom-color:var(--icolor,currentColor)]"
  >
    Opps, something went wrong!
  </HvBannerContent>
  <div className="p-sm flex flex-col gap-sm">
    <HvSelect label="Target status" />
    <HvBannerContent variant="warning" showIcon>
      You need to select a target status before you can proceed.
    </HvBannerContent>
    <HvInput
      placeholder="Please select the assignees..."
      label="Assign to"
      className="mb-sm"
    />
  </div>
</div>

<div className="w-full h-fit border-1 border-borderSubtle bg-bgContainer">
  <HvBannerContent
    variant="error"
    showIcon
    actions={
      <HvButton color="negative" startIcon={<div className="i-ph-wrench" />}>
        Fix
      </HvButton>
    }
    className="outline-none rounded-0 border-b [border-bottom-color:var(--icolor,currentColor)]"
  >
    Opps, something went wrong!
  </HvBannerContent>
  <div className="p-sm flex flex-col gap-sm">
    <HvSelect label="Target status" />
    <HvBannerContent variant="warning" showIcon>
      You need to select a target status before you can proceed.
    </HvBannerContent>
    <HvInput
      placeholder="Please select the assignees..."
      label="Assign to"
      className="mb-sm"
    />
  </div>
</div>