Drawer
Component for showing additional content alongside the main page.
The <Drawer> component is a flexible UI element used to present additional content in a slide-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 adjustable sizes and the ability to remain non-modal for uninterrupted page interaction.
Anatomy
A <Drawer> consists of an optional 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.
| 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.
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.
import { Button, Drawer, DrawerProps, Inline, Stack, Text,} from '@marigold/components';export default function (props: DrawerProps) { return ( <Drawer.Trigger> <Button>Open Ticket Details</Button> <Drawer {...props} size="medium"> <Drawer.Title>Ticket #4521 - Login Issue</Drawer.Title> <Drawer.Content> <Stack space={6}> <Text> <strong>Description:</strong> User reports being unable to log in after the latest update. Error message:{' '} <em>"Invalid session token."</em> </Text> <Stack space={2}> <Text> <strong>Status:</strong> Open </Text> <Text> <strong>Priority:</strong> High </Text> <Text> <strong>Assigned to:</strong> Jane Doe </Text> <Text> <strong>Created:</strong> Sep 12, 2025 </Text> <Text> <strong>Last Updated:</strong> Sep 15, 2025 </Text> </Stack> <Text> <strong>Customer Notes:</strong> "I tried resetting my password, but I’m still locked out." </Text> </Stack> </Drawer.Content> <Drawer.Actions> <Inline space={3}> <Button slot="close">Close</Button> <Button slot="close" variant="primary" onPress={() => alert('Ticket marked as resolved')} > Resolve Ticket </Button> </Inline> </Drawer.Actions> </Drawer> </Drawer.Trigger> );}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.
import { Button, Drawer, Stack, Switch, TextField } from '@marigold/components';export default function () { return ( <Drawer.Trigger> <Button>Settings</Button> <Drawer> <Drawer.Title>Settings</Drawer.Title> <Drawer.Content> <Stack space={3}> <TextField label="Display Name" placeholder="Enter your name" /> <TextField label="Email" placeholder="user@example.com" /> <Switch label="Enable Notifications" /> </Stack> </Drawer.Content> <Drawer.Actions> <Button slot="close">Cancel</Button> <Button slot="close" variant="primary"> Save Changes </Button> </Drawer.Actions> </Drawer> </Drawer.Trigger> );}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.
import { Button, Drawer, Link, Stack, Text } from '@marigold/components';export default function () { return ( <Drawer.Trigger> <Button>Open Help</Button> <Drawer> <Drawer.Title>Quick Help</Drawer.Title> <Drawer.Content> <Stack space={4}> <Text> Need assistance while handling tickets? Here are some quick links: </Text> <ul className="flex flex-col gap-3"> <li> <Link href="#">How to reset a user password</Link> </li> <li> <Link href="#"> Escalation policy for high-priority tickets </Link> </li> <li> <Link href="#">Troubleshooting login issues</Link> </li> </ul> </Stack> </Drawer.Content> <Drawer.Actions> <Button slot="close">Close</Button> </Drawer.Actions> </Drawer> </Drawer.Trigger> );}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.
Props
Drawer
Prop
Type
Drawer.Trigger
Prop
Type