diff --git a/.changeset/olive-doors-rule.md b/.changeset/olive-doors-rule.md
new file mode 100644
index 000000000..8733782e8
--- /dev/null
+++ b/.changeset/olive-doors-rule.md
@@ -0,0 +1,5 @@
+---
+"@launchpad-ui/components": patch
+---
+
+Add `warning` variant for `Alert`
diff --git a/packages/components/src/Alert.tsx b/packages/components/src/Alert.tsx
index c0ef4d20f..66371daab 100644
--- a/packages/components/src/Alert.tsx
+++ b/packages/components/src/Alert.tsx
@@ -18,6 +18,7 @@ const alert = cva(styles.base, {
error: styles.error,
info: styles.info,
success: styles.success,
+ warning: styles.warning,
},
variant: {
default: styles.default,
diff --git a/packages/components/src/styles/Alert.module.css b/packages/components/src/styles/Alert.module.css
index 1eaa46d08..ae96069a5 100644
--- a/packages/components/src/styles/Alert.module.css
+++ b/packages/components/src/styles/Alert.module.css
@@ -19,6 +19,10 @@
&.success .icon {
fill: var(--lp-color-fill-feedback-success);
}
+
+ &.warning .icon {
+ fill: var(--lp-color-brand-orange-base);
+ }
}
.default {
@@ -47,6 +51,11 @@
--color-2: var(--lp-color-green-400);
}
+ &.warning {
+ --color-1: var(--lp-color-brand-orange-base);
+ --color-2: #ffb052;
+ }
+
&:has(.heading) {
& .icon {
transform: translateY(2px);
diff --git a/packages/components/stories/Alert.stories.tsx b/packages/components/stories/Alert.stories.tsx
index cdef8cdf5..441a74cab 100644
--- a/packages/components/stories/Alert.stories.tsx
+++ b/packages/components/stories/Alert.stories.tsx
@@ -64,6 +64,18 @@ export const Success: Story = {
},
};
+export const Warning: Story = {
+ args: {
+ children: (
+ <>
+ Heading
+ Content
+ >
+ ),
+ status: 'warning',
+ },
+};
+
export const Inline: Story = {
args: {
children: Content,