diff --git a/examples/wrapper-components/react-javascript/src/components/Alert/Alert.js b/examples/wrapper-components/react-javascript/src/components/Alert/Alert.js
index 8cfc19c420..c042acf8fd 100644
--- a/examples/wrapper-components/react-javascript/src/components/Alert/Alert.js
+++ b/examples/wrapper-components/react-javascript/src/components/Alert/Alert.js
@@ -4,7 +4,7 @@ import { IfxAlert } from '@infineon/infineon-design-system-react';
function Alert() {
return (
- Attention! This is an alert message — check it out!
+ Attention! This is an alert message — check it out!
)
diff --git a/packages/components/src/components/alert/alert.scss b/packages/components/src/components/alert/alert.scss
index 43e744d333..ff5d2bf6c6 100644
--- a/packages/components/src/components/alert/alert.scss
+++ b/packages/components/src/components/alert/alert.scss
@@ -111,11 +111,11 @@
}
}
- &.secondary {
- border: 1px solid tokens.$ifxColorBerry500;
+ &.success {
+ border: 1px solid tokens.$ifxColorGreen500;
& .icon-wrapper {
- background-color: tokens.$ifxColorBerry500;
+ background-color: tokens.$ifxColorGreen500;
color: tokens.$ifxColorBaseWhite;
}
}
diff --git a/packages/components/src/components/alert/alert.stories.ts b/packages/components/src/components/alert/alert.stories.ts
index 4084ff435d..079258c594 100644
--- a/packages/components/src/components/alert/alert.stories.ts
+++ b/packages/components/src/components/alert/alert.stories.ts
@@ -14,7 +14,7 @@ export default {
argTypes: {
variant: {
- options: ['primary', 'secondary', 'danger', 'warning'],
+ options: ['primary', 'success', 'danger', 'warning'],
control: { type: 'radio' },
},
diff --git a/packages/components/src/components/alert/alert.tsx b/packages/components/src/components/alert/alert.tsx
index 307112222f..7f1adcaac2 100644
--- a/packages/components/src/components/alert/alert.tsx
+++ b/packages/components/src/components/alert/alert.tsx
@@ -7,7 +7,7 @@ import { Component, Prop, h, Event, EventEmitter } from '@stencil/core';
})
export class Alert {
- @Prop() variant: 'primary' | 'secondary' | 'danger' | 'warning' | 'info' = 'primary';
+ @Prop() variant: 'primary' | 'success' | 'danger' | 'warning' | 'info' = 'primary';
@Prop() icon: string;
@Event() ifxClose: EventEmitter;
@Prop() closable: boolean = true;
diff --git a/packages/components/src/components/alert/readme.md b/packages/components/src/components/alert/readme.md
index 9076efe702..0e30747368 100644
--- a/packages/components/src/components/alert/readme.md
+++ b/packages/components/src/components/alert/readme.md
@@ -7,11 +7,11 @@
## Properties
-| Property | Attribute | Description | Type | Default |
-| ---------- | ---------- | ----------- | ------------------------------------------------------------- | ----------- |
-| `closable` | `closable` | | `boolean` | `true` |
-| `icon` | `icon` | | `string` | `undefined` |
-| `variant` | `variant` | | `"danger" \| "info" \| "primary" \| "secondary" \| "warning"` | `'primary'` |
+| Property | Attribute | Description | Type | Default |
+| ---------- | ---------- | ----------- | ----------------------------------------------------------- | ----------- |
+| `closable` | `closable` | | `boolean` | `true` |
+| `icon` | `icon` | | `string` | `undefined` |
+| `variant` | `variant` | | `"danger" \| "info" \| "primary" \| "success" \| "warning"` | `'primary'` |
## Events