Drawer

// Creation form: the form IS the body, so the submit button stays inside it.
<Drawer open={open} onOpenChange={setOpen}>
  <DrawerTrigger asChild>
    <Button priority="primary">Create malware</Button>
  </DrawerTrigger>
  <DrawerContent>
    <DrawerHeader
      title="Create a malware"
      actions={<Button priority="secondary">Create multiple entities</Button>}
    />
    <DrawerBody asChild>
      <form onSubmit={handleSubmit}>
        <Input label="Name" required />
        <Textarea label="Description" />
        <DrawerFooter>
          <DrawerClose asChild>
            <Button priority="secondary">Cancel</Button>
          </DrawerClose>
          <Button type="submit" priority="primary">Create</Button>
        </DrawerFooter>
      </form>
    </DrawerBody>
  </DrawerContent>
</Drawer>

// Saving: busy blocks the close control, DrawerClose, Escape and the outside click.
<DrawerContent busy={isSubmitting}>
  <DrawerHeader title="Update the malware" />
  <DrawerBody asChild>
    <form onSubmit={handleSubmit}>
      <fieldset disabled={isSubmitting} className="contents">…fields…</fieldset>
      <DrawerFooter>
        <DrawerClose asChild>
          <Button priority="secondary">Cancel</Button>
        </DrawerClose>
        <Button type="submit" priority="primary" loading={isSubmitting}>Save</Button>
      </DrawerFooter>
    </form>
  </DrawerBody>
</DrawerContent>

// Header extras: overline (category), badge or chip, people, actions.
<DrawerHeader
  overline="Risk scenario"
  title={entity.name}
  badge={<Chip label="CVSS 9.8" severity="critical" />}
  avatars={<AvatarGroup items={viewers} aria-label="Users viewing this entity" />}
  actions={
    <>
      <IconButton icon={<Icon name="refresh-cw" aria-hidden />} aria-label="Refresh" priority="tertiary" />
      <IconButton icon={<Icon name="ellipsis-vertical" aria-hidden />} aria-label="More actions" priority="tertiary" />
    </>
  }
/>

// Tabs: the list stays fixed in the sub-header, each panel scrolls in the body.
<DrawerContent>
  <DrawerHeader title="Update the malware" />
  <DrawerTabs defaultValue="overview">
    <DrawerSubHeader>
      <TabsList>
        <TabsTrigger value="overview">Overview</TabsTrigger>
        <TabsTrigger value="details">Details</TabsTrigger>
      </TabsList>
    </DrawerSubHeader>
    <DrawerBody>
      <TabsContent value="overview">…</TabsContent>
      <TabsContent value="details">…</TabsContent>
    </DrawerBody>
  </DrawerTabs>
</DrawerContent>

// List drawer: search and creation buttons stay visible while the list scrolls.
<DrawerContent>
  <DrawerHeader title="Add entities" />
  <DrawerSubHeader>
    <SearchField placeholder="Search…" />
    <Button priority="primary">Create</Button>
  </DrawerSubHeader>
  <DrawerBody>{results}</DrawerBody>
</DrawerContent>

// Second level: opened from the first drawer, at least as wide, back control
// instead of the close control. Escape and the outside click go back to level 1.
// The opener is the nested Drawer's own DrawerTrigger, so focus returns to it.
<DrawerContent size="md">
  <DrawerHeader title="Add individuals" />
  <DrawerBody>
    <Drawer open={creating} onOpenChange={setCreating}>
      <DrawerTrigger asChild>
        <Button priority="primary">Create an individual</Button>
      </DrawerTrigger>
      <DrawerContent size="md">
        <DrawerHeader title="Create an individual" />
        <DrawerBody>…</DrawerBody>
      </DrawerContent>
    </Drawer>
  </DrawerBody>
</DrawerContent>

// Loading the drawer's data: a Spinner in the body, no footer.
<DrawerContent>
  <DrawerHeader title="Malware" />
  <DrawerBody className="items-center justify-center">
    <Spinner label="Loading" />
  </DrawerBody>
</DrawerContent>