Sheet
Provides the Drawer contract under the common Sheet name for task and detail panels.@gemologic/sheen · overlaysPlayground
<Sheet title="Task details" trigger="Open task" side="end"><Text>Current task</Text></Sheet>Variant matrix
Task sheet
side: start
side: end
Anatomy
- Package
@gemologic/sheen- Source
packages/ui/src/primitives/Drawer.tsx- Tokens
--sheen-color-bg-raised--sheen-color-bg-overlay--sheen-elevation-modal--sheen-duration-slow
Accessibility
Role: dialogKeyboard: Tab, Shift+Tab, EscapeDo
- Use Sheet for the same modal side-panel behavior when that name fits the product vocabulary.
Do not
- Do not use it for persistent AppShell navigation.
Generated props
| Name | Type | Default | Description |
|---|---|---|---|
side | DrawerSide | end | Logical viewport edge from which the panel enters. |
title * | string | — | Accessible panel title. |
contentId | string | — | Optional stable content element ID. |
trigger | string | — | Visible label for the opening button. |
description | string | — | Optional explanatory text associated with the panel. |
open | boolean | — | Controlled open state. |
defaultOpen | boolean | false | Uncontrolled initial open state. |
onOpenChange | ((open: boolean) => void) | undefined | — | Requests an open-state change. |
dismissible | boolean | true | Allows Escape, outside press, and the close action. |
closeLabel | string | — | Visible and accessible close label. |
initialFocus | (() => HTMLElement | undefined) | undefined | — | Resolves an enabled focus target inside the panel. |
returnFocus | (() => HTMLElement | undefined) | undefined | — | Resolves a surviving focus target after close. |
shortcutScope | string | — | Unique modal shortcut scope ID. |
class | string | — | Additional classes on panel content. |
footer | JSX.Element | — | App-owned footer actions beside close. |