HextaUI

Sheet: Without the close button

Set showCloseButton={false} when the footer already has a way out. Escape, the backdrop and swiping still close it.

import { Button } from "@/components/ui/button"
import {
  Sheet,
  SheetClose,
  SheetContent,
  SheetDescription,
  SheetFooter,
  SheetHeader,
  SheetTitle,
  SheetTrigger,
} from "@/components/ui/sheet"

export function SheetNoCloseButton() {
  return (
    <Sheet>
      <SheetTrigger render={<Button variant="outline" />}>Share</SheetTrigger>
      <SheetContent side="bottom" showCloseButton={false}>
        <SheetHeader>
          <SheetTitle>Share link</SheetTitle>
          <SheetDescription>
            Anyone with the link can view this document.
          </SheetDescription>
        </SheetHeader>
        <SheetFooter>
          <SheetClose render={<Button />}>Done</SheetClose>
        </SheetFooter>
      </SheetContent>
    </Sheet>
  )
}

This adds the example as components/examples/sheet/no-close-button.tsx, together with the Sheet component and the HextaUI theme tokens it needs.

pnpm dlx shadcn@latest add https://hextaui.com/r/sheet-no-close-button.json

To add only the component, follow the Sheet installation.

Props in this example

The Sheet props this example sets, from the API reference.

PropTypeDefault
render
ReactElement | (props, state) => ReactElement<button>
PropTypeDefault
side
"top" | "right" | "bottom" | "left""right"
showCloseButton
booleantrue
PropTypeDefault
render
ReactElement | (props, state) => ReactElement<button>

Every prop is in the Sheet API reference.

See them all, with keyboard support and accessibility notes, on the Sheet page.