Drawer

Overlay

A compound side drawer that slides in from any edge. Composed of DsDrawerHeader, DsDrawerContent and DsDrawerFooter sub-components for a structured layout.

Props

Prop	Type	Default	Description
`modelValue`	`boolean`	`false`	Controls the open/closed state. Use v-model.
`side`	`"left" \| "right" \| "bottom" \| "top"`	`"right"`	Edge from which the drawer slides in.
`size`	`"sm" \| "md" \| "lg" \| "xl" \| "full"`	`"md"`	Width (left/right) or height (top/bottom) of the drawer.
`class`	`string`	`–`	Additional CSS classes for the panel.

Examples

Side options

vue

<script setup lang="ts">
const open = ref(false)
const side = ref('right')
</script>
<template>
  <DsButton @click="side = 'right'; open = true">Open drawer</DsButton>

  <DsDrawer v-model="open" :side="side" size="md">
    <DsDrawerHeader title="User settings" description="Manage your account preferences." />
    <DsDrawerContent>
      <p class="text-sm text-ds-fg-muted">Drawer content goes here.</p>
    </DsDrawerContent>
    <DsDrawerFooter>
      <DsButton variant="outline" class="flex-1" @click="open = false">Cancel</DsButton>
      <DsButton class="flex-1" @click="open = false">Save changes</DsButton>
    </DsDrawerFooter>
  </DsDrawer>
</template>

Skeleton

Use DsDrawerSkeleton as a loading placeholder while content is being fetched.

Default (right)

vue

<DsDrawerSkeleton />

With more rows

vue

<DsDrawerSkeleton :rows="6" />

Accessibility

role="dialog" and aria-modal="true" are set on the overlay container.
Pressing Escape closes the drawer.
Clicking the backdrop closes the drawer.
Focus is managed — trap focus inside the drawer when open.
The close button has an aria-label="Close drawer".

ConfirmDialog

Command Palette