Skip to content

← All components

Navigation and interaction

Drawer

Edge-aligned modal sheet using the native dialog element.

Live example

Filter components

Narrow the component catalog.

Usage

Each example includes the complete adapter-specific parameter reference. Copy it as a starting point, then remove options your use case does not need.

React

tsx
import { Drawer } from "@cofob/design-system-react";

/**
 * Complete Drawer parameter reference.
 * @param open/defaultOpen
 *   type: boolean; controlled or initial state
 *   default: false
 *   example: true
 * @param onOpenChange
 *   type: (open: boolean) => void
 *   default: —
 *   example: {handleOpenChange}
 * @param trigger
 *   type: ReactNode | Svelte snippet with trigger controls
 *   default: —
 *   example: <Button>Open</Button> / trigger snippet
 * @param triggerLabel
 *   type: string
 *   default: "Open drawer"
 *   example: "Accessible label"
 * @param title
 *   type: string | renderable content
 *   required
 *   example: "No posts yet"
 * @param description
 *   type: string | renderable content
 *   default: —
 *   example: "Supporting context for this control."
 * @param footer
 *   type: ReactNode | Svelte snippet
 *   default: —
 *   example: <Button>Confirm</Button> / footer snippet
 * @param closeLabel
 *   type: string
 *   default: "Close drawer"
 *   example: "Accessible label"
 * @param side
 *   type: "left" | "right" | "top" | "bottom"
 *   default: "right"
 *   example: {side}
 * @param dialog attributes
 *   type: native element attributes
 *   default: —
 *   example: class / style / aria-* / data-*
 * @param children
 *   type: ReactNode | Svelte Snippet | child HTML
 *   default: —
 *   example: children / snippet / child HTML
 */
export function DrawerExample() {
  return (
    <Drawer trigger="Open filters" title="Filters">Content</Drawer>
  );
}

Svelte

svelte
<script lang="ts">
  import { Drawer } from "@cofob/design-system-svelte";

  // Complete Drawer parameter reference.
  // open/defaultOpen
  //   type: boolean; controlled or initial state
  //   default: false
  //   example: true
  // onOpenChange
  //   type: (open: boolean) => void
  //   default: —
  //   example: {handleOpenChange}
  // trigger
  //   type: ReactNode | Svelte snippet with trigger controls
  //   default: —
  //   example: <Button>Open</Button> / trigger snippet
  // triggerLabel
  //   type: string
  //   default: "Open drawer"
  //   example: "Accessible label"
  // title
  //   type: string | renderable content
  //   required
  //   example: "No posts yet"
  // description
  //   type: string | renderable content
  //   default: —
  //   example: "Supporting context for this control."
  // footer
  //   type: ReactNode | Svelte snippet
  //   default: —
  //   example: <Button>Confirm</Button> / footer snippet
  // closeLabel
  //   type: string
  //   default: "Close drawer"
  //   example: "Accessible label"
  // side
  //   type: "left" | "right" | "top" | "bottom"
  //   default: "right"
  //   example: {side}
  // dialog attributes
  //   type: native element attributes
  //   default: —
  //   example: class / style / aria-* / data-*
  // children
  //   type: ReactNode | Svelte Snippet | child HTML
  //   default: —
  //   example: children / snippet / child HTML
</script>

<Drawer title="Filters">{#snippet trigger({ open })}<Button onclick={open}>Open filters</Button>{/snippet}Content</Drawer>

HTML

html
<!--
  Complete Drawer parameter reference.
  open/defaultOpen
    type: boolean; controlled or initial state
    default: false
    example: true
  onOpenChange
    type: (open: boolean) => void
    default: —
    example: {handleOpenChange}
  trigger
    type: ReactNode | Svelte snippet with trigger controls
    default: —
    example: <Button>Open</Button> / trigger snippet
  triggerLabel
    type: string
    default: "Open drawer"
    example: "Accessible label"
  title
    type: string | renderable content
    required
    example: "No posts yet"
  description
    type: string | renderable content
    default: —
    example: "Supporting context for this control."
  footer
    type: ReactNode | Svelte snippet
    default: —
    example: <Button>Confirm</Button> / footer snippet
  closeLabel
    type: string
    default: "Close drawer"
    example: "Accessible label"
  side
    type: "left" | "right" | "top" | "bottom"
    default: "right"
    example: {side}
  dialog attributes
    type: native element attributes
    default: —
    example: class / style / aria-* / data-*
  children
    type: ReactNode | Svelte Snippet | child HTML
    default: —
    example: children / snippet / child HTML
-->
<dialog class="cf-drawer" data-cf-drawer data-side="right">Content</dialog>

<script type="module">
  import { initDesignSystem } from "@cofob/design-system-css";

  const designSystem = initDesignSystem(document);
  window.addEventListener("pagehide", () => designSystem.destroy(), { once: true });
</script>

Parameters

Adapter differences are explicit. Native element attributes are forwarded in React and Svelte and can be written directly in HTML.

ParameterTypeDefaultAdaptersExampleDescription
open/defaultOpenboolean; controlled or initial statefalseReact · Svelte · HTMLtrueUse open/bind:open for controlled state or defaultOpen for initial state.
onOpenChange(open: boolean) => void—React · Svelte · HTML{handleOpenChange}Reports every user-driven open state transition.
triggerReactNode | Svelte snippet with trigger controls—React · Svelte · HTML<Button>Open</Button> / trigger snippetTrigger content; Svelte snippets receive accessible trigger controls.
triggerLabelstring"Open drawer"React · Svelte · HTML"Accessible label"Fallback accessible name when trigger content has no text.
titlerequiredstring | renderable contentrequiredReact · Svelte · HTML"No posts yet"Primary heading or accessible title.
descriptionstring | renderable content—React · Svelte · HTML"Supporting context for this control."Supporting explanatory content.
footerReactNode | Svelte snippet—React · Svelte · HTML<Button>Confirm</Button> / footer snippetOptional dialog action area.
closeLabelstring"Close drawer"React · Svelte · HTML"Accessible label"Accessible name for the dialog or toast close button.
side"left" | "right" | "top" | "bottom""right"React · Svelte · HTML{side}Edge from which the drawer enters.
dialog attributesnative element attributes—React · Svelte · HTMLclass / style / aria-* / data-*Forwards native class/style, accessibility, event, and data attributes to the root element.
childrenReactNode | Svelte Snippet | child HTML—React · Svelte · HTMLchildren / snippet / child HTMLIdiomatic adapter composition content.