diff --git a/src/elements/tag/tag-group/tag-group.visual.spec.ts b/src/elements/tag/tag-group/tag-group.visual.spec.ts
new file mode 100644
index 0000000000..0a0b0600dd
--- /dev/null
+++ b/src/elements/tag/tag-group/tag-group.visual.spec.ts
@@ -0,0 +1,34 @@
+import { html } from 'lit';
+import { repeat } from 'lit/directives/repeat.js';
+
+import { describeViewports, visualDiffDefault } from '../../core/testing/private.js';
+
+import '../tag.js';
+import './tag-group.js';
+
+describe(`sbb-tag-group`, () => {
+ describeViewports({ viewports: ['zero', 'medium'] }, () => {
+ for (const size of ['s', 'm']) {
+ it(
+ `size=${size}`,
+ visualDiffDefault.with(async (setup) => {
+ await setup.withFixture(html`
+
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer enim elit,
+ ultricies in tincidunt quis, mattis eu quam.
+
+ ${repeat(
+ new Array(5),
+ (_, i) =>
+ html`
+ Label ${i}
+ `,
+ )}
+
+ `);
+ }),
+ );
+ }
+ });
+});
diff --git a/src/elements/tag/tag/tag.visual.spec.ts b/src/elements/tag/tag/tag.visual.spec.ts
new file mode 100644
index 0000000000..1a60569f7d
--- /dev/null
+++ b/src/elements/tag/tag/tag.visual.spec.ts
@@ -0,0 +1,63 @@
+import { html, nothing } from 'lit';
+
+import {
+ describeEach,
+ describeViewports,
+ visualDiffDefault,
+ visualDiffStandardStates,
+} from '../../core/testing/private.js';
+
+import './tag.js';
+
+describe(`sbb-tag`, () => {
+ const cases = {
+ checked: [false, true],
+ disabled: [false, true],
+ };
+
+ const visualCases = {
+ size: ['s', 'm'],
+ icon: [undefined, 'pie-small'],
+ amount: [undefined, 123],
+ };
+
+ describeViewports({ viewports: ['zero', 'medium'] }, () => {
+ for (const visualDiffStandardState of visualDiffStandardStates) {
+ it(
+ `state=${visualDiffStandardState.name}`,
+ visualDiffStandardState.with(async (setup) => {
+ await setup.withFixture(html`Tag label`);
+ }),
+ );
+ }
+
+ describeEach(cases, ({ checked, disabled }) => {
+ it(
+ '',
+ visualDiffDefault.with(async (setup) => {
+ await setup.withFixture(html`
+ Tag label
+ `);
+ }),
+ );
+ });
+
+ describeEach(visualCases, ({ icon, amount, size }) => {
+ it(
+ '',
+ visualDiffDefault.with(async (setup) => {
+ await setup.withFixture(html`
+ Tag label
+ `);
+ }),
+ );
+ });
+ });
+});