Drawer

Guidelines
React API Reference
Blazor API Reference

Drawers provide a temporary surface that slides in from the bottom of the screen to reveal additional content, actions, or navigation options without leaving the current context.

Guidance

Aspect	Best Practice
Usage	Use drawers for secondary actions, forms, or content that doesn’t require full page navigation.
Content	Keep content focused and actionable. Avoid overwhelming users with too many options or dense information.
Behavior	Provide clear entry and exit animations. Allow dismissal via swipe down, tap outside, or explicit close action.
States	Clearly indicate when drawer is opening, open, or closing. Provide visual feedback for interactive elements within.
Feedback	Use a drag handle at the top and smooth animation transitions for a polished experience.
Examples	Action sheets, share menus, filter panels, quick forms, or supplementary navigation.

Best Practices

Clear Purpose: Each drawer should have a single, well-defined purpose.
Dismissible Design: Always provide multiple ways to close the drawer (swipe, tap outside, close button).
Appropriate Content: Use for content that supplements the main interface without replacing it.
Touch-Friendly: Ensure interactive elements are appropriately sized for touch interaction.
Logical Height: Size the drawer appropriately for its content—avoid making it unnecessarily tall.

Do’s and Don’ts

Do

Use for temporary, contextual content and actions.
Provide clear visual cues for interaction (drag handle, close button).
Support multiple dismissal methods (swipe, tap outside, ESC key).
Keep content focused and scannable.

Don't

Use for primary navigation or critical workflows.
Make drawers too tall or overwhelm with content.
Forget to provide clear exit paths.
Use for content that requires frequent access.

Additional Guidance

Psychological Impact:
- Contextual Continuity: Drawers maintain the user’s sense of place while providing additional functionality.
- Reduced Cognitive Load: By appearing on demand, drawers keep the main interface clean and focused.
- Natural Interaction: The slide-up gesture feels intuitive on mobile devices and translates well to desktop.

Import

import {
  Drawer,
  DrawerTrigger,
  DrawerContent,
  DrawerHeader,
  DrawerTitle,
  DrawerDescription,
  DrawerFooter,
  DrawerClose,
} from '@strongtie/design-system/drawer';

Usage

<Drawer>
  <DrawerTrigger>Open Drawer</DrawerTrigger>
  <DrawerContent>
    <DrawerHeader>
      <DrawerTitle>Drawer Title</DrawerTitle>
      <DrawerDescription>
        This is a description of the drawer.
      </DrawerDescription>
    </DrawerHeader>
    <div className="p-4">
      <p>Drawer content goes here.</p>
    </div>
    <DrawerFooter>
      <DrawerClose asChild>
        <Button variant="outline">Cancel</Button>
      </DrawerClose>
    </DrawerFooter>
  </DrawerContent>
</Drawer>

`<Drawer>` Props

shouldScaleBackground

boolean

default:"true"

If true, the background will scale when the drawer is opened.

defaultOpen

boolean

default:"false"

If true, the drawer will be open by default.

open

boolean

Controls the open state of the drawer.

onOpenChange

function

Callback function that is called when the open state changes.

direction

"top" | "bottom" | "left" | "right"

default:"bottom"

The direction from which the drawer appears.

If true, the drawer will be rendered in a modal.

nested

boolean

default:"false"

If true, the drawer is nested within another drawer.

dismissible

boolean

default:"true"

If true, the drawer can be dismissed.

`<DrawerPortal>` Props

forceMount

boolean

default:"false"

If true, the portal will be mounted even if the drawer is closed.

container

HTMLElement

default:"document.body"

The container in which the portal will be rendered.

`<DrawerOverlay>` Props

asChild

boolean

default:"false"

If true, the overlay will be rendered as a child of the drawer.

forceMount

boolean

default:"false"

If true, the overlay will be mounted even if the drawer is closed.

`<DrawerContent>` Props

forceMount

boolean

default:"false"

If true, the content will be mounted even if the drawer is closed.

onOpenAutoFocus

function

Event handler called when focus moves into the component after opening.

onCloseAutoFocus

function

Event handler called when focus moves out of the component after closing.

onEscapeKeyDown

function

Event handler called when the escape key is pressed.

onPointerDownOutside

function

Event handler called when a pointer event occurs outside the component.

onInteractOutside

function

Event handler called when an interaction occurs outside the component.

`<DrawerClose>`, `<DrawerTrigger>`, `<DrawerTitle>`, `<DrawerDescription>` Props

asChild

boolean

default:"false"

If true, the component will be rendered as a child of the drawer.

Usage Examples

<Drawer>
  <DrawerTrigger>Open Drawer</DrawerTrigger>
  <DrawerContent>
    <DrawerHeader>
      <DrawerTitle>Basic Drawer</DrawerTitle>
      <DrawerDescription>A simple drawer example.</DrawerDescription>
    </DrawerHeader>
    <div>
      <p>Drawer content goes here.</p>
    </div>
  </DrawerContent>
</Drawer>

Styling Classes

The following CSS classes are applied by the Drawer components:

drawer-overlay – Background overlay that appears behind the drawer.
drawer-content – Main container for the drawer content.
drawer-content-handle – The drag handle at the top of the drawer.
drawer-header – Container for the drawer title and description.
drawer-title – Title text styling.
drawer-description – Description text styling.
drawer-footer – Container for footer actions and buttons.

For more examples, visit the Storybook.

Example

<StudsButton Text="Open Drawer" ButtonStyle="ButtonStyle.Secondary" Click="@OpenDrawerDialog" />

@code {
    async Task OpenDrawerDialog()
    {
        await DialogService.OpenDrawerAsync<DialogContent>("Drawer Title",
            options: new DrawerDialogOptions {
                Description = "Drawer description",
                CloseDialogOnEsc = true
            });
    }
}

`DrawerDialogOptions` Parameters

Title

string

The title displayed on the dialog.

Description

string

Gets or sets the description text displayed under the title.

Draggable

bool

default:"true"

Gets or sets a value indicating whether the dialog is draggable.

AutoFocusFirstElement

bool

default:"false"

Gets or sets a value indicating whether to focus the first focusable HTML element.

CloseDialogOnOverlayClick

bool

default:"true"

Gets or sets a value indicating whether the dialog should be closed by clicking the overlay.

CloseDialogOnEsc

bool

default:"true"

Gets or sets a value indicating whether the dialog should be closed on ESC key press.

ShowTitle

bool

default:"true"

Gets or sets a value indicating whether to show the title bar.

Style

string

Gets or sets the CSS style of the dialog.

CssClass

string

Gets or sets dialog box custom class.

WrapperCssClass

string

Gets or sets the CSS classes added to the dialog’s wrapper element.

ContentCssClass

string

Gets or sets the CSS classes added to the dialog’s content element.

CloseTabIndex

int

default:"0"

Gets or sets a value the dialog escape tabindex.

ChildContent

RenderFragment<DialogService>

The content to display inside the drawer.

Attributes

Dictionary<string, object>

Specifies additional custom attributes that will be rendered by the component.

MouseEnter

EventCallback<ElementReference>

Gets or sets the callback that is invoked when the mouse enters an item.

MouseLeave

EventCallback<ElementReference>

Gets or sets the callback that is invoked when the mouse leaves an item.

A callback that will be invoked when the user right-clicks the component. Commonly used to display a context menu.

Culture

CultureInfo

default:"CultureInfo.CurrentCulture"

Gets or sets the culture used to display localizable data (numbers, dates). Set by default to “CultureInfo.CurrentCulture”.

Style

string

Gets or sets the inline CSS style.

Visible

bool

default:"true"

Gets or sets a value indicating whether this “T:Studs.StudsComponent” is visible. Invisible components are not rendered.

Usage Examples

<StudsButton Text="Open Basic Drawer" Click="@OpenBasicDrawer" />

@code {
    async Task OpenBasicDrawer()
    {
        await DialogService.OpenDrawerAsync("Basic Drawer",
            new Dictionary<string, object>(),
            new DrawerDialogOptions {
                Description = "A simple drawer example"
            });
    }
}

Styling Classes

The following CSS classes are applied by the Drawer components:

drawer – Root drawer container
dialog-grab-bar – The drag handle at the top of the drawer
dialog-header – Container for title and description
dialog-titlebar – Title bar container
dialog-title – Title text styling
dialog-description – Description text styling
dialog-content – Main content area
dialog-mask – Background overlay/mask

For more examples, visit the Storybook.

Getting Started

Foundations

Components

Integration Guides

Content

Guidance

Best Practices

Do’s and Don’ts

Do

Don't

Additional Guidance

`<Drawer>` Props

`<DrawerPortal>` Props

`<DrawerOverlay>` Props

`<DrawerContent>` Props

`<DrawerClose>`, `<DrawerTrigger>`, `<DrawerTitle>`, `<DrawerDescription>` Props

Usage Examples

Styling Classes

`DrawerDialogOptions` Parameters

Usage Examples

Styling Classes

Getting Started

Foundations

Components

Integration Guides

Content

​Guidance

​Best Practices

​Do’s and Don’ts

Do

Don't

​Additional Guidance

​<Drawer> Props

​<DrawerPortal> Props

​<DrawerOverlay> Props

​<DrawerContent> Props

​<DrawerClose>, <DrawerTrigger>, <DrawerTitle>, <DrawerDescription> Props

​Usage Examples

​Styling Classes

​DrawerDialogOptions Parameters

​Usage Examples

​Styling Classes

Guidance

Best Practices

Do’s and Don’ts

Additional Guidance

`<Drawer>` Props

`<DrawerPortal>` Props

`<DrawerOverlay>` Props

`<DrawerContent>` Props

`<DrawerClose>`, `<DrawerTrigger>`, `<DrawerTitle>`, `<DrawerDescription>` Props

Usage Examples

Styling Classes

`DrawerDialogOptions` Parameters

Usage Examples

Styling Classes