Skip to content
This repository was archived by the owner on Jul 7, 2025. It is now read-only.
This repository was archived by the owner on Jul 7, 2025. It is now read-only.

Dialog.Footer missing from React Lib #849

Open
@maybebansky

Description

@maybebansky

According to the docs and storybook the Dialog should have a footer sub component: https://primer.style/react/storybook/?path=/story/components-dialog-features--repro-multistep-dialog-with-conditional-footer&globals=colorScheme:light

image

However this doenst seem to work:

import { Dialog, Box, Button, Textarea, FormControl } from "@primer/react";

export const Modal = () => {
  const handleSave = async () => {};

  return (
    <Dialog isOpen={true} onDismiss={() => {}} aria-labelledby="header">
      <Box>
        <Dialog.Header id="header">Header</Dialog.Header>

        <Box p={3}>
          <Box as="form">
            <FormControl>
              <FormControl.Label>Label</FormControl.Label>
              <Textarea name="value" block={true} />
            </FormControl>
          </Box>
          <Dialog.Footer>
            <Button variant="primary">Submit</Button>
          </Dialog.Footer>
        </Box>
      </Box>
    </Dialog>
  );
};

export default function Demo() {
  return (
    <Box p={20}>
      <Modal />
    </Box>
  );
}
error TS2339: Property 'Footer' does not exist on type 'ForwardRefExoticComponent<Omit<any, "ref"> & RefAttributes<HTMLDivElement>> & { Header: typeof DialogHeader; }'.

49           <Dialog.Footer

https://codesandbox.io/p/devbox/upbeat-wind-forked-jvjsty?file=%2Fsrc%2FDummy.tsx%3A1%2C1-34%2C1

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions