---
title: Scrim
category: Overlays
summary: Scrims are used to display focused content like alerts, modals, or media previews.
---

```jsx live
render(() => {
  const [scrimVisible, setScrimVisible] = React.useState(false)
  return (
    <React.Fragment>
      <Button
        title="Render scrim"
        theme="primary"
        onClick={() => setScrimVisible(true)}
      />
      {scrimVisible && (
        <Scrim>
          <StackView padding={2} margin="auto" backgroundColor="background">
            <Button
              title="Remove scrim"
              onClick={() => setScrimVisible(false)}
            />
          </StackView>
        </Scrim>
      )}
    </React.Fragment>
  )
})
```