Drawer

A modal panel from the side or the bottom.

drawer.example.svelte

<script lang="ts">
  import { Button, Drawer, KeyValue } from '@onlywin/ui-svelte';

  let open = $state(false);
</script>

<Button onclick={() => (open = true)}>Round details</Button>
<Drawer bind:open title="Round r_8f2c91">
  <KeyValue
    layout="rows"
    items={[
      { label: 'Game', value: 'Fish on!' },
      { label: 'Bet', value: '€ 2.00' },
      { label: 'Win', value: '€ 18.40' },
    ]}
  />
</Drawer>

Usage

Do

Use it for details and filters that need room.

Don’t

Do not use it for short confirmations; use Modal.

Accessibility

The same native modal dialog as Modal, from a side of the screen.

Keyboard

Drawer keyboard interactions
Keys	Action
`Escape`	Close
`Tab, Shift+Tab`	Move focus inside

Props

The same props in both frameworks. In React, class is className, events are camelCase (onClick), content passed as Svelte snippets is a ReactNode prop, every bindable value has a default… twin for uncontrolled use, and elementRef reaches the DOM element.

Drawer props
Prop	Type	Default	Description
`children`	`Snippet`	—
`description`	`string`	—
`dismissible`	`boolean`	`true`
`footer`	`Snippet`	—
`onOpenChange`	`(open: boolean) => void`	—
`open`	`boolean`	`false`	Bindable in Svelte; `defaultOpen` in React.
`side`	`'bottom' \| 'left' \| 'right'`	`'right'`
`title` *required	`string`	—