Drawer
A panel that slides in from the edge of the screen.
A panel that slides in from the edge of the screen.
import { Button, Drawer, IconButton } from '@tacos-ui/react';
import { XIcon } from 'lucide-react';
export const Demo = (props: Drawer.RootProps) => {
return (
<Drawer.Root {...props}>
<Drawer.Trigger asChild>
<Button>Open Drawer</Button>
</Drawer.Trigger>
<Drawer.Backdrop />
<Drawer.Positioner>
<Drawer.Content>
<Drawer.Header>
<Drawer.Title>Title</Drawer.Title>
<Drawer.Description>Description</Drawer.Description>
<Drawer.CloseTrigger asChild position="absolute" right="4" top="3">
<IconButton variant="ghost">
<XIcon />
</IconButton>
</Drawer.CloseTrigger>
</Drawer.Header>
<Drawer.Body>{/* Content */}</Drawer.Body>
<Drawer.Footer gap="3">
<Drawer.CloseTrigger asChild>
<Button variant="outline">Cancel</Button>
</Drawer.CloseTrigger>
<Button>Primary</Button>
</Drawer.Footer>
</Drawer.Content>
</Drawer.Positioner>
</Drawer.Root>
);
};