Scrim
Scrim is a temporary, semi-transparent layer that makes underlying content less prominent.
Also known as: Backdrop, Shade
Use the fixed prop to make the scrim fill the viewport.
import { Button, Scrim, Text } from "@salt-ds/core";
import { type ReactElement, useState } from "react";
export const FillViewport = (): ReactElement => {
const [open, setOpen] = useState(false);
const handleOpen = () => {
setOpen(true);
};
const handleClose = () => {
setOpen(false);
};
return (
<>
<Scrim fixed open={open} onClick={handleClose}>
<Text>
<strong>Click scrim to close</strong>
</Text>
</Scrim>
<Button onClick={handleOpen} sentiment="accented">
Show scrim
</Button>
</>
);
};A scrim can fill its parent container.
Ensure you have explicitly set a position attribute for the parent container.
Emails
Sent
400+10 (+1.23%)
Received
984-32 (-5.4%)
Open rate
20%+6.1 (+4.32%)
Click rate
5%+3.7 (+1.23%)
import {
Button,
Card,
Display3,
H3,
Scrim,
StackLayout,
Text,
} from "@salt-ds/core";
import { ArrowDownIcon, ArrowUpIcon } from "@salt-ds/icons";
import { type ReactElement, useState } from "react";
export const FillContainer = (): ReactElement => {
const [open, setOpen] = useState(false);
const handleClick = () => {
setOpen((old) => !old);
};
return (
<StackLayout>
<Card
style={{ position: "relative", padding: "var(--salt-spacing-200)" }}
variant="secondary"
>
<Scrim open={open} />
<StackLayout gap={1}>
<H3>Emails</H3>
<StackLayout gap={3}>
<StackLayout direction="row" gap={3}>
<StackLayout gap={0}>
<Text>Sent</Text>
<Display3>
400
<ArrowUpIcon
style={{ fill: "var(--salt-status-positive-foreground)" }}
size={1}
/>
</Display3>
<Text
style={{ color: "var(--salt-status-positive-foreground)" }}
>
+10 (+1.23%)
</Text>
</StackLayout>
<StackLayout gap={0}>
<Text>Received</Text>
<Display3>
984
<ArrowDownIcon
style={{ fill: "var(--salt-status-negative-foreground)" }}
size={1}
/>
</Display3>
<Text
style={{ color: "var(--salt-status-negative-foreground)" }}
>
-32 (-5.4%)
</Text>
</StackLayout>
</StackLayout>
<StackLayout direction="row" gap={3}>
<StackLayout gap={0}>
<Text>Open rate</Text>
<Display3>
20%
<ArrowUpIcon
style={{ fill: "var(--salt-status-positive-foreground)" }}
size={1}
/>
</Display3>
<Text
style={{ color: "var(--salt-status-positive-foreground)" }}
>
+6.1 (+4.32%)
</Text>
</StackLayout>
<StackLayout gap={0}>
<Text>Click rate</Text>
<Display3>
5%
<ArrowUpIcon
style={{ fill: "var(--salt-status-positive-foreground)" }}
size={1}
/>
</Display3>
<Text
style={{ color: "var(--salt-status-positive-foreground)" }}
>
+3.7 (+1.23%)
</Text>
</StackLayout>
</StackLayout>
</StackLayout>
</StackLayout>
</Card>
<Button
style={{ width: "fit-content", alignSelf: "center" }}
onClick={handleClick}
sentiment="accented"
>
{open ? "Hide scrim" : "Show scrim"}
</Button>
</StackLayout>
);
};You can pass children to a scrim, such as a Spinner to indicate loading state. You can incorporate other elements as children, to display them above the scrim and draw attention to them.
Emails
Sent
400+10 (+1.23%)
Received
984-32 (-5.4%)
Open rate
20%+6.1 (+4.32%)
Click rate
5%+3.7 (+1.23%)
import {
Button,
Card,
Display3,
H3,
Scrim,
Spinner,
StackLayout,
Text,
} from "@salt-ds/core";
import { ArrowDownIcon, ArrowUpIcon } from "@salt-ds/icons";
import { type ReactElement, useState } from "react";
export const WithChild = (): ReactElement => {
const [open, setOpen] = useState(false);
const handleClick = () => {
setOpen((old) => !old);
};
return (
<StackLayout>
<Card
style={{ position: "relative", padding: "var(--salt-spacing-200)" }}
variant="secondary"
>
<Scrim open={open}>
<Spinner size="medium" />
</Scrim>
<StackLayout gap={1}>
<H3>Emails</H3>
<StackLayout gap={3}>
<StackLayout direction="row" gap={3}>
<StackLayout gap={0}>
<Text>Sent</Text>
<Display3>
400
<ArrowUpIcon
style={{ fill: "var(--salt-status-positive-foreground)" }}
size={1}
/>
</Display3>
<Text
style={{ color: "var(--salt-status-positive-foreground)" }}
>
+10 (+1.23%)
</Text>
</StackLayout>
<StackLayout gap={0}>
<Text>Received</Text>
<Display3>
984
<ArrowDownIcon
style={{ fill: "var(--salt-status-negative-foreground)" }}
size={1}
/>
</Display3>
<Text
style={{ color: "var(--salt-status-negative-foreground)" }}
>
-32 (-5.4%)
</Text>
</StackLayout>
</StackLayout>
<StackLayout direction="row" gap={3}>
<StackLayout gap={0}>
<Text>Open rate</Text>
<Display3>
20%
<ArrowUpIcon
style={{ fill: "var(--salt-status-positive-foreground)" }}
size={1}
/>
</Display3>
<Text
style={{ color: "var(--salt-status-positive-foreground)" }}
>
+6.1 (+4.32%)
</Text>
</StackLayout>
<StackLayout gap={0}>
<Text>Click rate</Text>
<Display3>
5%
<ArrowUpIcon
style={{ fill: "var(--salt-status-positive-foreground)" }}
size={1}
/>
</Display3>
<Text
style={{ color: "var(--salt-status-positive-foreground)" }}
>
+3.7 (+1.23%)
</Text>
</StackLayout>
</StackLayout>
</StackLayout>
</StackLayout>
</Card>
<Button
style={{ width: "fit-content", alignSelf: "center" }}
onClick={handleClick}
sentiment="accented"
>
{open ? "Hide scrim" : "Show scrim"}
</Button>
</StackLayout>
);
};Use the fixed prop to make the scrim fill the viewport.
import { Button, Scrim, Text } from "@salt-ds/core";
import { type ReactElement, useState } from "react";
export const FillViewport = (): ReactElement => {
const [open, setOpen] = useState(false);
const handleOpen = () => {
setOpen(true);
};
const handleClose = () => {
setOpen(false);
};
return (
<>
<Scrim fixed open={open} onClick={handleClose}>
<Text>
<strong>Click scrim to close</strong>
</Text>
</Scrim>
<Button onClick={handleOpen} sentiment="accented">
Show scrim
</Button>
</>
);
};A scrim can fill its parent container.
Ensure you have explicitly set a position attribute for the parent container.
Emails
Sent
400+10 (+1.23%)
Received
984-32 (-5.4%)
Open rate
20%+6.1 (+4.32%)
Click rate
5%+3.7 (+1.23%)
import {
Button,
Card,
Display3,
H3,
Scrim,
StackLayout,
Text,
} from "@salt-ds/core";
import { ArrowDownIcon, ArrowUpIcon } from "@salt-ds/icons";
import { type ReactElement, useState } from "react";
export const FillContainer = (): ReactElement => {
const [open, setOpen] = useState(false);
const handleClick = () => {
setOpen((old) => !old);
};
return (
<StackLayout>
<Card
style={{ position: "relative", padding: "var(--salt-spacing-200)" }}
variant="secondary"
>
<Scrim open={open} />
<StackLayout gap={1}>
<H3>Emails</H3>
<StackLayout gap={3}>
<StackLayout direction="row" gap={3}>
<StackLayout gap={0}>
<Text>Sent</Text>
<Display3>
400
<ArrowUpIcon
style={{ fill: "var(--salt-status-positive-foreground)" }}
size={1}
/>
</Display3>
<Text
style={{ color: "var(--salt-status-positive-foreground)" }}
>
+10 (+1.23%)
</Text>
</StackLayout>
<StackLayout gap={0}>
<Text>Received</Text>
<Display3>
984
<ArrowDownIcon
style={{ fill: "var(--salt-status-negative-foreground)" }}
size={1}
/>
</Display3>
<Text
style={{ color: "var(--salt-status-negative-foreground)" }}
>
-32 (-5.4%)
</Text>
</StackLayout>
</StackLayout>
<StackLayout direction="row" gap={3}>
<StackLayout gap={0}>
<Text>Open rate</Text>
<Display3>
20%
<ArrowUpIcon
style={{ fill: "var(--salt-status-positive-foreground)" }}
size={1}
/>
</Display3>
<Text
style={{ color: "var(--salt-status-positive-foreground)" }}
>
+6.1 (+4.32%)
</Text>
</StackLayout>
<StackLayout gap={0}>
<Text>Click rate</Text>
<Display3>
5%
<ArrowUpIcon
style={{ fill: "var(--salt-status-positive-foreground)" }}
size={1}
/>
</Display3>
<Text
style={{ color: "var(--salt-status-positive-foreground)" }}
>
+3.7 (+1.23%)
</Text>
</StackLayout>
</StackLayout>
</StackLayout>
</StackLayout>
</Card>
<Button
style={{ width: "fit-content", alignSelf: "center" }}
onClick={handleClick}
sentiment="accented"
>
{open ? "Hide scrim" : "Show scrim"}
</Button>
</StackLayout>
);
};You can pass children to a scrim, such as a Spinner to indicate loading state. You can incorporate other elements as children, to display them above the scrim and draw attention to them.
Emails
Sent
400+10 (+1.23%)
Received
984-32 (-5.4%)
Open rate
20%+6.1 (+4.32%)
Click rate
5%+3.7 (+1.23%)
import {
Button,
Card,
Display3,
H3,
Scrim,
Spinner,
StackLayout,
Text,
} from "@salt-ds/core";
import { ArrowDownIcon, ArrowUpIcon } from "@salt-ds/icons";
import { type ReactElement, useState } from "react";
export const WithChild = (): ReactElement => {
const [open, setOpen] = useState(false);
const handleClick = () => {
setOpen((old) => !old);
};
return (
<StackLayout>
<Card
style={{ position: "relative", padding: "var(--salt-spacing-200)" }}
variant="secondary"
>
<Scrim open={open}>
<Spinner size="medium" />
</Scrim>
<StackLayout gap={1}>
<H3>Emails</H3>
<StackLayout gap={3}>
<StackLayout direction="row" gap={3}>
<StackLayout gap={0}>
<Text>Sent</Text>
<Display3>
400
<ArrowUpIcon
style={{ fill: "var(--salt-status-positive-foreground)" }}
size={1}
/>
</Display3>
<Text
style={{ color: "var(--salt-status-positive-foreground)" }}
>
+10 (+1.23%)
</Text>
</StackLayout>
<StackLayout gap={0}>
<Text>Received</Text>
<Display3>
984
<ArrowDownIcon
style={{ fill: "var(--salt-status-negative-foreground)" }}
size={1}
/>
</Display3>
<Text
style={{ color: "var(--salt-status-negative-foreground)" }}
>
-32 (-5.4%)
</Text>
</StackLayout>
</StackLayout>
<StackLayout direction="row" gap={3}>
<StackLayout gap={0}>
<Text>Open rate</Text>
<Display3>
20%
<ArrowUpIcon
style={{ fill: "var(--salt-status-positive-foreground)" }}
size={1}
/>
</Display3>
<Text
style={{ color: "var(--salt-status-positive-foreground)" }}
>
+6.1 (+4.32%)
</Text>
</StackLayout>
<StackLayout gap={0}>
<Text>Click rate</Text>
<Display3>
5%
<ArrowUpIcon
style={{ fill: "var(--salt-status-positive-foreground)" }}
size={1}
/>
</Display3>
<Text
style={{ color: "var(--salt-status-positive-foreground)" }}
>
+3.7 (+1.23%)
</Text>
</StackLayout>
</StackLayout>
</StackLayout>
</StackLayout>
</Card>
<Button
style={{ width: "fit-content", alignSelf: "center" }}
onClick={handleClick}
sentiment="accented"
>
{open ? "Hide scrim" : "Show scrim"}
</Button>
</StackLayout>
);
};Use the fixed prop to make the scrim fill the viewport.
import { Button, Scrim, Text } from "@salt-ds/core";
import { type ReactElement, useState } from "react";
export const FillViewport = (): ReactElement => {
const [open, setOpen] = useState(false);
const handleOpen = () => {
setOpen(true);
};
const handleClose = () => {
setOpen(false);
};
return (
<>
<Scrim fixed open={open} onClick={handleClose}>
<Text>
<strong>Click scrim to close</strong>
</Text>
</Scrim>
<Button onClick={handleOpen} sentiment="accented">
Show scrim
</Button>
</>
);
};A scrim can fill its parent container.
Ensure you have explicitly set a position attribute for the parent container.
Emails
Sent
400+10 (+1.23%)
Received
984-32 (-5.4%)
Open rate
20%+6.1 (+4.32%)
Click rate
5%+3.7 (+1.23%)
import {
Button,
Card,
Display3,
H3,
Scrim,
StackLayout,
Text,
} from "@salt-ds/core";
import { ArrowDownIcon, ArrowUpIcon } from "@salt-ds/icons";
import { type ReactElement, useState } from "react";
export const FillContainer = (): ReactElement => {
const [open, setOpen] = useState(false);
const handleClick = () => {
setOpen((old) => !old);
};
return (
<StackLayout>
<Card
style={{ position: "relative", padding: "var(--salt-spacing-200)" }}
variant="secondary"
>
<Scrim open={open} />
<StackLayout gap={1}>
<H3>Emails</H3>
<StackLayout gap={3}>
<StackLayout direction="row" gap={3}>
<StackLayout gap={0}>
<Text>Sent</Text>
<Display3>
400
<ArrowUpIcon
style={{ fill: "var(--salt-status-positive-foreground)" }}
size={1}
/>
</Display3>
<Text
style={{ color: "var(--salt-status-positive-foreground)" }}
>
+10 (+1.23%)
</Text>
</StackLayout>
<StackLayout gap={0}>
<Text>Received</Text>
<Display3>
984
<ArrowDownIcon
style={{ fill: "var(--salt-status-negative-foreground)" }}
size={1}
/>
</Display3>
<Text
style={{ color: "var(--salt-status-negative-foreground)" }}
>
-32 (-5.4%)
</Text>
</StackLayout>
</StackLayout>
<StackLayout direction="row" gap={3}>
<StackLayout gap={0}>
<Text>Open rate</Text>
<Display3>
20%
<ArrowUpIcon
style={{ fill: "var(--salt-status-positive-foreground)" }}
size={1}
/>
</Display3>
<Text
style={{ color: "var(--salt-status-positive-foreground)" }}
>
+6.1 (+4.32%)
</Text>
</StackLayout>
<StackLayout gap={0}>
<Text>Click rate</Text>
<Display3>
5%
<ArrowUpIcon
style={{ fill: "var(--salt-status-positive-foreground)" }}
size={1}
/>
</Display3>
<Text
style={{ color: "var(--salt-status-positive-foreground)" }}
>
+3.7 (+1.23%)
</Text>
</StackLayout>
</StackLayout>
</StackLayout>
</StackLayout>
</Card>
<Button
style={{ width: "fit-content", alignSelf: "center" }}
onClick={handleClick}
sentiment="accented"
>
{open ? "Hide scrim" : "Show scrim"}
</Button>
</StackLayout>
);
};You can pass children to a scrim, such as a Spinner to indicate loading state. You can incorporate other elements as children, to display them above the scrim and draw attention to them.
Emails
Sent
400+10 (+1.23%)
Received
984-32 (-5.4%)
Open rate
20%+6.1 (+4.32%)
Click rate
5%+3.7 (+1.23%)
import {
Button,
Card,
Display3,
H3,
Scrim,
Spinner,
StackLayout,
Text,
} from "@salt-ds/core";
import { ArrowDownIcon, ArrowUpIcon } from "@salt-ds/icons";
import { type ReactElement, useState } from "react";
export const WithChild = (): ReactElement => {
const [open, setOpen] = useState(false);
const handleClick = () => {
setOpen((old) => !old);
};
return (
<StackLayout>
<Card
style={{ position: "relative", padding: "var(--salt-spacing-200)" }}
variant="secondary"
>
<Scrim open={open}>
<Spinner size="medium" />
</Scrim>
<StackLayout gap={1}>
<H3>Emails</H3>
<StackLayout gap={3}>
<StackLayout direction="row" gap={3}>
<StackLayout gap={0}>
<Text>Sent</Text>
<Display3>
400
<ArrowUpIcon
style={{ fill: "var(--salt-status-positive-foreground)" }}
size={1}
/>
</Display3>
<Text
style={{ color: "var(--salt-status-positive-foreground)" }}
>
+10 (+1.23%)
</Text>
</StackLayout>
<StackLayout gap={0}>
<Text>Received</Text>
<Display3>
984
<ArrowDownIcon
style={{ fill: "var(--salt-status-negative-foreground)" }}
size={1}
/>
</Display3>
<Text
style={{ color: "var(--salt-status-negative-foreground)" }}
>
-32 (-5.4%)
</Text>
</StackLayout>
</StackLayout>
<StackLayout direction="row" gap={3}>
<StackLayout gap={0}>
<Text>Open rate</Text>
<Display3>
20%
<ArrowUpIcon
style={{ fill: "var(--salt-status-positive-foreground)" }}
size={1}
/>
</Display3>
<Text
style={{ color: "var(--salt-status-positive-foreground)" }}
>
+6.1 (+4.32%)
</Text>
</StackLayout>
<StackLayout gap={0}>
<Text>Click rate</Text>
<Display3>
5%
<ArrowUpIcon
style={{ fill: "var(--salt-status-positive-foreground)" }}
size={1}
/>
</Display3>
<Text
style={{ color: "var(--salt-status-positive-foreground)" }}
>
+3.7 (+1.23%)
</Text>
</StackLayout>
</StackLayout>
</StackLayout>
</StackLayout>
</Card>
<Button
style={{ width: "fit-content", alignSelf: "center" }}
onClick={handleClick}
sentiment="accented"
>
{open ? "Hide scrim" : "Show scrim"}
</Button>
</StackLayout>
);
};