OTTODesign System

Components

Badge

The badge is a visual component that indicates a status or count.

Configurator

LiveBadge: variant, size, number or icon
3
HTML
<oc-badge-v2 variant="primary">3</oc-badge-v2>

Usage

Anatomy

1 1 2
  1. Badge (number, icon or dot)
  2. Parent element it belongs to
LiveAnatomy
HTML
<div class="anatomy" style="margin:40px 80px">
<span style="position:relative;display:inline-block;padding:8px 12px 0 0;zoom:2.5"><oc-icon-v1 type="basket" size="100" style="color:var(--oc-semantic-color-text-secondary, #6d6d6d)"></oc-icon-v1><oc-badge-v2 variant="primary" style="position:absolute;top:0;left:14px">1</oc-badge-v2></span>
<span class="anatomy-pin" style="left:100%;top:8%">1</span>
<span class="anatomy-pin" style="left:-25%;top:70%">2</span>
<ol class="anatomy-key"><li data-n="1">Badge (number, icon or dot)</li><li data-n="2">Parent element it belongs to</li></ol>

Variants

The badge is available in the following variants. Each variant is available with text and icon content. You can freely choose any icon in size 50.

primary

1

secondary

1

error

1

warning

1

success

1

hint

1

info

1
Livevariants
HTML
<div class="on-frame" style="margin:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(5.25rem,1fr));gap:8px">
<p class="demo-label">primary</p><div class="demo-row gap-8"><oc-badge-v2 variant="primary">1</oc-badge-v2><oc-badge-v2 variant="primary" icon="smiley-positive"></oc-badge-v2></div></div>
<p class="demo-label">secondary</p><div class="demo-row gap-8"><oc-badge-v2 variant="secondary">1</oc-badge-v2><oc-badge-v2 variant="secondary" icon="smiley-positive"></oc-badge-v2></div></div>
<p class="demo-label">error</p><div class="demo-row gap-8"><oc-badge-v2 variant="error">1</oc-badge-v2><oc-badge-v2 variant="error" icon="error-hint"></oc-badge-v2></div></div>
<p class="demo-label">warning</p><div class="demo-row gap-8"><oc-badge-v2 variant="warning">1</oc-badge-v2><oc-badge-v2 variant="warning" icon="warning-hint"></oc-badge-v2></div></div>
<p class="demo-label">success</p><div class="demo-row gap-8"><oc-badge-v2 variant="success">1</oc-badge-v2><oc-badge-v2 variant="success" icon="check"></oc-badge-v2></div></div>
<p class="demo-label">hint</p><div class="demo-row gap-8"><oc-badge-v2 variant="hint">1</oc-badge-v2><oc-badge-v2 variant="hint" icon="question-hint"></oc-badge-v2></div></div>
<p class="demo-label">info</p><div class="demo-row gap-8"><oc-badge-v2 variant="info">1</oc-badge-v2><oc-badge-v2 variant="info" icon="info-hint"></oc-badge-v2></div></div>

All badges are available in size 100. For size 50, only the primary badge can be used. Size 50 does not contain content and is only used for indicating notifications.

Size 100: number or icon

1

Size 50: dot only

Liveprimary sizes 100 and 50
HTML
<div class="on-frame demo-grid cols-2" style="margin:0;gap:8px">
<p class="demo-label">Size 100: number or icon</p><div class="demo-row gap-8"><oc-badge-v2 size="100">1</oc-badge-v2><oc-badge-v2 size="100" icon="smiley-positive"></oc-badge-v2></div></div>
<p class="demo-label">Size 50: dot only</p><div class="demo-row gap-8" style="min-height:16px"><oc-badge-v2 size="50"></oc-badge-v2></div></div>

Behavior

Interaction

The badge itself is not interactive, but it can be included in the touch target of its parent element. Some other elements, like the basket button, can control the badge counter.

Before: the customer adds an item

In den Warenkorb 1

After: the badge counts up

