You are viewing a PR preview for PR #1506

Agriculture Design System
Beta
Design System for the Export Service

Drawer

A drawer is a panel that slides in from the right side of the screen. The Drawer is overlayed on top of the main area of the page to capture the users attention while keeping the context of the current task.

View in FigmaView in StorybookView in Github
import { ... } from '@ag.ds-next/react/drawer';

Usage

Drawer components can be imported via the drawer entrypoint in the @ag.ds-next/react package.

For example:

import { ... } from '@ag.ds-next/react/drawer';

Props

Drawer Props
PropTypeDescription
onDismiss() => voidFunction to be called when the drawer is closed.
titlestringThe title of the drawer. It can span lines but should not be too long.
actions?ReactNodeThe actions to display at the bottom of the drawer. Typically a `ButtonGroup`.
children?ReactNode
isOpen?booleanDefault: "false"If true, the drawer will be displayed.
width?"md" | "lg"Default: "md"The width of the drawer.

Source

You can view the full source code for this package on Github.