feat(badge): add badge component IX-3943

.changeset/ix-3943-badge.md

@@ -0,0 +1,8 @@
+---
+'@siemens/ix': minor
+'@siemens/ix-angular': minor
+'@siemens/ix-react': minor
+'@siemens/ix-vue': minor
+---
+
+Introduces `ix-badge` for overlay count and status indicators on anchors or as standalone badges, with semantic variants, outline mode, position/offset, optional attention animation, and standalone `tooltipText` support.

packages/angular-standalone-test-app/src/app/app.routes.ts

@@ -52,6 +52,16 @@ export const routePaths: IxPreviewRoutes = {
     import('../preview-examples/avatar-image').then((m) => m.default),
   'preview/avatar-initials': () =>
     import('../preview-examples/avatar-initials').then((m) => m.default),
+  'preview/badge': () =>
+    import('../preview-examples/badge').then((m) => m.default),
+  'preview/badge-counter': () =>
+    import('../preview-examples/badge-counter').then((m) => m.default),
+  'preview/badge-dot': () =>
+    import('../preview-examples/badge-dot').then((m) => m.default),
+  'preview/badge-label': () =>
+    import('../preview-examples/badge-label').then((m) => m.default),
+  'preview/badge-status-icon': () =>
+    import('../preview-examples/badge-status-icon').then((m) => m.default),
   'preview/blind': () =>
     import('../preview-examples/blind').then((m) => m.default),
   'preview/blind-header-actions': () =>

packages/angular-standalone-test-app/src/preview-examples/badge-counter.css

@@ -0,0 +1,19 @@
+/*
+ * SPDX-FileCopyrightText: 2026 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+.container {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  column-gap: 2rem;
+  row-gap: 1.5rem;
+  align-items: center;
+  /* Room for attached overlays and pulse rings above the content. */
+  padding-top: 1rem;
+}
+

packages/angular-standalone-test-app/src/preview-examples/badge-counter.ts

@@ -0,0 +1,62 @@
+/*
+ * SPDX-FileCopyrightText: 2026 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { Component } from '@angular/core';
+import { IxBadge } from '@siemens/ix-angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  imports: [IxBadge],
+  styleUrls: ['./badge-counter.css'],
+  template: `
+    <div class="container">
+      <ix-badge type="counter" label="8" variant="primary"></ix-badge>
+      <ix-badge type="counter" label="8" variant="primary" outline></ix-badge>
+      <ix-badge type="counter" label="8" variant="primary" enable-animation></ix-badge>
+      <ix-badge type="counter" label="8" variant="primary" outline enable-animation></ix-badge>
+
+      <ix-badge type="counter" label="8" variant="alarm"></ix-badge>
+      <ix-badge type="counter" label="8" variant="alarm" outline></ix-badge>
+      <ix-badge type="counter" label="8" variant="alarm" enable-animation></ix-badge>
+      <ix-badge type="counter" label="8" variant="alarm" outline enable-animation></ix-badge>
+
+      <ix-badge type="counter" label="8" variant="critical"></ix-badge>
+      <ix-badge type="counter" label="8" variant="critical" outline></ix-badge>
+      <ix-badge type="counter" label="8" variant="critical" enable-animation></ix-badge>
+      <ix-badge type="counter" label="8" variant="critical" outline enable-animation></ix-badge>
+
+      <ix-badge type="counter" label="8" variant="warning"></ix-badge>
+      <ix-badge type="counter" label="8" variant="warning" outline></ix-badge>
+      <ix-badge type="counter" label="8" variant="warning" enable-animation></ix-badge>
+      <ix-badge type="counter" label="8" variant="warning" outline enable-animation></ix-badge>
+
+      <ix-badge type="counter" label="8" variant="info"></ix-badge>
+      <ix-badge type="counter" label="8" variant="info" outline></ix-badge>
+      <ix-badge type="counter" label="8" variant="info" enable-animation></ix-badge>
+      <ix-badge type="counter" label="8" variant="info" outline enable-animation></ix-badge>
+
+      <ix-badge type="counter" label="8" variant="neutral"></ix-badge>
+      <ix-badge type="counter" label="8" variant="neutral" outline></ix-badge>
+      <ix-badge type="counter" label="8" variant="neutral" enable-animation></ix-badge>
+      <ix-badge type="counter" label="8" variant="neutral" outline enable-animation></ix-badge>
+
+      <ix-badge type="counter" label="8" variant="success"></ix-badge>
+      <ix-badge type="counter" label="8" variant="success" outline></ix-badge>
+      <ix-badge type="counter" label="8" variant="success" enable-animation></ix-badge>
+      <ix-badge type="counter" label="8" variant="success" outline enable-animation></ix-badge>
+
+      <ix-badge type="counter" label="8" variant="custom" background="var(--theme-chart-11)" badge-color="var(--theme-color-inv-std-text)"></ix-badge>
+      <ix-badge type="counter" label="8" variant="custom" outline background="var(--theme-chart-11)" badge-color="var(--theme-chip-outline--color)"></ix-badge>
+      <ix-badge type="counter" label="8" variant="custom" enable-animation background="var(--theme-chart-11)" badge-color="var(--theme-color-inv-std-text)"></ix-badge>
+      <ix-badge type="counter" label="8" variant="custom" outline enable-animation background="var(--theme-chart-11)" badge-color="var(--theme-chip-outline--color)"></ix-badge>
+
+    </div>
+  `,
+})
+export default class BadgeCounter {}

packages/angular-standalone-test-app/src/preview-examples/badge-dot.css

@@ -0,0 +1,19 @@
+/*
+ * SPDX-FileCopyrightText: 2026 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+.container {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  column-gap: 2rem;
+  row-gap: 1.5rem;
+  align-items: center;
+  /* Room for attached overlays and pulse rings above the content. */
+  padding-top: 1rem;
+}
+

packages/angular-standalone-test-app/src/preview-examples/badge-dot.ts

@@ -0,0 +1,62 @@
+/*
+ * SPDX-FileCopyrightText: 2026 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { Component } from '@angular/core';
+import { IxBadge } from '@siemens/ix-angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  imports: [IxBadge],
+  styleUrls: ['./badge-dot.css'],
+  template: `
+    <div class="container">
+      <ix-badge type="dot" variant="primary" role="img" aria-label="Primary"></ix-badge>
+      <ix-badge type="dot" variant="primary" outline role="img" aria-label="Primary outline"></ix-badge>
+      <ix-badge type="dot" variant="primary" enable-animation role="img" aria-label="Primary pulse"></ix-badge>
+      <ix-badge type="dot" variant="primary" outline enable-animation role="img" aria-label="Primary pulse outline"></ix-badge>
+
+      <ix-badge type="dot" variant="alarm" role="img" aria-label="Alarm"></ix-badge>
+      <ix-badge type="dot" variant="alarm" outline role="img" aria-label="Alarm outline"></ix-badge>
+      <ix-badge type="dot" variant="alarm" enable-animation role="img" aria-label="Alarm pulse"></ix-badge>
+      <ix-badge type="dot" variant="alarm" outline enable-animation role="img" aria-label="Alarm pulse outline"></ix-badge>
+
+      <ix-badge type="dot" variant="critical" role="img" aria-label="Critical"></ix-badge>
+      <ix-badge type="dot" variant="critical" outline role="img" aria-label="Critical outline"></ix-badge>
+      <ix-badge type="dot" variant="critical" enable-animation role="img" aria-label="Critical pulse"></ix-badge>
+      <ix-badge type="dot" variant="critical" outline enable-animation role="img" aria-label="Critical pulse outline"></ix-badge>
+
+      <ix-badge type="dot" variant="warning" role="img" aria-label="Warning"></ix-badge>
+      <ix-badge type="dot" variant="warning" outline role="img" aria-label="Warning outline"></ix-badge>
+      <ix-badge type="dot" variant="warning" enable-animation role="img" aria-label="Warning pulse"></ix-badge>
+      <ix-badge type="dot" variant="warning" outline enable-animation role="img" aria-label="Warning pulse outline"></ix-badge>
+
+      <ix-badge type="dot" variant="info" role="img" aria-label="Info"></ix-badge>
+      <ix-badge type="dot" variant="info" outline role="img" aria-label="Info outline"></ix-badge>
+      <ix-badge type="dot" variant="info" enable-animation role="img" aria-label="Info pulse"></ix-badge>
+      <ix-badge type="dot" variant="info" outline enable-animation role="img" aria-label="Info pulse outline"></ix-badge>
+
+      <ix-badge type="dot" variant="neutral" role="img" aria-label="Neutral"></ix-badge>
+      <ix-badge type="dot" variant="neutral" outline role="img" aria-label="Neutral outline"></ix-badge>
+      <ix-badge type="dot" variant="neutral" enable-animation role="img" aria-label="Neutral pulse"></ix-badge>
+      <ix-badge type="dot" variant="neutral" outline enable-animation role="img" aria-label="Neutral pulse outline"></ix-badge>
+
+      <ix-badge type="dot" variant="success" role="img" aria-label="Success"></ix-badge>
+      <ix-badge type="dot" variant="success" outline role="img" aria-label="Success outline"></ix-badge>
+      <ix-badge type="dot" variant="success" enable-animation role="img" aria-label="Success pulse"></ix-badge>
+      <ix-badge type="dot" variant="success" outline enable-animation role="img" aria-label="Success pulse outline"></ix-badge>
+
+      <ix-badge type="dot" variant="custom" role="img" aria-label="Custom" background="var(--theme-chart-11)" badge-color="var(--theme-color-inv-std-text)"></ix-badge>
+      <ix-badge type="dot" variant="custom" outline role="img" aria-label="Custom outline" background="var(--theme-chart-11)" badge-color="var(--theme-chip-outline--color)"></ix-badge>
+      <ix-badge type="dot" variant="custom" enable-animation role="img" aria-label="Custom pulse" background="var(--theme-chart-11)" badge-color="var(--theme-color-inv-std-text)"></ix-badge>
+      <ix-badge type="dot" variant="custom" outline enable-animation role="img" aria-label="Custom pulse outline" background="var(--theme-chart-11)" badge-color="var(--theme-chip-outline--color)"></ix-badge>
+
+    </div>
+  `,
+})
+export default class BadgeDot {}

packages/angular-standalone-test-app/src/preview-examples/badge-label.css

@@ -0,0 +1,18 @@
+/*
+ * SPDX-FileCopyrightText: 2026 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+.container {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  column-gap: 2rem;
+  row-gap: 1.5rem;
+  align-items: center;
+  /* Room for attached overlays and pulse rings above the content. */
+  padding-top: 1rem;
+}

packages/angular-standalone-test-app/src/preview-examples/badge-label.ts

@@ -0,0 +1,58 @@
+/*
+ * SPDX-FileCopyrightText: 2026 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { Component } from '@angular/core';
+import { addIcons } from '@siemens/ix-icons';
+import { iconInfo } from '@siemens/ix-icons/icons';
+import { IxBadge } from '@siemens/ix-angular/standalone';
+
+addIcons({ iconInfo });
+
+@Component({
+  selector: 'app-example',
+  imports: [IxBadge],
+  styleUrls: ['./badge-label.css'],
+  template: `
+    <div class="container">
+      <ix-badge type="label" label="Primary" variant="primary" icon="info"></ix-badge>
+      <ix-badge type="label" label="Primary" variant="primary" icon="info" outline></ix-badge>
+      <ix-badge type="label" label="Primary" variant="primary" icon="info" enable-animation></ix-badge>
+      <ix-badge type="label" label="Primary" variant="primary" icon="info" outline enable-animation></ix-badge>
+      <ix-badge type="label" label="Alarm" variant="alarm" icon="info"></ix-badge>
+      <ix-badge type="label" label="Alarm" variant="alarm" icon="info" outline></ix-badge>
+      <ix-badge type="label" label="Alarm" variant="alarm" icon="info" enable-animation></ix-badge>
+      <ix-badge type="label" label="Alarm" variant="alarm" icon="info" outline enable-animation></ix-badge>
+      <ix-badge type="label" label="Critical" variant="critical" icon="info"></ix-badge>
+      <ix-badge type="label" label="Critical" variant="critical" icon="info" outline></ix-badge>
+      <ix-badge type="label" label="Critical" variant="critical" icon="info" enable-animation></ix-badge>
+      <ix-badge type="label" label="Critical" variant="critical" icon="info" outline enable-animation></ix-badge>
+      <ix-badge type="label" label="Warning" variant="warning" icon="info"></ix-badge>
+      <ix-badge type="label" label="Warning" variant="warning" icon="info" outline></ix-badge>
+      <ix-badge type="label" label="Warning" variant="warning" icon="info" enable-animation></ix-badge>
+      <ix-badge type="label" label="Warning" variant="warning" icon="info" outline enable-animation></ix-badge>
+      <ix-badge type="label" label="Info" variant="info" icon="info"></ix-badge>
+      <ix-badge type="label" label="Info" variant="info" icon="info" outline></ix-badge>
+      <ix-badge type="label" label="Info" variant="info" icon="info" enable-animation></ix-badge>
+      <ix-badge type="label" label="Info" variant="info" icon="info" outline enable-animation></ix-badge>
+      <ix-badge type="label" label="Neutral" variant="neutral" icon="info"></ix-badge>
+      <ix-badge type="label" label="Neutral" variant="neutral" icon="info" outline></ix-badge>
+      <ix-badge type="label" label="Neutral" variant="neutral" icon="info" enable-animation></ix-badge>
+      <ix-badge type="label" label="Neutral" variant="neutral" icon="info" outline enable-animation></ix-badge>
+      <ix-badge type="label" label="Success" variant="success" icon="info"></ix-badge>
+      <ix-badge type="label" label="Success" variant="success" icon="info" outline></ix-badge>
+      <ix-badge type="label" label="Success" variant="success" icon="info" enable-animation></ix-badge>
+      <ix-badge type="label" label="Success" variant="success" icon="info" outline enable-animation></ix-badge>
+      <ix-badge type="label" label="Custom" variant="custom" icon="info" background="var(--theme-chart-11)" badge-color="var(--theme-color-inv-std-text)"></ix-badge>
+      <ix-badge type="label" label="Custom" variant="custom" icon="info" background="var(--theme-chart-11)" badge-color="var(--theme-chip-outline--color)" outline></ix-badge>
+      <ix-badge type="label" label="Custom" variant="custom" icon="info" background="var(--theme-chart-11)" badge-color="var(--theme-color-inv-std-text)" enable-animation></ix-badge>
+      <ix-badge type="label" label="Custom" variant="custom" icon="info" background="var(--theme-chart-11)" badge-color="var(--theme-chip-outline--color)" outline enable-animation></ix-badge>
+    </div>
+  `,
+})
+export default class BadgeLabel {}

packages/angular-standalone-test-app/src/preview-examples/badge-status-icon.css

@@ -0,0 +1,19 @@
+/*
+ * SPDX-FileCopyrightText: 2026 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+.container {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  column-gap: 2rem;
+  row-gap: 1.5rem;
+  align-items: center;
+  /* Room for attached overlays and pulse rings above the content. */
+  padding-top: 1rem;
+}
+

packages/angular-standalone-test-app/src/preview-examples/badge-status-icon.ts

