FullscreenModal

@coinbase/cds-web@8.21.3

FullscreenModal is a component that displays content in a full-screen overlay, typically used for immersive experiences or complex interactions.

Import

import { FullscreenModal } from '@coinbase/cds-web/overlays/modal/FullscreenModal'

SourceView source codeStorybookView StorybookFigmaView Figma (internal only)

---

Peer dependencies

• framer-motion: ^10.18.0

---

Related components

• Modal

---

󰏖

View as Markdown

Please refer to the Modal docs for more info on setup and usage.

󰔂

Accessibility tip

Trigger Focus

A ref to the trigger that opens the modal, along with an onDidClose method to reset focus on the trigger when the modal closes, needs to be wired up for accessibility (see code example below).

Labels

Modals also require an accessibility label, which we set to title by default. However, if you don't want to provide a title or there's other text that gives the user better context to the modal, then you can pass an element id to accessibilityLabelledBy. Alternatively, you may directly provide a contextual label to accessibilityLabel.

Basic example

Loading...

󰙡

Live Code

function DefaultModal() {
  const [visible, setVisible] = useState(false);
  const triggerRef = useRef(null);

  const toggleOn = useCallback(() => setVisible(true), []);
  const toggleOff = useCallback(() => setVisible(false), []);

  const handleClose = useCallback(() => {
    console.log('modal closing');
    toggleOff();
  }, [toggleOff]);

  const handleDidClose = useCallback(() => {
    if (triggerRef.current) {
      triggerRef.current.focus();
    }
  }, []);

  const onClickConsole = () => void console.log;

  const SelectComponent = () => {
    const [value, setValue] = useState('1');
    const options = [
      { value: '1', label: 'Option 1' },
      { value: '2', label: 'Option 2' },
      { value: '3', label: 'Option 3' },
      { value: '4', label: 'Option 4' },
      { value: '5', label: 'Option 5' },
      { value: '6', label: 'Option 6' },
    ];

    return (
      <Select
        label="Select an option"
        value={value}
        onChange={setValue}
        options={options}
        placeholder="Choose something..."
      />
    );
  };

  const primaryContent = (
    <VStack>
      <TextTitle1 as="h1">Fullscreen Modal</TextTitle1>
      <TextBody as="p">This is a test Fullscreen Modal with components composition.</TextBody>
      <ListCell
        title="Bitcoin"
        description="BTC"
        detail="$45,123"
        subdetail="+4.55%"
        variant="positive"
      />
      <SelectComponent />
      <HStack paddingY={3} gap={3}>
        <Button onClick={handleClose}>Yes</Button>
        <Button onClick={handleClose} variant="secondary">
          No
        </Button>
      </HStack>
    </VStack>
  );

  const secondaryContent = (
    <VStack borderRadius={300} elevation={1}>
      <Accordion defaultActiveKey="2">
        <AccordionItem itemKey="1" title="Accordion #1" subtitle="subtitle1">
          <TextBody as="p">{loremIpsum}</TextBody>
        </AccordionItem>
        <AccordionItem itemKey="2" title="Accordion #2" subtitle="subtitle2">
          <TextBody as="p">{loremIpsum}</TextBody>
        </AccordionItem>
      </Accordion>
    </VStack>
  );

  return (
    <PortalProvider>
      <Button onClick={toggleOn} ref={triggerRef}>
        Open Modal
      </Button>
      <FullscreenModal
        visible={visible}
        onRequestClose={handleClose}
        onDidClose={handleDidClose}
        primaryContent={primaryContent}
        secondaryContent={secondaryContent}
        title="Modal title"
        closeAccessibilityLabel="Close"
      />
    </PortalProvider>
  );
}

Advanced layouts

For more complex layouts, including three-column structures with custom headers and footers, see the FullscreenModalLayout component examples. FullscreenModalLayout provides more flexibility for building custom modal layouts while FullscreenModal offers a simpler API for common two-column use cases.