Badge

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)

Source: ./src/components/badge/v2/Overview.mdx

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

Story Default:

<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)

Source: ./src/components/badge/v2/Configuration.mdx

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.

Story Default:

<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)

Source: ./src/components/badge/v2/Migration.mdx

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
How to migrate

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.

<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)

Source: ./src/components/badge/v1/BadgeV1.API.g.mdx

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

Source: ./src/components/badge/v2/BadgeV2.API.g.mdx

Badge v2 API

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

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)

Source: ./src/components/badge/v2/Variations.mdx

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.

<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

<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

<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

<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

<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

<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>

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)

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

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.

Default variation

Story Default:

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

Configuration

Usage guidelines

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)

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

Badge configuration

Story Default:

<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)

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

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>
    `;
  }
}

Overview (v2)

Badge

Default variation

Configuration

Usage guidelines

Accessibility

Configuration (v2)

Badge configuration

Migration (v2)

Migration from Badge v1 to v2

API changes

New attributes

New variants

Removed attributes

How to migrate

Migrate a basic badge

Migrate a success badge with check icon

Migrate a small badge (size 50)

API v1 (v1, deprecated, not for generation)

Badge v1 API

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

Attributes / properties

Slots

Events

API v2

Badge v2 API

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

Attributes / properties

Slots

Events

Variations (v2)

Variations

Default

Primary 100 with custom icon

Secondary 100

Success 100

Primary 50

Demo: semantic colors

Demo: accessible badge

V1 (v1, deprecated, not for generation)

Badge

Default variation

Configuration

Usage guidelines

Accessibility

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

Badge configuration

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

Variations

Default

Secondary 100

Success 100

Primary 50

Demo: accessible badge

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

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