OTTODesign System

Code

Banner

Storybook group: Components · Sidebar path: Components/Banner · Extracted 28.09.2026

Version Tag Status API
v1 <oc-banner-v1> Stable, allowed for generation BannerV1

Overview (v1)

Source: ./src/components/banner/v1/Overview.mdx

The banner component displays important messages, supports various styles, provides interactive links, and a custom event triggered on closure.

Default variation

Story Default:

<oc-banner-v1 size="100" variant="info">Lorem ipsum dolor sit amet</oc-banner-v1>

Configuration

The banner is available in the main styling variants error, hint, info, success, and warning. This component is configurable, allowing you to tailor its features and appearance to your specific needs. To explore all the available options and adjust the component, use the component configurator and see the changes affect the component in real-time.

Usage guidelines

Before integrating the banner component into your project, make sure you have correctly installed the OTTO components package. Look through the variations section for examples of possible component variations. Here, you can discover both common and specific variations that address different use cases.

Info

See the Banner UX documentation for detailed user experience guidelines.

Accessibility

The banner component comes with a set of built-in accessibility features to ensure a seamless experience for all users.

Icons

Icons in the banner component are purely decorative and do not contain any additional information. Thus, they are hidden from screen readers using the aria-hidden attribute.

Keyboard navigation

The banner component is designed to be accessible via keyboard navigation and allows for the following shortcuts:

Shortcut Description
Tab Focuses the actions and the close button of the banner.
Space / Enter on actions Opens the links set via the actions slots.
Space / Enter on close button Closes the banner.
Tabbing order

The tabbing order is set up to focus the links passed via the actions slot first, followed by the close button.

Configuration (v1)

Source: ./src/components/banner/v1/Configuration.mdx

Configure the banner component with the controls below and see the changes live in the preview canvas. Click the Show code button within the preview canvas to see the source code for the current component configuration.

Story Default:

<oc-banner-v1 size="100" variant="info">Lorem ipsum dolor sit amet</oc-banner-v1>

Interactive configurator (Storybook controls); every option is listed in the API section of this file.

API v1

Source: ./src/components/banner/v1/BannerV1.API.g.mdx

API: <oc-banner-v1> (BannerV1)

The Banner component displays important messages, supports various styles, provides interactive links, and a custom event triggered on closure.

Attributes / properties
Attribute Type Default Required Description
variant "error" | "success" | "warning" | "hint" | "info" "info" no Sets the main styling variant of the banner.
size "100" | "200" | "300" "100" no Sets the size of the banner.
headline string undefined no Sets the text content of the banner headline. This attribute only applies to banners with size="200" and size="300".
headline-level 1 | 2 | 3 | 4 | 5 | 6 undefined no If set, renders the headline content inside a heading tag with the specified level. This attribute only applies to banners with size="200" and size="300".

The heading level has no visual effect but provides semantic structure for screen readers. If not set, renders a div instead of a heading tag.
icon-type icon name (428 values; see Icon list in `storybook/components/icon/README.md`) undefined no Overrides the default icon of the banner.
hide-icon boolean false no Indicates whether the banner icon is hidden.
hide-close-button boolean false no Indicates whether the banner close button is hidden.
hidden boolean false no Indicates whether the banner is hidden.
Slots
Slot Required Description
default yes Sets the main text content of the banner.
actions no Holds the link components that provide interactions to the user.
Example:
<oc-link-v2 variant="underlined" href="#" slot="actions">Action 1</oc-link-v2>
Events
Event Detail type Description
oc-banner-close CustomEvent<Pick<Props, "hideCloseButton">> Closing a banner triggers the oc-banner-close event.
oc-close CustomEvent<Pick<Props, "hideCloseButton">> Closing a banner triggers the oc-close event.
oc-property-change OcBannerV1Events["oc-property-change"] Whenever a property value changes, this event triggers. Use this event to track all property changes within the component.

