diff --git a/.changeset/modern-zebras-pretend.md b/.changeset/modern-zebras-pretend.md
new file mode 100644
index 00000000000..18b7bf91d1b
--- /dev/null
+++ b/.changeset/modern-zebras-pretend.md
@@ -0,0 +1,5 @@
+---
+"@salt-ds/lab": patch
+---
+
+Fix system status icons in content from using the component styles override
diff --git a/packages/lab/src/system-status/SystemStatus.css b/packages/lab/src/system-status/SystemStatus.css
index 526f4909cc6..794d65e6af2 100644
--- a/packages/lab/src/system-status/SystemStatus.css
+++ b/packages/lab/src/system-status/SystemStatus.css
@@ -1,7 +1,5 @@
/* Styles applied to root component */
.saltSystemStatus {
- --saltIcon-color: var(--salt-content-bold-foreground);
-
background: var(--saltSystemStatus-background, var(--systemStatus-background));
border-color: var(--saltSystemStatus-borderColor, var(--systemStatus-borderColor));
border-width: var(--saltSystemStatus-borderWidth, var(--salt-size-border));
@@ -21,6 +19,7 @@
/* Styles applied to icon */
.saltSystemStatus-icon.saltIcon {
min-height: var(--salt-size-base);
+ --saltIcon-color: var(--salt-content-bold-foreground);
}
/* Styles applied when state = "info" */
diff --git a/packages/lab/stories/system-status/system-status.qa.stories.tsx b/packages/lab/stories/system-status/system-status.qa.stories.tsx
index 8611559cedd..196d991b0b7 100644
--- a/packages/lab/stories/system-status/system-status.qa.stories.tsx
+++ b/packages/lab/stories/system-status/system-status.qa.stories.tsx
@@ -1,4 +1,5 @@
-import { StackLayout, Text } from "@salt-ds/core";
+import { Button, SplitLayout, StackLayout, Text } from "@salt-ds/core";
+import { CloseIcon } from "@salt-ds/icons";
import {
SystemStatus,
SystemStatusContent,
@@ -36,13 +37,37 @@ const WarningSystemStatus = () => (
const SuccessSystemStatus = () => (
);
+const WithButtonSystemStatusExample: FC = ({ status }) => {
+ return (
+
+
+
+
+ Title
+
+ }
+ endItem={
+
+ }
+ />
+ Example custom renderer
+
+
+
+ );
+};
export const ExamplesGrid: StoryFn = (props) => (
+
);