+ @for (error of errors(); track error) {
+
{{ error }}
+ }
+
diff --git a/libs/design-system/error-indicator/src/lib/error-indicator.component.scss b/libs/design-system/error-indicator/src/lib/error-indicator.component.scss
new file mode 100644
index 000000000..26c8beed3
--- /dev/null
+++ b/libs/design-system/error-indicator/src/lib/error-indicator.component.scss
@@ -0,0 +1,17 @@
+:host {
+ display: flex;
+ width: fit-content;
+ padding: 0.5rem 0.75rem;
+ border-radius: 0.25rem;
+ color: var(--sys-on-error-container);
+ background-color: color-mix(in srgb, var(--sys-error-container) 80%, transparent);
+
+ mat-icon {
+ margin-right: 0.5rem;
+ color: var(--sys-error);
+ }
+ .error {
+ font: var(--sys-label-large);
+ letter-spacing: var(--sys-label-large-text-tracking);
+ }
+}
diff --git a/libs/design-system/error-indicator/src/lib/error-indicator.component.spec.ts b/libs/design-system/error-indicator/src/lib/error-indicator.component.spec.ts
new file mode 100644
index 000000000..4af763010
--- /dev/null
+++ b/libs/design-system/error-indicator/src/lib/error-indicator.component.spec.ts
@@ -0,0 +1,15 @@
+import { render } from '@testing-library/angular';
+import { ErrorIndicatorComponent } from './error-indicator.component';
+import { screen } from '@testing-library/dom';
+describe('ErrorIndicatorComponent', () => {
+ it('Error should be visible in the indicator', async () => {
+ const errors: string[] = ['Error 1'];
+ await render(ErrorIndicatorComponent, {
+ componentInputs: {
+ errors,
+ },
+ });
+
+ expect(screen.getByText('Error 1')).toBeInTheDocument();
+ });
+});
diff --git a/libs/design-system/error-indicator/src/lib/error-indicator.component.stories.ts b/libs/design-system/error-indicator/src/lib/error-indicator.component.stories.ts
new file mode 100644
index 000000000..60cc1b6fa
--- /dev/null
+++ b/libs/design-system/error-indicator/src/lib/error-indicator.component.stories.ts
@@ -0,0 +1,33 @@
+import { applicationConfig, Meta, StoryObj } from '@storybook/angular';
+import { provideDesignSystem } from '../../../src';
+import { ErrorIndicatorComponent } from './error-indicator.component';
+
+const meta: Meta = {
+ component: ErrorIndicatorComponent,
+ title: 'ErrorIndicatorComponent',
+ parameters: {
+ design: {
+ type: 'figma',
+ url: 'https://www.figma.com/design/BCEJn9KCIbBJ5MzqnojKQp/Explorer-Components?node-id=1294-4977',
+ },
+ },
+ decorators: [
+ applicationConfig({
+ providers: [provideDesignSystem()],
+ }),
+ ],
+};
+export default meta;
+type Story = StoryObj;
+
+export const SingleError: Story = {
+ args: {
+ errors: ['Please upload a dataset.'],
+ },
+};
+
+export const MultipleErrors: Story = {
+ args: {
+ errors: ['Required columns missing: Column Name, Column Name', 'Please upload a file with all required columns.'],
+ },
+};
diff --git a/libs/design-system/error-indicator/src/lib/error-indicator.component.ts b/libs/design-system/error-indicator/src/lib/error-indicator.component.ts
new file mode 100644
index 000000000..ecf42bf41
--- /dev/null
+++ b/libs/design-system/error-indicator/src/lib/error-indicator.component.ts
@@ -0,0 +1,17 @@
+import { ChangeDetectionStrategy, Component, input } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { MatIconModule } from '@angular/material/icon';
+
+/** Error Indicator component */
+@Component({
+ selector: 'hra-error-indicator',
+ standalone: true,
+ imports: [CommonModule, MatIconModule],
+ templateUrl: './error-indicator.component.html',
+ styleUrl: './error-indicator.component.scss',
+ changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ErrorIndicatorComponent {
+ /** List of errors to be shown in the indicator */
+ readonly errors = input