In den Warenkorb 2
Liveinteraction
HTML
<div class="on-frame demo-grid cols-2" style="margin:0;gap:8px">
<p class="demo-label">Before: the customer adds an item</p>
<oc-button-v1 variant="primary" fit-content icon-type-left="basket" icon-type-right="arrow-right">In den Warenkorb</oc-button-v1>
<span style="position:relative;display:inline-block;padding:8px 12px 0 0"><oc-icon-v1 type="basket" style="color:var(--oc-semantic-color-text-secondary, #6d6d6d)"></oc-icon-v1><oc-badge-v2 style="position:absolute;top:0;left:14px">1</oc-badge-v2></span>
<p class="demo-label">After: the badge counts up</p>
<oc-button-v1 variant="primary" fit-content icon-type-left="basket">In den Warenkorb</oc-button-v1>
<span style="position:relative;display:inline-block;padding:8px 12px 0 0"><oc-icon-v1 type="basket" style="color:var(--oc-semantic-color-text-secondary, #6d6d6d)"></oc-icon-v1><oc-badge-v2 style="position:absolute;top:0;left:14px">2</oc-badge-v2></span>
1

The badge is not interactive; the touch target belongs to the parent element

Livetouch target
HTML
<span style="position:relative;display:inline-block;padding:8px 36px 12px;outline:1px dashed #f06;background:rgba(255,0,102,.12)"><oc-icon-v1 type="basket" style="color:var(--oc-semantic-color-text-secondary, #6d6d6d)"></oc-icon-v1><oc-badge-v2 style="position:absolute;top:2px;left:50px">1</oc-badge-v2></span>
<p class="demo-label" style="text-align:center;margin-top:12px">The badge is not interactive; the touch target belongs to the parent element</p>

Fitting

The badge uses a fixed height of 1rem. It uses fit-content for its width with a minimum width of 1rem.

Height 1 rem, width fits the content

123
Livefitting
HTML
<oc-badge-v2>123</oc-badge-v2>

You can limit the maximum number of the counter if you want. If you do, be sure to add a "+" after the last number.

Too long

12345

Capped

99+
Livemax. number
HTML
<div class="on-frame demo-grid cols-2" style="margin:0;gap:8px">
<p class="demo-label">Too long</p><oc-badge-v2>12345</oc-badge-v2></div>
<p class="demo-label">Capped</p><oc-badge-v2>99+</oc-badge-v2></div>

Placement

Place the badge within a parent element. Depending on your use case, position it either on top or inline.

On an icon: top right corner

1

Next to an icon

9+
Liveplacement on top and inline
HTML
<div class="on-frame demo-grid cols-2" style="margin:0;gap:8px;align-items:center">
<p class="demo-label">On an icon: top right corner</p>
<span style="position:relative;display:inline-block;padding:8px 12px 0 0"><oc-icon-v1 type="basket" style="color:var(--oc-semantic-color-text-secondary, #6d6d6d)"></oc-icon-v1><oc-badge-v2 style="position:absolute;top:0;left:14px">1</oc-badge-v2></span>
<p class="demo-label">Next to an icon</p>
<span style="display:inline-flex;align-items:center;gap:8px;background:var(--oc-semantic-color-background-canvas, #fff);border-radius:999px;padding:10px 16px"><oc-icon-v1 type="notification"></oc-icon-v1><oc-badge-v2>9+</oc-badge-v2></span>

Accessibility

For information on accessibility, refer to the technical documentation.

Status

Implementation

Live demo

Neue Nachrichten 5Bestellung zugestellt Zahlung offen
LiveReal OTTO components, rendered by the OTTO component runtime
HTML
<div style="background:var(--oc-semantic-color-background-canvas, #fff);border-bottom:1px solid rgba(0,0,0,.08);padding:12px 8px;display:flex;align-items:center;gap:16px;flex-wrap:wrap">
<img src="/otto-logo.svg" alt="OTTO" width="72" height="24" style="margin:0;height:24px;width:auto">
<div style="flex:1 1 12rem;min-width:10rem;background:#f0f0f0;border-radius:999px;padding:8px 16px;display:flex;align-items:center;gap:8px;font-size:0.875rem;color:var(--oc-semantic-color-text-secondary, #6d6d6d)"><oc-icon-v1 type="search"></oc-icon-v1>Wonach suchst du?</div>
<nav style="display:flex;gap:4px" aria-label="Kundenbereich"><a href="#" style="display:flex;flex-direction:column;align-items:center;gap:2px;color:inherit;text-decoration:none;font-size:0.75rem;line-height:1rem;min-width:56px"><span style="position:relative;display:inline-block;padding-right:10px;margin-left:10px"><oc-icon-v1 type="person"></oc-icon-v1></span>Mein Konto</a><a href="#" style="display:flex;flex-direction:column;align-items:center;gap:2px;color:inherit;text-decoration:none;font-size:0.75rem;line-height:1rem;min-width:56px"><span style="position:relative;display:inline-block;padding-right:10px;margin-left:10px"><oc-icon-v1 type="wishlist"></oc-icon-v1><oc-badge-v2 variant="primary" style="position:absolute;top:-4px;left:14px">3</oc-badge-v2></span>Merkzettel</a><a href="#" style="display:flex;flex-direction:column;align-items:center;gap:2px;color:inherit;text-decoration:none;font-size:0.75rem;line-height:1rem;min-width:56px"><span style="position:relative;display:inline-block;padding-right:10px;margin-left:10px"><oc-icon-v1 type="basket"></oc-icon-v1><oc-badge-v2 variant="primary" style="position:absolute;top:-4px;left:14px">2</oc-badge-v2></span>Warenkorb</a></nav>
<span class="demo-copy" style="display:inline-flex;align-items:center;gap:8px">Neue Nachrichten <oc-badge-v2 variant="primary">5</oc-badge-v2></span><span class="demo-copy" style="display:inline-flex;align-items:center;gap:8px">Bestellung zugestellt <oc-badge-v2 variant="success" icon="check"></oc-badge-v2></span><span class="demo-copy" style="display:inline-flex;align-items:center;gap:8px">Zahlung offen <oc-badge-v2 variant="warning" icon="warning-hint"></oc-badge-v2></span></div>

Code

Version Tag Status API
v2 <oc-badge-v2> Stable, allowed for generation BadgeV2
v1 <oc-badge-v1> Deprecated, NOT allowed for generation BadgeV1

Only the latest version (v2) is allowed for generation. Older versions are kept for reference and are deprecated.

Overview (v2)

Badge

The badge component is used to display a small amount of information, such as a status or count. It supports different styling variants and sizes. The Badge can be configured with text content and is typically used to visually highlight important information.

Default variation
HTML
<oc-badge-v2 size="100" variant="primary"></oc-badge-v2>
Configuration

The badge is available in the main styling variants primary, secondary, and success. 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 badge 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 Badge UX documentation for detailed user experience guidelines.

Accessibility

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

Configuration (v2)

Badge configuration

Configure the badge 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.

HTML
<oc-badge-v2 size="100" variant="primary"></oc-badge-v2>

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

Migration (v2)

Migration from Badge v1 to v2

The oc-badge component has been updated from oc-badge-v1 to oc-badge-v2. This migration guide provides step-by-step instructions to update your project to the latest version.

Skip to:

API changes
New attributes
Attribute Description Notes
icon Sets the displayed icon (replaces slot content) Only size 50 icons supported

The icon attribute allows you to display any icon in the badge. When set, the icon replaces the slot content.

HTML
<oc-badge-v2 variant="primary" icon="star"></oc-badge-v2>
<oc-badge-v2 variant="success" icon="check"></oc-badge-v2>
<oc-badge-v2 variant="error" icon="close"></oc-badge-v2>

Note: Only icons with size="50" are supported.

New variants
Variant Description Notes
warning Displays the badge in warning style New variant
error Displays the badge in error style New variant
hint Displays the badge in hint style New variant

The badge now supports three additional variants for different use cases:

<!-- Warning badge -->
<oc-badge-v2 variant="warning">!</oc-badge-v2>

<!-- Error badge -->
<oc-badge-v2 variant="error">3</oc-badge-v2>

<!-- Hint badge -->
<oc-badge-v2 variant="hint">i</oc-badge-v2>
Removed attributes

The success variant no longer automatically displays a check icon. Use the icon attribute explicitly instead.

v1 Behavior v2 Equivalent Notes
success variant auto-shows check icon Use icon="check" explicitly Changed behavior
How to migrate

The main change is that v2 introduces a new icon attribute for displaying icons and adds new variant options. The automatic check icon for the success variant has been removed in favor of explicit icon configuration.

Migrate a basic badge
<!-- From: -->
<oc-badge-v1 variant="primary">5</oc-badge-v1>

<!-- To: -->
<oc-badge-v2 variant="primary">5</oc-badge-v2>
Migrate a success badge with check icon

In v1, the success variant automatically displayed a check icon. In v2, you must explicitly set the icon attribute:

<!-- From: -->
<oc-badge-v1 variant="success"></oc-badge-v1>

<!-- To: -->
<oc-badge-v2 variant="success" icon="check"></oc-badge-v2>
Migrate a small badge (size 50)
<!-- From: -->
<oc-badge-v1 size="50"></oc-badge-v1>

<!-- To: -->
<oc-badge-v2 size="50"></oc-badge-v2>

API v1 (v1, deprecated, not for generation)

Badge v1 API

API: <oc-badge-v1> (BadgeV1)

The badge component is used to display a small amount of information, such as a status or count. It supports different styling variants and sizes. The badge can be configured with text content and is typically used to visually highlight important information.