Refer to the Events documentation for more information.
oc-mount { component: string; } Fired when the component is mounted to the DOM. The event is fired when the onMount hook of the component is called by the runtime.
oc-unmount { component: string; } Fired when the component is unmounted from the DOM. The event is fired when the function returned by the onMount hook of the component is called by the runtime.

Variations (v1)

Source: ./src/components/banner/v1/Variations.mdx

Variations

Listed below are the most common variations of the banner component as well as specific component variations for different use cases.

To explore all the available options and adjust the component, use the component configurator and see the changes affect the component in real-time.

Default

Story: components-banner-variations--default · tags: components

The default configuration uses the info variant and size=100.

Args: size=100

<oc-banner-v1 size="100" variant="info">Lorem ipsum dolor sit amet</oc-banner-v1>

Story: components-banner-variations--banner-100 · tags: components

The info variant with size=100 and passed in action link (by slot).

Args: size=100, actionsSlot=<oc-link-v2 variant="underlined" href="#" slot="actions">Action 1</oc-link-v2>

<oc-banner-v1 size="100" variant="info">
  <oc-link-v2 variant="underlined" href="#" slot="actions">Action 1</oc-link-v2>
  Lorem ipsum dolor sit amet
</oc-banner-v1>

Info 200 with headline

Story: components-banner-variations--banner-200 · tags: components

The info variant with size=200 and passed in headline (by attribute).

Args: size=200, headline=Some Headline, actionsSlot=(see snippet)

<oc-banner-v1 size="200" variant="info" headline="Some Headline">
  <oc-link-v2 variant="underlined" href="#" slot="actions">Action 1</oc-link-v2>
    <oc-link-v2 variant="underlined-bold" href="#" slot="actions">Action 2</oc-link-v2>
  Lorem ipsum dolor sit amet
</oc-banner-v1>

Error 200 with headline as h Tag

Story: components-banner-variations--banner-200-as-h-tag · tags: components

Args: headline=I am an h tag, headline-level=3, size=200, variant=error, actionsSlot=(see snippet)

<oc-banner-v1 size="200" variant="error" headline="I am an h tag" headline-level="3">
  <oc-link-v2 variant="underlined" href="#" slot="actions">Action 1</oc-link-v2>
    <oc-link-v2 variant="underlined-bold" href="#" slot="actions">Action 2</oc-link-v2>
  Lorem ipsum dolor sit amet
</oc-banner-v1>

Info 300 with headline and multiple actions

Story: components-banner-variations--banner-300 · tags: components

The info variant with size=300 and passed in headline (by attribute) and multiple actions (by slots).

Args: size=300, headline=Some Headline, actionsSlot=(see snippet)

<oc-banner-v1 size="300" variant="info" headline="Some Headline">
  <oc-link-v2 variant="underlined" href="#" slot="actions">Action 1</oc-link-v2>
    <oc-link-v2 variant="underlined-bold" href="#" slot="actions">Action 2</oc-link-v2>
  Lorem ipsum dolor sit amet
</oc-banner-v1>

Demo: alert pattern

Story: components-banner-variations--demo-alert-pattern · tags: components

Demonstration of how to use role=alert with a banner.

Args: size=100, actionsSlot=<oc-link-v2 variant="underlined" href="#" slot="actions">Action 1</oc-link-v2>, defaultSlot=<strong>Warning:</strong> This is a demo of an accessible banner., variant=warning

<h1 class="oc-headline-200">Demo: alert pattern</h1>
<br />
<p class="oc-copy-100">
  This is a demo for a banner usage with "role=alert". <br />
  To test it, turn on a screen reader and click the "Trigger alert" button. The first
  announcement should be read out loud, followed by the second announcement (banner) that
  interrupts the first.
</p>
<div role="alert" id="alert-space"></div>
<oc-button-v1 variant="secondary" size="50" type="button" id="trigger-button" class="oc-p-100"
  >Trigger alert</oc-button-v1
