Drawer

A panel that slides out from the edge of the screen. It can be useful when you need users to complete a task or view some details without leaving the current page.

  • Name@spark-ui/drawer
    Version0.2.1
    LicenseMIT
    npmgithubReported IssuesReport a bug
    • UsageProps

    Drawer#

    Contains all the parts of a drawer.

    AttributeTypeDescriptionDefault
    openboolean-null
    defaultOpenboolean-null
    onOpenChange(open: boolean) => void-null
    modalboolean-null

    Drawer.Trigger#

    The interactive element that opens the drawer.

    AttributeTypeDescriptionDefault
    asChildboolean-null

    Drawer.Portal#

    When used, portals your overlay and content parts into the body.

    AttributeTypeDescriptionDefault
    forceMounttrueUsed to force mounting when more control is needed. Useful when controlling animation with React animation libraries.null
    containerHTMLElement-null

    Drawer.Overlay#

    A layer that covers the inert portion of the view when the drawer is open.

    AttributeTypeDescriptionDefault
    forceMounttrueUsed to force mounting when more control is needed. Useful when controlling animation with React animation libraries.null
    asChildboolean-null

    Drawer.Content#

    Contains Header/Body/Footer to be rendered in the open drawer.

    AttributeTypeDescriptionDefault
    forceMounttrueUsed to force mounting when more control is needed. Useful when controlling animation with React animation libraries.null
    asChildboolean-null
    onEscapeKeyDown(event: KeyboardEvent) => voidEvent handler called when the escape key is down. Can be prevented.null
    onPointerDownOutside(event: PointerDownOutsideEvent) => voidEvent handler called when the a `pointerdown` event happens outside of the `DismissableLayer`. Can be prevented.null
    onFocusOutside(event: FocusOutsideEvent) => voidEvent handler called when the focus moves outside of the `DismissableLayer`. Can be prevented.null
    onInteractOutside(event: PointerDownOutsideEvent | FocusOutsideEvent) => voidEvent handler called when an interaction happens outside the `DismissableLayer`. Specifically, when a `pointerdown` event happens outside or focus moves outside of it. Can be prevented.null
    onOpenAutoFocus(event: Event) => voidEvent handler called when auto-focusing on open. Can be prevented.null
    onCloseAutoFocus(event: Event) => voidEvent handler called when auto-focusing on close. Can be prevented.null
    size"sm" | "md" | "lg"-md
    side"right" | "left" | "top" | "bottom"-right

    Drawer.Header#

    To use inside of Popover.Content. Sticky header inside the drawer.

    AttributeTypeDescriptionDefault
    classNamestring-null

    Drawer.Body#

    To use inside of Popover.Content. Main content of the drawer. Becomes scrollable when content is overflowing the screen.

    AttributeTypeDescriptionDefault
    classNamestring-null

    Drawer.Footer#

    To use inside of Popover.Content. Sticky footer to be rendered in the open drawer. Use it to render CTAs and make them accessible in every condition.

    This component does not have any props

    Drawer.CloseButton#

    The button that closes the drawer.

    AttributeTypeDescriptionDefault
    asChildboolean-null
    size"sm" | "md" | "lg"-md
    intent"main" | "alert" | "support" | "accent" | "basic" | "success" | "danger" | "info" | "neutral" | "surface"-neutral
    design"filled" | "outlined" | "tinted" | "ghost" | "contrast"-ghost

    Drawer.Title#

    An accessible title to be announced when the drawer is opened.

    AttributeTypeDescriptionDefault
    asChildboolean-null

    Drawer.Description#

    An optional accessible description to be announced when the drawer is opened.

    AttributeTypeDescriptionDefault
    asChildboolean-null