Overlay

@coinbase/cds-web@8.38.5

A semi-transparent layer that covers content.

import { Overlay } from '@coinbase/cds-web/overlays/overlay/Overlay'

󰒨

Source

󰏖

View as Markdown

---

Related components

• Modal,
• Tray,
• Tooltip,
• Alert

Basic usage

Loading...

󰙡

Live Code

function BasicOverlay() {
  const [isVisible, setIsVisible] = useState(false);

  return (
    <VStack gap={4} height={200} position="relative" width="100%">
      <Button onClick={() => setIsVisible(!isVisible)}>
        {isVisible ? 'Hide' : 'Show'} Overlay
      </Button>
      <Text>Content underneath the overlay</Text>
      {isVisible && <Overlay onClick={() => setIsVisible(false)} />}
    </VStack>
  );
}

With Animation

Loading...

󰙡

Live Code

function AnimatedOverlay() {
  const [isVisible, setIsVisible] = useState(false);

  return (
    <VStack gap={4} height={200} position="relative" width="100%">
      <Button onClick={() => setIsVisible(!isVisible)}>
        {isVisible ? 'Hide' : 'Show'} Animated Overlay
      </Button>
      <Text>Content underneath the overlay</Text>
      {isVisible && <Overlay animated onClick={() => setIsVisible(false)} />}
    </VStack>
  );
}

Custom Background

Loading...

󰙡

Live Code

function CustomOverlay() {
  const [isVisible, setIsVisible] = useState(false);

  return (
    <VStack gap={4} height={200} position="relative" width="100%">
      <Button onClick={() => setIsVisible(!isVisible)}>
        {isVisible ? 'Hide' : 'Show'} Custom Overlay
      </Button>
      <Text>Content underneath the overlay</Text>
      {isVisible && <Overlay animated background="bgLine" onClick={() => setIsVisible(false)} />}
    </VStack>
  );
}