>
<div aria-live="polite" id="first-announcement-text" class="oc-copy-100"></div>
<script>
  (() => {
    var firstAnnouncement =
      "This is the first announcement that will be interrupted by the second announcement (banner).";
    var firstAnnouncementDiv = document.querySelector("#first-announcement-text");

    const triggerButton = document.getElementById("trigger-button");
    triggerButton.addEventListener("click", handleTriggerAlert);

    function handleTriggerAlert() {
      firstAnnouncementDiv.innerText = firstAnnouncement;
      setTimeout(function () {
        const banner = document.createElement("oc-banner-v1");
        banner.setAttribute("variant", "warning");
        banner.setAttribute("size", "100");
        banner.innerHTML =
          "<strong>Warning:</strong>This is a second announcement and should interrupt the first.";

        const alertSpace = document.getElementById("alert-space");
        alertSpace.appendChild(banner);
      }, 1500);
    }
  })();
</script>
Story source (TypeScript, verbatim from Storybook)
{
  name: "Demo: alert pattern",
  args: {
    size: "100",
    actionsSlot: `<oc-link-v2 variant="underlined" href="#" slot="actions">Action 1</oc-link-v2>`,
    defaultSlot: `<strong>Warning:</strong> This is a demo of an accessible banner.`,
    variant: "warning"
  },
  render() {
    return html`
      <h1 class="oc-headline-200">Demo: alert pattern</h1>
      <br />
      <p class="oc-copy-100">
        This is a demo for a banner usage with "role=alert". <br />
        To test it, turn on a screen reader and click the "Trigger alert" button. The first
        announcement should be read out loud, followed by the second announcement (banner) that
        interrupts the first.
      </p>
      <div role="alert" id="alert-space"></div>
      <oc-button-v1 variant="secondary" size="50" type="button" id="trigger-button" class="oc-p-100"
        >Trigger alert</oc-button-v1
      >
      <div aria-live="polite" id="first-announcement-text" class="oc-copy-100"></div>
      <script>
        (() => {
          var firstAnnouncement =
            "This is the first announcement that will be interrupted by the second announcement (banner).";
          var firstAnnouncementDiv = document.querySelector("#first-announcement-text");

          const triggerButton = document.getElementById("trigger-button");
          triggerButton.addEventListener("click", handleTriggerAlert);

          function handleTriggerAlert() {
            firstAnnouncementDiv.innerText = firstAnnouncement;
            setTimeout(function () {
              const banner = document.createElement("oc-banner-v1");
              banner.setAttribute("variant", "warning");
              banner.setAttribute("size", "100");
              banner.innerHTML =
                "<strong>Warning:</strong>This is a second announcement and should interrupt the first.";

              const alertSpace = document.getElementById("alert-space");
              alertSpace.appendChild(banner);
            }, 1500);
          }
        })();
      </script>
    `;
  }
}

Interaction tests (BannerV1.interactions.stories.ts)

Interaction test stories (automated tests, not usage patterns).

Close Banner

Story: components-banner-interaction-tests--close-banner · tags: play-fn

Args: size=300, headline=Some Headline, defaultSlot=Lorem ipsum dolor sit amet, actionsSlot=<a slot="actions" target="_blank" href="#">Action 1</a>

Story source (TypeScript, verbatim from Storybook)
{
  args: {
    size: "300",
    headline: "Some Headline",
    defaultSlot: "Lorem ipsum dolor sit amet",
    actionsSlot: `<a slot="actions" target="_blank" href="#">Action 1</a>`
  },
  play: async ({
    canvasElement
  }) => {
    const bannerElement = canvasElement.getElementsByTagName("oc-banner-v1")[0]!;
    const closeButton = bannerElement.shadowRoot!.querySelector(".banner__close-button")!;
    await expect(bannerElement).toBeVisible();
    await userEvent.click(closeButton);
    await expect(bannerElement).not.toBeVisible();
  }
}