Attributes / properties
Attribute Type Default Required Description
variant "primary" | "secondary" | "success" "primary" no Sets the main styling variant of the badge. This attribute only applies to variations with size=100.
size "50" | "100" "100" no Sets the size of the badge.
Slots
Slot Required Description
default yes Sets the text content of the badge. This slot only applies to variations with size=100.
Events
Event Detail type Description
oc-property-change OcBadgeV1Events["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.

API v2

Badge v2 API

API: <oc-badge-v2> (BadgeV2)

The badge component is used to display a small amount of information, such as a status or count. It supports different styling variants and sizes. The badge can be configured with text content and is typically used to visually highlight important information.

Attributes / properties
Attribute Type Default Required Description
variant "error" | "primary" | "secondary" | "success" | "warning" | "hint" | "info" "primary" no Sets the main styling variant of the badge. This attribute only applies to variations with size=100.
size "50" | "100" "100" no Sets the size of the badge.
icon icon name (428 values; see Icon list in `storybook/components/icon/README.md`) yes Sets the displayed icon. Find all available icons here.

Note: Only icons with size="50" are supported.
Slots
Slot Required Description
default yes Sets the text content of the badge. This slot only applies to variations with size=100.
Events
Event Detail type Description
oc-property-change OcBadgeV2Events["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 (v2)

Variations

Listed below are the most common variations of the badge 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.

Default

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

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

HTML
<oc-badge-v2 size="100" variant="primary"></oc-badge-v2>
Primary 100 with custom icon

Story: components-badge-variations--badge-100-primary-custom-icon · tags: components

The primary variant, with `size=100, and a custom icon.

Args: icon=smiley-positive

HTML
<oc-badge-v2 size="100" variant="primary" icon="smiley-positive"></oc-badge-v2>
Secondary 100

Story: components-badge-variations--badge-100-secondary · tags: components

The secondary variant, with size=100, and a different color for the badge.

Args: variant=secondary, defaultSlot=1

1
HTML
<oc-badge-v2 size="100" variant="secondary">1</oc-badge-v2>
Success 100

Story: components-badge-variations--badge-100-success · tags: components

The success variant, with size=100 and a different color for the badge.

Args: variant=success, icon=check

HTML
<oc-badge-v2 size="100" variant="success" icon="check"></oc-badge-v2>
Primary 50

Story: components-badge-variations--badge-50 · tags: components

The primary variant, with size=50, uses no text content.

Args: size=50

HTML
<oc-badge-v2 size="50" variant="primary"></oc-badge-v2>
Demo: semantic colors

Story: components-badge-variations--demo-badge-semantic-colors · tags: components

Args: size=100

Demo: badge semantic colors


Real Size

1 1 1 1 1 1 1

Zoomed in

1 1 1 1 1 1 1
HTML
<div>
<h1 class="oc-headline-200">Demo: badge semantic colors</h1>
<br />
<p class="oc-copy-100">Real Size</p>
<div style="display: flex; gap: 16px; align-items: center; flex-wrap: wrap;">
  <div>
    <oc-badge-v2 size="100" variant="primary" icon="smiley-positive"></oc-badge-v2>
    <oc-badge-v2 size="100" variant="secondary" icon="smiley-positive"></oc-badge-v2>
    <oc-badge-v2 size="100" variant="error" icon="error-hint"></oc-badge-v2>
    <oc-badge-v2 size="100" variant="warning" icon="warning-hint"></oc-badge-v2>
    <oc-badge-v2 size="100" variant="success" icon="check"></oc-badge-v2>
    <oc-badge-v2 size="100" variant="hint" icon="info-hint"></oc-badge-v2>
    <oc-badge-v2 size="100" variant="info" icon="info-hint"></oc-badge-v2>
  <div>
    <oc-badge-v2 size="100" variant="primary">1</oc-badge-v2>
    <oc-badge-v2 size="100" variant="secondary">1</oc-badge-v2>
    <oc-badge-v2 size="100" variant="error">1</oc-badge-v2>
    <oc-badge-v2 size="100" variant="warning">1</oc-badge-v2>
    <oc-badge-v2 size="100" variant="success">1</oc-badge-v2>
    <oc-badge-v2 size="100" variant="hint">1</oc-badge-v2>
    <oc-badge-v2 size="100" variant="info">1</oc-badge-v2>
<p class="oc-copy-100">Zoomed in</p>
<div
  style="display: flex; gap: 16px; align-items: center; flex-wrap: wrap; transform: scale(2); transform-origin: 0 0;"
>
  <div>
    <oc-badge-v2 size="100" variant="primary" icon="smiley-positive"></oc-badge-v2>
    <oc-badge-v2 size="100" variant="secondary" icon="smiley-positive"></oc-badge-v2>
    <oc-badge-v2 size="100" variant="error" icon="error-hint"></oc-badge-v2>
    <oc-badge-v2 size="100" variant="warning" icon="warning-hint"></oc-badge-v2>
    <oc-badge-v2 size="100" variant="success" icon="check"></oc-badge-v2>
    <oc-badge-v2 size="100" variant="hint" icon="info-hint"></oc-badge-v2>
    <oc-badge-v2 size="100" variant="info" icon="info-hint"></oc-badge-v2>
  <div>
    <oc-badge-v2 size="100" variant="primary">1</oc-badge-v2>
    <oc-badge-v2 size="100" variant="secondary">1</oc-badge-v2>
    <oc-badge-v2 size="100" variant="error">1</oc-badge-v2>
    <oc-badge-v2 size="100" variant="warning">1</oc-badge-v2>
    <oc-badge-v2 size="100" variant="success">1</oc-badge-v2>
    <oc-badge-v2 size="100" variant="hint">1</oc-badge-v2>
    <oc-badge-v2 size="100" variant="info">1</oc-badge-v2>
Story source (TypeScript, verbatim from Storybook)
{
  name: "Demo: semantic colors",
  argTypes: hideControlsBadge(Metadata),
  parameters: {
    chromatic: {
      disableSnapshot: false
    },
    controls: {
      disabled: true
    }
  },
  args: {
    size: "100"
  },
  render() {
    return html`
      <div>
        <h1 class="oc-headline-200">Demo: badge semantic colors</h1>
        <br />
        <p class="oc-copy-100">Real Size</p>
        <div style="display: flex; gap: 16px; align-items: center; flex-wrap: wrap;">
          <div>
            <oc-badge-v2 size="100" variant="primary" icon="smiley-positive"></oc-badge-v2>
            <oc-badge-v2 size="100" variant="secondary" icon="smiley-positive"></oc-badge-v2>
            <oc-badge-v2 size="100" variant="error" icon="error-hint"></oc-badge-v2>
            <oc-badge-v2 size="100" variant="warning" icon="warning-hint"></oc-badge-v2>
            <oc-badge-v2 size="100" variant="success" icon="check"></oc-badge-v2>
            <oc-badge-v2 size="100" variant="hint" icon="info-hint"></oc-badge-v2>
            <oc-badge-v2 size="100" variant="info" icon="info-hint"></oc-badge-v2>
          </div>
          <div>
            <oc-badge-v2 size="100" variant="primary">1</oc-badge-v2>
            <oc-badge-v2 size="100" variant="secondary">1</oc-badge-v2>
            <oc-badge-v2 size="100" variant="error">1</oc-badge-v2>
            <oc-badge-v2 size="100" variant="warning">1</oc-badge-v2>
            <oc-badge-v2 size="100" variant="success">1</oc-badge-v2>
            <oc-badge-v2 size="100" variant="hint">1</oc-badge-v2>
            <oc-badge-v2 size="100" variant="info">1</oc-badge-v2>
          </div>
        </div>
        <p class="oc-copy-100">Zoomed in</p>
        <div
          style="display: flex; gap: 16px; align-items: center; flex-wrap: wrap; transform: scale(2); transform-origin: 0 0;"
        >
          <div>
            <oc-badge-v2 size="100" variant="primary" icon="smiley-positive"></oc-badge-v2>
            <oc-badge-v2 size="100" variant="secondary" icon="smiley-positive"></oc-badge-v2>
            <oc-badge-v2 size="100" variant="error" icon="error-hint"></oc-badge-v2>
            <oc-badge-v2 size="100" variant="warning" icon="warning-hint"></oc-badge-v2>
            <oc-badge-v2 size="100" variant="success" icon="check"></oc-badge-v2>
            <oc-badge-v2 size="100" variant="hint" icon="info-hint"></oc-badge-v2>
            <oc-badge-v2 size="100" variant="info" icon="info-hint"></oc-badge-v2>
          </div>
          <div>
            <oc-badge-v2 size="100" variant="primary">1</oc-badge-v2>
            <oc-badge-v2 size="100" variant="secondary">1</oc-badge-v2>
            <oc-badge-v2 size="100" variant="error">1</oc-badge-v2>
            <oc-badge-v2 size="100" variant="warning">1</oc-badge-v2>
            <oc-badge-v2 size="100" variant="success">1</oc-badge-v2>
            <oc-badge-v2 size="100" variant="hint">1</oc-badge-v2>
            <oc-badge-v2 size="100" variant="info">1</oc-badge-v2>
          </div>
        </div>
      </div>
    `;
  }
}
Demo: accessible badge

Story: components-badge-variations--demo-accessible-badge · tags: components

The primary variant, with size=50, uses no text content.

Args: size=100

<div lang="en">
  <h1 class="oc-headline-200">Demo: badge status</h1>
  <br />
  <p class="oc-copy-100">
    This is a demo for badge usage with "role=status". To test it, turn on a screen reader
    and click the "Zum Warenkorb hinzufügen" button. The badge will show the number of items
    in the cart.
    To provide more context for assistive technologies, a visually hidden text element is added to the badge.
    Thus the screen reader should announce "Artikel im Warenkorb (number of items)". 
  </p>
</div>
  </p>
</div>
  </p>
</div>
<div class="demo-container" lang="de">
  <div class="cart-container" role="status" lang="de" aria-atomic="true" aria-live="polite">
    <div class="cart-icon">
      <oc-icon-button-v3 icon="basket" oc-aria-label="Warenkorb"></oc-icon-button-v3>
      <oc-badge-v2
        size="100"
        variant="primary"
        class="badge"
        id="cart-badge"
        >0</oc-badge-v2
      >
      <span class="oc-visually-hidden">Artikel im</span>
    </div>
    <span class="oc-copy-75">Warenkorb</span>
  </div>
  <oc-button-v1 variant="secondary" size="50" type="button" id="add-item-button"
    >Zum Warenkorb hinzufügen</oc-button-v1
  >
</div>

<style>
  .demo-container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }

  .cart-container {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
  }

  .cart-icon {
    position: relative;
  }

  .badge {
    position: absolute;
    top: 18px;
    right: -5px;
  }
</style>
<script>
  (() => {
    let items = 0;
    const addItemButton = document.getElementById("add-item-button");
    addItemButton.addEventListener("click", addItem);

    function addItem() {
      items += 1;
      document.getElementById("cart-badge").innerHTML = items;
    }
  })();
</script>
Story source (TypeScript, verbatim from Storybook)
{
  name: "Demo: accessible badge",
  parameters: {
    controls: {
      disabled: true
    }
  },
  argTypes: hideControlsBadge(Metadata),
  args: {
    size: "100"
  },
  render() {
    return html`
      <div lang="en">
        <h1 class="oc-headline-200">Demo: badge status</h1>
        <br />
        <p class="oc-copy-100">
          This is a demo for badge usage with "role=status". To test it, turn on a screen reader
          and click the "Zum Warenkorb hinzufügen" button. The badge will show the number of items
          in the cart.
          To provide more context for assistive technologies, a visually hidden text element is added to the badge.
          Thus the screen reader should announce "Artikel im Warenkorb (number of items)". 
        </p>
      </div>
        </p>
      </div>
        </p>
      </div>
      <div class="demo-container" lang="de">
        <div class="cart-container" role="status" lang="de" aria-atomic="true" aria-live="polite">
          <div class="cart-icon">
            <oc-icon-button-v3 icon="basket" oc-aria-label="Warenkorb"></oc-icon-button-v3>
            <oc-badge-v2
              size="100"
              variant="primary"
              class="badge"
              id="cart-badge"
              >0</oc-badge-v2
            >
            <span class="oc-visually-hidden">Artikel im</span>
          </div>
          <span class="oc-copy-75">Warenkorb</span>
        </div>
        <oc-button-v1 variant="secondary" size="50" type="button" id="add-item-button"
          >Zum Warenkorb hinzufügen</oc-button-v1
        >
      </div>

      <style>
        .demo-container {
          display: flex;
          flex-direction: column;
          align-items: flex-start;
          gap: 16px;
        }

        .cart-container {
          display: inline-flex;
          flex-direction: column;
          align-items: center;
        }

        .cart-icon {
          position: relative;
        }

        .badge {
          position: absolute;
          top: 18px;
          right: -5px;
        }
      </style>
      <script>
        (() => {
          let items = 0;
          const addItemButton = document.getElementById("add-item-button");
          addItemButton.addEventListener("click", addItem);

          function addItem() {
            items += 1;
            document.getElementById("cart-badge").innerHTML = items;
          }
        })();
      </script>
    `;
  }
}

V1 (v1, deprecated, not for generation)

Badge

Important

This is a deprecated version of the badge component. For the latest version, see the updated component documentation. Refer to this migration guide to update your project to the latest version.

The badge component is used to display a small amount of information, such as a status or count. It supports different styling variants and sizes. The Badge can be configured with text content and is typically used to visually highlight important information.

Default variation
<oc-badge-v1 size="100" variant="primary"></oc-badge-v1>
Configuration

The badge is available in the main styling variants primary, secondary, and success. 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 badge 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 Badge UX documentation for detailed user experience guidelines.

Accessibility

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

V1/Configuration (v1, deprecated, not for generation)

Badge configuration

Configure the badge 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.

<oc-badge-v1 size="100" variant="primary"></oc-badge-v1>

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

V1/Variations (v1, deprecated, not for generation)

Variations

Listed below are the most common variations of the badge 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.

Default

Story: components-badge-v1-variations--default · tags: components

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

<oc-badge-v1 size="100" variant="primary"></oc-badge-v1>
Secondary 100

Story: components-badge-v1-variations--badge-100-secondary · tags: components

The secondary variant, with size=100, and a different color for the badge.

Args: variant=secondary, defaultSlot=1

<oc-badge-v1 size="100" variant="secondary">1</oc-badge-v1>
Success 100

Story: components-badge-v1-variations--badge-100-success · tags: components

The success variant, with size=100 and a different color for the badge.

Args: variant=success, defaultSlot=``

<oc-badge-v1 size="100" variant="success"></oc-badge-v1>
Primary 50

Story: components-badge-v1-variations--badge-50 · tags: components

The primary variant, with size=50, uses no text content.

Args: size=50

<oc-badge-v1 size="50" variant="primary"></oc-badge-v1>
Demo: accessible badge

Story: components-badge-v1-variations--demo-accessible-badge · tags: components

The primary variant, with size=50, uses no text content.

Args: size=100

<div lang="en">
  <h1 class="oc-headline-200">Demo: badge status</h1>
  <br />
  <p class="oc-copy-100">
    This is a demo for badge usage with "role=status". To test it, turn on a screen reader
    and click the "Zum Warenkorb hinzufügen" button. The badge will show the number of items
    in the cart.
    To provide more context for assistive technologies, a visually hidden text element is added to the badge.
    Thus the screen reader should announce "Artikel im Warenkorb (number of items)". 
  </p>
</div>
  </p>
</div>
  </p>
</div>
<div class="demo-container" lang="de">
  <div class="cart-container" role="status" lang="de" aria-atomic="true" aria-live="polite">
    <div class="cart-icon">
      <oc-icon-button-v3 icon="basket" oc-aria-label="Warenkorb"></oc-icon-button-v3>
      <oc-badge-v1
        size="100"
        variant="primary"
        class="badge"
        id="cart-badge"
        >0</oc-badge-v1
      >
      <span class="oc-visually-hidden">Artikel im</span>
    </div>
    <span class="oc-copy-75">Warenkorb</span>
  </div>
  <oc-button-v1 variant="secondary" size="50" type="button" id="add-item-button"
    >Zum Warenkorb hinzufügen</oc-button-v1
  >
</div>

<style>
  .demo-container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }

  .cart-container {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
  }

  .cart-icon {
    position: relative;
  }

  .badge {
    position: absolute;
    top: 18px;
    right: -5px;
  }
</style>
<script>
  (() => {
    let items = 0;
    const addItemButton = document.getElementById("add-item-button");
    addItemButton.addEventListener("click", addItem);

    function addItem() {
      items += 1;
      document.getElementById("cart-badge").innerHTML = items;
    }
  })();
</script>
Story source (TypeScript, verbatim from Storybook)
{
  name: "Demo: accessible badge",
  args: {
    size: "100"
  },
  render() {
    return html`
      <div lang="en">
        <h1 class="oc-headline-200">Demo: badge status</h1>
        <br />
        <p class="oc-copy-100">
          This is a demo for badge usage with "role=status". To test it, turn on a screen reader
          and click the "Zum Warenkorb hinzufügen" button. The badge will show the number of items
          in the cart.
          To provide more context for assistive technologies, a visually hidden text element is added to the badge.
          Thus the screen reader should announce "Artikel im Warenkorb (number of items)". 
        </p>
      </div>
        </p>
      </div>
        </p>
      </div>
      <div class="demo-container" lang="de">
        <div class="cart-container" role="status" lang="de" aria-atomic="true" aria-live="polite">
          <div class="cart-icon">
            <oc-icon-button-v3 icon="basket" oc-aria-label="Warenkorb"></oc-icon-button-v3>
            <oc-badge-v1
              size="100"
              variant="primary"
              class="badge"
              id="cart-badge"
              >0</oc-badge-v1
            >
            <span class="oc-visually-hidden">Artikel im</span>
          </div>
          <span class="oc-copy-75">Warenkorb</span>
        </div>
        <oc-button-v1 variant="secondary" size="50" type="button" id="add-item-button"
          >Zum Warenkorb hinzufügen</oc-button-v1
        >
      </div>

      <style>
        .demo-container {
          display: flex;
          flex-direction: column;
          align-items: flex-start;
          gap: 16px;
        }

        .cart-container {
          display: inline-flex;
          flex-direction: column;
          align-items: center;
        }

        .cart-icon {
          position: relative;
        }

        .badge {
          position: absolute;
          top: 18px;
          right: -5px;
        }
      </style>
      <script>
        (() => {
          let items = 0;
          const addItemButton = document.getElementById("add-item-button");
          addItemButton.addEventListener("click", addItem);

          function addItem() {
            items += 1;
            document.getElementById("cart-badge").innerHTML = items;
          }
        })();
      </script>
    `;
  }
}