Drawer

The <Drawer> component is a flexible UI element used to present additional content is a side-in panel, typically from the edge of the screen. Unlike dialogs, it doesn't block interaction with the rest of the page, making it ideal for non-modal interactions.

Key features of the <Drawer> component include customizable placemnt, adjustable sizes and abilitly to remain non-modal for uninterrupted page interaction.

Anatomy

A <Drawer> consists of an optinal title, content, actions. The title provides context for the user, while the content holds the main message or interactive elements like forms. The actions section contains controls such as buttons for confirming or cancelling.

Appearance

The appearance of a component can be customized using the variant and size props. These props adjust the visual style and dimensions of the component, available values are based on the active theme.

Variant

Size

The selected theme does not has any options for "variant".

Property	Type	Description
`variant`	`-`	The available variants of this component.
`size`	`xsmall \| small \| medium`	The available sizes of this component.

Usage

A drawer displays supplemental content without blocking the main page. It should feel lightweight, letting users access extra information or controls while continuing their workflow. Keep content clear and focused so the drawer enhances the task without becoming a distraction.

Use a drawer when

allowing users to adjust settings or view details without leaving the page,
keeping the main workflow uninterrupted,
presenting secondary or supporting content.

Don't

Avoid using a drawer when

needing critical confirmations or desctructive actions,
having deep navigation or complex multi-step flows,
the task requires full user attention or focus,
critical information must be acknowledged before continuing,

Secondary information

When users want more detail about an item without leaving the current view, a drawer is ideal. For instance, clicking on a ticket, order, or user could open a drawer with extended information and actions.

Preview

Code

Creation or editing flows

Drawers can host lightweight forms, like adding a new event, editing a profle, or adjusting settings, they let users complete taksks without losing context or navigating away.

Preview

Code

Contextual utilities

Drawers can provide utilities like quick help, a chat panel, or notes. These stay “on the side” and don’t interfere with the main content area.

Preview

Code

Filter

A common use case for drawers is displaying filter panels. Drawers provide a non-intrusive way to expose filtering options while keeping the main content visible and interactive. This allows users to adjust filters, apply changes, and immediately see updated results without leaving the page, for more information about the filter you can visit Filter pattern.

Placement

The <Drawer> can be placed on any edge of the screen using placement prop,, placement should relfect the type of content and user's workflow:

right(most common): details, contextual utilities.
left: navigaiton, or menus that help users to swich between different views.
top: lightweight global actions like notifications, announcements, or system alerts. Best for transient information that needs quick visibility but not long interaction.
bottom: short confirmation actions, quick reply forms, or pickers. Ideal for focused tasks that don’t require leaving the current screen.

Preview

Code

Props

Did you know? You can explore, test, and customize props live in Marigold's storybook. Watch the effects they have in real-time!

View Drawer stories

Drawer

aria-describedby?

string;

Identifies the element (or elements) that describes the object.

aria-details?

string;

Identifies the element (or elements) that provide a detailed, extended description for the object.

aria-label?

string;

Defines a string value that labels the current element.

aria-labelledby?

string;

Identifies the element (or elements) that labels the current element.

children?

ReactNode | ((opts: DialogRenderProps) => ReactNode);

Children of the dialog. A function may be provided to access a function to close the dialog.

closeButton?

boolean;

Show the close button.

dir?

string;

hidden?

boolean;

id?

string;

The element's unique identifier. See MDN.

inert?

boolean;

keyboardDismissable?

boolean;

lang?

string;

onAnimationEnd?

AnimationEventHandler<HTMLElement>;

onAnimationEndCapture?

AnimationEventHandler<HTMLElement>;

onAnimationIteration?

AnimationEventHandler<HTMLElement>;

onAnimationIterationCapture?

AnimationEventHandler<HTMLElement>;

onAnimationStart?

AnimationEventHandler<HTMLElement>;

onAnimationStartCapture?

AnimationEventHandler<HTMLElement>;

onAuxClick?

MouseEventHandler<HTMLElement>;

onAuxClickCapture?

MouseEventHandler<HTMLElement>;

onClick?

MouseEventHandler<HTMLElement>;

onClickCapture?

MouseEventHandler<HTMLElement>;

onContextMenu?

MouseEventHandler<HTMLElement>;

onContextMenuCapture?

MouseEventHandler<HTMLElement>;

onDoubleClick?

MouseEventHandler<HTMLElement>;

onDoubleClickCapture?

MouseEventHandler<HTMLElement>;

onGotPointerCapture?

PointerEventHandler<HTMLElement>;

onGotPointerCaptureCapture?

PointerEventHandler<HTMLElement>;

onLostPointerCapture?

PointerEventHandler<HTMLElement>;

onLostPointerCaptureCapture?

PointerEventHandler<HTMLElement>;

onMouseDown?

MouseEventHandler<HTMLElement>;

onMouseDownCapture?

MouseEventHandler<HTMLElement>;

onMouseEnter?

MouseEventHandler<HTMLElement>;

onMouseLeave?

MouseEventHandler<HTMLElement>;

onMouseMove?

MouseEventHandler<HTMLElement>;

onMouseMoveCapture?

MouseEventHandler<HTMLElement>;

onMouseOut?

MouseEventHandler<HTMLElement>;

onMouseOutCapture?

MouseEventHandler<HTMLElement>;

onMouseOver?

MouseEventHandler<HTMLElement>;

onMouseOverCapture?

MouseEventHandler<HTMLElement>;

onMouseUp?

MouseEventHandler<HTMLElement>;

onMouseUpCapture?

MouseEventHandler<HTMLElement>;

onPointerCancel?

PointerEventHandler<HTMLElement>;

onPointerCancelCapture?

PointerEventHandler<HTMLElement>;

onPointerDown?

PointerEventHandler<HTMLElement>;

onPointerDownCapture?

PointerEventHandler<HTMLElement>;

onPointerEnter?

PointerEventHandler<HTMLElement>;

onPointerLeave?

PointerEventHandler<HTMLElement>;

onPointerMove?

PointerEventHandler<HTMLElement>;

onPointerMoveCapture?

PointerEventHandler<HTMLElement>;

onPointerOut?

PointerEventHandler<HTMLElement>;

onPointerOutCapture?

PointerEventHandler<HTMLElement>;

onPointerOver?

PointerEventHandler<HTMLElement>;

onPointerOverCapture?

PointerEventHandler<HTMLElement>;

onPointerUp?

PointerEventHandler<HTMLElement>;

onPointerUpCapture?

PointerEventHandler<HTMLElement>;

onScroll?

UIEventHandler<HTMLElement>;

onScrollCapture?

UIEventHandler<HTMLElement>;

onTouchCancel?

TouchEventHandler<HTMLElement>;

onTouchCancelCapture?

TouchEventHandler<HTMLElement>;

onTouchEnd?

TouchEventHandler<HTMLElement>;

onTouchEndCapture?

TouchEventHandler<HTMLElement>;

onTouchMove?

TouchEventHandler<HTMLElement>;

onTouchMoveCapture?

TouchEventHandler<HTMLElement>;

onTouchStart?

TouchEventHandler<HTMLElement>;

onTouchStartCapture?

TouchEventHandler<HTMLElement>;

onTransitionCancel?

TransitionEventHandler<HTMLElement>;

onTransitionCancelCapture?

TransitionEventHandler<HTMLElement>;

onTransitionEnd?

TransitionEventHandler<HTMLElement>;

onTransitionEndCapture?

TransitionEventHandler<HTMLElement>;

onTransitionRun?

TransitionEventHandler<HTMLElement>;

onTransitionRunCapture?

TransitionEventHandler<HTMLElement>;

onTransitionStart?

TransitionEventHandler<HTMLElement>;

onTransitionStartCapture?

TransitionEventHandler<HTMLElement>;

onWheel?

WheelEventHandler<HTMLElement>;

onWheelCapture?

WheelEventHandler<HTMLElement>;

open?

boolean;

Whether the overlay is open by default (controlled).

Defaults to:

"undefined"

placement?

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

The placement of the drawer on the screen.

Defaults to:

"right"

role?

"region" |
  "search" |
  "navigation" |
  "form" |
  "banner" |
  "contentinfo" |
  "complementary";

The role property sets the ARIA landmark role for this component, enhancing accessibility by clarifying its purpose to assistive technologies. Only ARIA landmark roles (e.g., "complementary", "search", "banner", "navigation") can be used to ensure proper semantic context. Defaults to "complementary" for secondary content (e.g., filters, sidebar) that supports the main content.

Defaults to:

"complementary"

slot?

string | null;

A slot name for the component. Slots allow the component to receive props from a parent component. An explicit null value indicates that the local props completely override all props received from a parent.

translate?

"yes" | "no";

Drawer.Trigger

children

ReactNode;

defaultOpen?

boolean;

Whether the overlay is open by default (uncontrolled).

onOpenChange?

(isOpen: boolean) => void;

Handler that is called when the overlay's open state changes.

open?

boolean;

Whether the overlay is open by default (controlled).

Defaults to:

"false"

Dialog

Learn more about Dialog component.

Filter Pattern

Represents the usage of filter pattern.

Last update: 9 minutes ago

Key features of the <Drawer> component include customizable placemnt, adjustable sizes and abilitly to remain non-modal for uninterrupted page interaction.

Anatomy

Appearance

Variant

Size

The selected theme does not has any options for "variant".

Property	Type	Description
`variant`	`-`	The available variants of this component.
`size`	`xsmall \| small \| medium`	The available sizes of this component.

Usage

Use a drawer when

allowing users to adjust settings or view details without leaving the page,
keeping the main workflow uninterrupted,
presenting secondary or supporting content.

Don't

Avoid using a drawer when

needing critical confirmations or desctructive actions,
having deep navigation or complex multi-step flows,
the task requires full user attention or focus,
critical information must be acknowledged before continuing,

Secondary information

Preview

Code

Creation or editing flows

Drawers can host lightweight forms, like adding a new event, editing a profle, or adjusting settings, they let users complete taksks without losing context or navigating away.

Preview

Code

Contextual utilities

Drawers can provide utilities like quick help, a chat panel, or notes. These stay “on the side” and don’t interfere with the main content area.

Preview

Code

Filter

Placement

The <Drawer> can be placed on any edge of the screen using placement prop,, placement should relfect the type of content and user's workflow:

right(most common): details, contextual utilities.
left: navigaiton, or menus that help users to swich between different views.
top: lightweight global actions like notifications, announcements, or system alerts. Best for transient information that needs quick visibility but not long interaction.
bottom: short confirmation actions, quick reply forms, or pickers. Ideal for focused tasks that don’t require leaving the current screen.

Preview

Code

Props

Did you know? You can explore, test, and customize props live in Marigold's storybook. Watch the effects they have in real-time!

View Drawer stories

Drawer

aria-describedby?

string;

Identifies the element (or elements) that describes the object.

aria-details?

string;

Identifies the element (or elements) that provide a detailed, extended description for the object.

aria-label?

string;

Defines a string value that labels the current element.

aria-labelledby?

string;

Identifies the element (or elements) that labels the current element.

children?

ReactNode | ((opts: DialogRenderProps) => ReactNode);

Children of the dialog. A function may be provided to access a function to close the dialog.

closeButton?

boolean;

Show the close button.

dir?

string;

hidden?

boolean;

id?

string;

The element's unique identifier. See MDN.

inert?

boolean;

keyboardDismissable?

boolean;

lang?

string;

onAnimationEnd?

AnimationEventHandler<HTMLElement>;

onAnimationEndCapture?

AnimationEventHandler<HTMLElement>;

onAnimationIteration?

AnimationEventHandler<HTMLElement>;

onAnimationIterationCapture?

AnimationEventHandler<HTMLElement>;

onAnimationStart?

AnimationEventHandler<HTMLElement>;

onAnimationStartCapture?

AnimationEventHandler<HTMLElement>;

onAuxClick?

MouseEventHandler<HTMLElement>;

onAuxClickCapture?

MouseEventHandler<HTMLElement>;

onClick?

MouseEventHandler<HTMLElement>;

onClickCapture?

MouseEventHandler<HTMLElement>;

onContextMenu?

MouseEventHandler<HTMLElement>;

onContextMenuCapture?

MouseEventHandler<HTMLElement>;

onDoubleClick?

MouseEventHandler<HTMLElement>;

onDoubleClickCapture?

MouseEventHandler<HTMLElement>;

onGotPointerCapture?

PointerEventHandler<HTMLElement>;

onGotPointerCaptureCapture?

PointerEventHandler<HTMLElement>;

onLostPointerCapture?

PointerEventHandler<HTMLElement>;

onLostPointerCaptureCapture?

PointerEventHandler<HTMLElement>;

onMouseDown?

MouseEventHandler<HTMLElement>;

onMouseDownCapture?

MouseEventHandler<HTMLElement>;

onMouseEnter?

MouseEventHandler<HTMLElement>;

onMouseLeave?

MouseEventHandler<HTMLElement>;

onMouseMove?

MouseEventHandler<HTMLElement>;

onMouseMoveCapture?

MouseEventHandler<HTMLElement>;

onMouseOut?

MouseEventHandler<HTMLElement>;

onMouseOutCapture?

MouseEventHandler<HTMLElement>;

onMouseOver?

MouseEventHandler<HTMLElement>;

onMouseOverCapture?

MouseEventHandler<HTMLElement>;

onMouseUp?

MouseEventHandler<HTMLElement>;

onMouseUpCapture?

MouseEventHandler<HTMLElement>;

onPointerCancel?

PointerEventHandler<HTMLElement>;

onPointerCancelCapture?

PointerEventHandler<HTMLElement>;

onPointerDown?

PointerEventHandler<HTMLElement>;

onPointerDownCapture?

PointerEventHandler<HTMLElement>;

onPointerEnter?

PointerEventHandler<HTMLElement>;

onPointerLeave?

PointerEventHandler<HTMLElement>;

onPointerMove?

PointerEventHandler<HTMLElement>;

onPointerMoveCapture?

PointerEventHandler<HTMLElement>;

onPointerOut?

PointerEventHandler<HTMLElement>;

onPointerOutCapture?

PointerEventHandler<HTMLElement>;

onPointerOver?

PointerEventHandler<HTMLElement>;

onPointerOverCapture?

PointerEventHandler<HTMLElement>;

onPointerUp?

PointerEventHandler<HTMLElement>;

onPointerUpCapture?

PointerEventHandler<HTMLElement>;

onScroll?

UIEventHandler<HTMLElement>;

onScrollCapture?

UIEventHandler<HTMLElement>;

onTouchCancel?

TouchEventHandler<HTMLElement>;

onTouchCancelCapture?

TouchEventHandler<HTMLElement>;

onTouchEnd?

TouchEventHandler<HTMLElement>;

onTouchEndCapture?

TouchEventHandler<HTMLElement>;

onTouchMove?

TouchEventHandler<HTMLElement>;

onTouchMoveCapture?

TouchEventHandler<HTMLElement>;

onTouchStart?

TouchEventHandler<HTMLElement>;

onTouchStartCapture?

TouchEventHandler<HTMLElement>;

onTransitionCancel?

TransitionEventHandler<HTMLElement>;

onTransitionCancelCapture?

TransitionEventHandler<HTMLElement>;

onTransitionEnd?

TransitionEventHandler<HTMLElement>;

onTransitionEndCapture?

TransitionEventHandler<HTMLElement>;

onTransitionRun?

TransitionEventHandler<HTMLElement>;

onTransitionRunCapture?

TransitionEventHandler<HTMLElement>;

onTransitionStart?

TransitionEventHandler<HTMLElement>;

onTransitionStartCapture?

TransitionEventHandler<HTMLElement>;

onWheel?

WheelEventHandler<HTMLElement>;

onWheelCapture?

WheelEventHandler<HTMLElement>;

open?

boolean;

Whether the overlay is open by default (controlled).

Defaults to:

"undefined"

placement?

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

The placement of the drawer on the screen.

Defaults to:

"right"

role?

"region" |
  "search" |
  "navigation" |
  "form" |
  "banner" |
  "contentinfo" |
  "complementary";

Defaults to:

"complementary"

slot?

string | null;

translate?

"yes" | "no";

Drawer.Trigger

children

ReactNode;

defaultOpen?

boolean;

Whether the overlay is open by default (uncontrolled).

onOpenChange?

(isOpen: boolean) => void;

Handler that is called when the overlay's open state changes.

open?

boolean;

Whether the overlay is open by default (controlled).

Defaults to:

"false"

Dialog

Learn more about Dialog component.

Filter Pattern

Represents the usage of filter pattern.

Last update: 9 minutes ago