@@ -0,0 +1,52 @@
+/*
+ * SPDX-FileCopyrightText: 2026 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { Component } from '@angular/core';
+import { IxBadge } from '@siemens/ix-angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  imports: [IxBadge],
+  styleUrls: ['./badge-status-icon.css'],
+  template: `
+    <div class="container">
+      <ix-badge type="status-icon" variant="alarm" role="img" aria-label="Alarm"></ix-badge>
+      <ix-badge type="status-icon" variant="alarm" outline role="img" aria-label="Alarm outline"></ix-badge>
+      <ix-badge type="status-icon" variant="alarm" enable-animation role="img" aria-label="Alarm pulse"></ix-badge>
+      <ix-badge type="status-icon" variant="alarm" outline enable-animation role="img" aria-label="Alarm pulse outline"></ix-badge>
+
+      <ix-badge type="status-icon" variant="error" role="img" aria-label="Error"></ix-badge>
+      <ix-badge type="status-icon" variant="error" outline role="img" aria-label="Error outline"></ix-badge>
+      <ix-badge type="status-icon" variant="error" enable-animation role="img" aria-label="Error pulse"></ix-badge>
+      <ix-badge type="status-icon" variant="error" outline enable-animation role="img" aria-label="Error pulse outline"></ix-badge>
+
+      <ix-badge type="status-icon" variant="critical" role="img" aria-label="Critical"></ix-badge>
+      <ix-badge type="status-icon" variant="critical" outline role="img" aria-label="Critical outline"></ix-badge>
+      <ix-badge type="status-icon" variant="critical" enable-animation role="img" aria-label="Critical pulse"></ix-badge>
+      <ix-badge type="status-icon" variant="critical" outline enable-animation role="img" aria-label="Critical pulse outline"></ix-badge>
+
+      <ix-badge type="status-icon" variant="warning" role="img" aria-label="Warning"></ix-badge>
+      <ix-badge type="status-icon" variant="warning" outline role="img" aria-label="Warning outline"></ix-badge>
+      <ix-badge type="status-icon" variant="warning" enable-animation role="img" aria-label="Warning pulse"></ix-badge>
+      <ix-badge type="status-icon" variant="warning" outline enable-animation role="img" aria-label="Warning pulse outline"></ix-badge>
+
+      <ix-badge type="status-icon" variant="success" role="img" aria-label="Success"></ix-badge>
+      <ix-badge type="status-icon" variant="success" outline role="img" aria-label="Success outline"></ix-badge>
+      <ix-badge type="status-icon" variant="success" enable-animation role="img" aria-label="Success pulse"></ix-badge>
+      <ix-badge type="status-icon" variant="success" outline enable-animation role="img" aria-label="Success pulse outline"></ix-badge>
+
+      <ix-badge type="status-icon" variant="info" role="img" aria-label="Info"></ix-badge>
+      <ix-badge type="status-icon" variant="info" outline role="img" aria-label="Info outline"></ix-badge>
+      <ix-badge type="status-icon" variant="info" enable-animation role="img" aria-label="Info pulse"></ix-badge>
+      <ix-badge type="status-icon" variant="info" outline enable-animation role="img" aria-label="Info pulse outline"></ix-badge>
+
+    </div>
+  `,
+})
+export default class BadgeStatusIcon {}

packages/angular-standalone-test-app/src/preview-examples/badge.css

@@ -0,0 +1,28 @@
+/*
+ * SPDX-FileCopyrightText: 2026 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+.row {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 2rem;
+  margin-bottom: 1.5rem;
+  /* Room for attached overlays and pulse rings above the content. */
+  padding-top: 1.5rem;
+}
+
+.styled {
+  width: 7rem;
+  --ix-badge-max-width: 7rem;
+}
+
+.styled-ellipsis-4 {
+  width: 4rem;
+  --ix-badge-max-width: 4rem;
+}