OTTODesign System

Code

Focused Dialog

Storybook group: Components · Sidebar path: Components/Focused Dialog · Extracted 28.09.2026

Version Tag Status API
v1 <oc-focused-dialog-v1> Stable, allowed for generation FocusedDialogV1

Overview (v1)

Source: ./src/components/focused-dialog/v1/Overview.mdx

Focused dialog

The Focused dialog component is a customizable dialog box designed for focused user interactions. It allows you to set a headline, define navigation URLs for closing and previous actions, and include custom content and buttons. The appearance of the dialog can be tailored with options for background color and padding.

Default variation

Story Default:

<oc-focused-dialog-v1 close-url="/close.html" headline="Headline">
  <div slot="actions">
          <oc-button-v1 variant="secondary" data-oc-focused-dialog-v1.prev-url href="cancel">Abbrechen</oc-button-v1>
          <oc-button-v1 data-oc-focused-dialog-v1.add-close-url href="next-dialog.html">OK, weiter</oc-button-v1>
          <style>
              /* example styles for buttons in actions slot */
              [slot="actions"] {
                  display: flex;
                  flex-wrap: wrap-reverse;
                  gap: 8px;
                  > oc-button-v1 {
                      flex: 1;
                      min-width: fit-content;
                  }
              }
          </style>
        </div>
  <oc-placeholder-v1></oc-placeholder-v1>
</oc-focused-dialog-v1>

Configuration

The focused dialog 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 focused dialog component into your project, make sure you have correctly installed the OTTO components package. Look through the variations page for examples of possible component variations. Here, you can discover both common and specific variations that address different use cases.

Info

See the Focused dialog UX documentation for detailed user experience guidelines.

The focused dialog needs the dialog siteframe.

Special app behavior

When the component is shown in the OTTO app, the title is not sticky. When the feature toggle oc_focused_dialog_v1_hide_prev_in_app is set to true, the "previous" button is hidden in the app. To test this behavior locally, set the app cookie in your browser document.cookie="app=true"; and ensure the feature toggle is set to true. If not, create a local overwrite in the UI.

If you add the <meta>element to the <head> with name apps-focused-layout-top-bar-visibility and content hidden to your markup, the top bar in the OTTO app will be hidden and the dialog's title is always shown with a sticky behavior.

## Advanced URL handling The focused dialog component allows you to define navigation URLs for the
"close" and "previous" actions via its attributes `close-url` and `prev-url`. These URLs are used to
navigate the user to the specified location when the dialog is closed or when the user clicks the
"previous" button. ### Use the current URL for the close or previous action To use the current URL
as the close or previous URL in a dialog, use the data attribute `data-oc-focused-dialog-v1` with
the suffixes `.add-close-url` for the close URL and `.add-prev-url` for the previous URL on the link
element that opens the dialog. > **Note** <br />
> The data attributes work with all components with the `href` attribute. #### Example Let's assume
your `window.location.href` is `https://www.otto.de/service/impressum/` and you have the following
link element with the data attribute `data-oc-focused-dialog-v1.add-close-url`: ```html
<!-- source code -->
<a
  href="https://www.otto.de/customer-identity/login?entryPoint=loginArea"
  data-oc-focused-dialog-v1.add-close-url
  >Open dialog</a
>

When this link is rendered on otto.de, the URL is extended with the GET parameter oc-focused-dialog-v1.close-url and the encoded value of the current URL https://www.otto.de/service/impressum/ resulting in:

<!-- rendered code -->
<a
  href="https://www.otto.de/customer-identity/login?entryPoint=loginArea&oc-focused-dialog-v1.close-url=https%3A%2F%2Fwww.otto.de%2Fservice%2Fimpressum%2F"
  >Open dialog</a
>

Once the link is clicked, the user is navigated to the specified URL with the open dialog. The dialog recognizes the GET parameter and automatically sets the URL of the close and cancel button to https://www.otto.de/service/impressum/. URLs passed in this way override the respective URLs of the next dialog that are set via attributes.

Pass URLs from one dialog to another

In advanced use cases, when for example one dialog opens another, the values of both attributes close-url and prev-url are not automatically transferred to the second dialog.

Let's assume you have two dialogs, dialog1.html and dialog2.html, and you want to pass the close URL of dialog1.html to dialog2.html.

The primary button in dialog1.html that opens dialog2.html:

<oc-button-v1 href="dialog2.html">Open dialog 2</oc-button-v1>

To pass the current close or previous URL of dialog1.html to dialog2.html, add the data attribute data-oc-focused-dialog-v1 with the suffixes .use-close-url for the close URL and .use-prev-url for the previous URL to the primary button in dialog1.html:

<!-- source code -->
<oc-button-v1 data-oc-focused-dialog-v1.use-close-url href="dialog2.html"
  >Open dialog 2</oc-button-v1
>

When the user clicks the button in dialog1.html, the close URL of dialog1.html is passed to dialog2.html and sets the close URL for the close and cancel button in dialog2.html. URLs passed in this way override the respective URL of the next dialog that's set via an attribute.

Pass URLs as query string

In scenarios where you need to pass URLs to the focused dialog component using a query string, use the GET parameters oc-focused-dialog-v1.close-url and oc-focused-dialog-v1.prev-url.

The following URL passes the close URL foo.html to the dialog's close action via the GET parameter oc-focused-dialog-v1.close-url, resulting in the dialog navigating the user to foo.html when closed:

https://www.otto.de/assets-static/components/demo/dialog.html?oc-focused-dialog-v1.close-url=foo.html

URLs passed via HTTP GET parameters override the respective URLs of the new dialog that are set via attributes.

Note

The deprecated URL parameters focussedDialogPrevUrl and focussedDialogCloseUrl are still supported for backward compatibility.

Accessibility

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

Configuration (v1)

Source: ./src/components/focused-dialog/v1/Configuration.mdx

Focused dialog configuration

Configure the focused dialog 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-focused-dialog-v1 close-url="/close.html" headline="Headline">
  <div slot="actions">
          <oc-button-v1 variant="secondary" data-oc-focused-dialog-v1.prev-url href="cancel">Abbrechen</oc-button-v1>
          <oc-button-v1 data-oc-focused-dialog-v1.add-close-url href="next-dialog.html">OK, weiter</oc-button-v1>
          <style>
              /* example styles for buttons in actions slot */
              [slot="actions"] {
                  display: flex;
                  flex-wrap: wrap-reverse;
                  gap: 8px;
                  > oc-button-v1 {
                      flex: 1;
                      min-width: fit-content;
                  }
              }
          </style>
        </div>
  <oc-placeholder-v1></oc-placeholder-v1>
</oc-focused-dialog-v1>

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

API v1

Source: ./src/components/focused-dialog/v1/FocusedDialogV1.API.g.mdx

Focused Dialog v1 API

API: <oc-focused-dialog-v1> (FocusedDialogV1)

The Focused dialog component is a customizable dialog box designed for focused user interactions. It allows you to set a headline, define navigation URLs for closing and previous actions, and include custom content and buttons. The appearance of the dialog can be tailored with options for background color and padding.

Attributes / properties
Attribute Type Default Required Description
headline string "" no Sets the title of the dialog.
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 has no effect if an external markup is used as headline.

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.
in-app boolean false no Changes the sticky behavior of the dialog's title.
show-back-button boolean false no If set to true, a back button is displayed in the dialog header. This button navigates according to history.back().
close-url string undefined no Sets the URL to navigate to when the dialog is closed. The GET parameter oc-focused-dialog-v1-close-url overrides this URL. Refer to the Advanced URL handling documentation for more information.
prev-url string undefined no Deprecated: The back button should use history.back() instead of navigating to a specific URL to keep user expectations intact. Use the showBackButton prop to enable the back button.

Sets the URL of the previous button. The GET parameter oc-focused-dialog-v1-prev-url overrides this URL. Refer to the Advanced URL handling documentation for more information.
Slots
Slot Required Description
headline yes Overrides the headline set via the headline attribute. Use this slot to pass in a headline with custom markup.
Example:
<div slot='headline'><code>My headline</code></div>
default yes Sets the main content of the dialog.
actions yes Holds the button components to provide interactions to the user.
Example:
<oc-button-v1 slot='actions'>Bestätigen</oc-button-v1>
Events
Event Detail type Description
oc-focused-dialog-close CustomEvent<{ destination: string; }> Closing a focused-dialog via oc-icon-button triggers the oc-focused-dialog-close event.
oc-property-change OcFocusedDialogV1Events["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.
CSS custom properties
Custom property Default Description
--component-background-color --oc-semantic-color-frame-background Sets a custom background color for the component through a CSS variable. Note: The preferred way of using colors is via Design Tokens instead of hex values.
--content-background-color white Sets a custom background color for the content area through a CSS variable. Note: The preferred way of using colors is via Design Tokens instead of hex values.
--content-padding 16px Sets padding for the content area.

Variations (v1)

Source: ./src/components/focused-dialog/v1/Variations.mdx

Variations

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

You can explore all available options using the component configurator, adjust the component to your needs, and see the changes live in a preview canvas.

Custom headline style

Story: components-focused-dialog-variations--custom-headline-style · tags: components

Variation that uses custom markup within the headline slot to display a headline with custom styling.

Args: close-url=/close.html, headlineSlot=<code slot='headline'>headline with custom markup</code>, defaultSlot=<oc-placeholder-v1></oc-placeholder-v1>

<oc-focused-dialog-v1 close-url="/close.html">
  <code slot='headline'>headline with custom markup</code>
  <oc-placeholder-v1></oc-placeholder-v1>
</oc-focused-dialog-v1>

Default

Story: components-focused-dialog-variations--default · tags: components

The default configuration uses a placeholder in the default slot, two oc-button components in the actions slot and the headline attribute.

Args: close-url=/close.html, headline=Headline, defaultSlot=<oc-placeholder-v1></oc-placeholder-v1>, actionsSlot=(see snippet)

<oc-focused-dialog-v1 close-url="/close.html" headline="Headline">
  <div slot="actions">
          <oc-button-v1 variant="secondary" data-oc-focused-dialog-v1.prev-url href="cancel">Abbrechen</oc-button-v1>
          <oc-button-v1 data-oc-focused-dialog-v1.add-close-url href="next-dialog.html">OK, weiter</oc-button-v1>
          <style>
              /* example styles for buttons in actions slot */
              [slot="actions"] {
                  display: flex;
                  flex-wrap: wrap-reverse;
                  gap: 8px;
                  > oc-button-v1 {
                      flex: 1;
                      min-width: fit-content;
                  }
              }
          </style>
        </div>
  <oc-placeholder-v1></oc-placeholder-v1>
</oc-focused-dialog-v1>
Story source (TypeScript, verbatim from Storybook)
{
  name: "Default",
  args: {
    "close-url": "/close.html",
    headline: "Headline",
    defaultSlot: "<oc-placeholder-v1></oc-placeholder-v1>",
    actionsSlot: `<div slot="actions">
        <oc-button-v1 variant="secondary" data-oc-focused-dialog-v1.prev-url href="cancel">Abbrechen</oc-button-v1>
        <oc-button-v1 data-oc-focused-dialog-v1.add-close-url href="next-dialog.html">OK, weiter</oc-button-v1>
        <style>
            /* example styles for buttons in actions slot */
            [slot="actions"] {
                display: flex;
                flex-wrap: wrap-reverse;
                gap: 8px;
                > oc-button-v1 {
                    flex: 1;
                    min-width: fit-content;
                }
            }
        </style>
      </div>`
  }
}

Automatic Close URL

Story: components-focused-dialog-variations--auto-close-url · tags: components

The default configuration uses a placeholder in the default slot, two oc-button components in the actions slot and the headline attribute.

Args: close-url=/close.html, headline=Headline, defaultSlot=<oc-placeholder-v1></oc-placeholder-v1>, actionsSlot=(see snippet)

<oc-focused-dialog-v1 close-url="/close.html" headline="Headline">
  <div slot="actions">
          <oc-button-v1 variant="secondary" data-oc-focused-dialog-v1.close-url href="cancel">Abbrechen</oc-button-v1>
          <oc-button-v1 data-oc-focused-dialog-v1.add-close-url href="next-dialog.html">OK, weiter</oc-button-v1>
          <style>
              /* example styles for buttons in actions slot */
              [slot="actions"] {
                  display: flex;
                  flex-wrap: wrap-reverse;
                  gap: 8px;
                  > oc-button-v1 {
                      flex: 1;
                      min-width: fit-content;
                  }
              }
          </style>
        </div>
  <oc-placeholder-v1></oc-placeholder-v1>
</oc-focused-dialog-v1>
Story source (TypeScript, verbatim from Storybook)
{
  name: "Automatic Close URL",
  args: {
    "close-url": "/close.html",
    headline: "Headline",
    defaultSlot: "<oc-placeholder-v1></oc-placeholder-v1>",
    actionsSlot: `<div slot="actions">
        <oc-button-v1 variant="secondary" data-oc-focused-dialog-v1.close-url href="cancel">Abbrechen</oc-button-v1>
        <oc-button-v1 data-oc-focused-dialog-v1.add-close-url href="next-dialog.html">OK, weiter</oc-button-v1>
        <style>
            /* example styles for buttons in actions slot */
            [slot="actions"] {
                display: flex;
                flex-wrap: wrap-reverse;
                gap: 8px;
                > oc-button-v1 {
                    flex: 1;
                    min-width: fit-content;
                }
            }
        </style>
      </div>`
  }
}

Interaction tests (FocusedDialogV1.interactions.stories.ts)

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

Sticky

Story: components-focused-dialog-interaction-tests--sticky · tags: play-fn

Story source (TypeScript, verbatim from Storybook)
{
  args: {},
  play: async ({
    canvasElement
  }) => {
    const ocFocusedDialogElement = canvasElement.getElementsByTagName("oc-focused-dialog-v1").item(0)!;
    await waitFor("Prev url to be applied", async () => {
      await expect(ocFocusedDialogElement.querySelector("a[href]")!.getAttribute("href")).toBe("foo.html");
    });
  }
}