Skip to main content

Drawer

Component
Live

The Drawer component provides quick access to additional content without cluttering the main interface.

FigmaCode

Usage​

The Drawer component enhances user experience by providing a space-efficient way to access additional content without cluttering the main interface. Triggered by a button or link button, it allows users to focus on primary tasks while keeping supplementary information easily accessible, improving navigation and reducing cognitive load. The Drawer comes in 2 variants, default and hug. These determine if the drawer expands the full height of the viewport or vertically hugs the content. The variant should be selected based on the content and use case.

Installation​

Install

yarn add @iag/chroma-react-ui.components

Import

import { Drawer } from "@iag/chroma-react-ui.components";

When to use​

Drawers can be used for:

  • Supporting Information: Showing extra details, such as user profiles, settings, or help sections, that aren't always needed on the main screen.
  • Navigation Menus: Housing navigation links, especially in mobile or responsive designs.
  • Filters: Displaying filters that users can adjust without leaving the current page.

When to avoid​

Avoid for:

  • Critical Information: Avoid for content that users need to see immediately or frequently, as it may be overlooked.
  • Complex Interactions: Avoid if the content within the drawer requires complex interactions or multiple steps, it might be better suited to a dedicated page.
  • Performance Concerns: Avoid in cases where loading the drawer content could significantly impact performance, consider alternative solutions.

Do

  • Use descriptive labels for the drawer trigger and any interactive elements within the drawer.
  • Keep the content within the drawer short, brief, and descriptive.

Don't

  • Overuse drawers as they interrupt the natural flow of the user through the page and add extra clicks to retrieve information. Only use when necessary.
  • Overload with content as too much information in the drawer may overwhelm users.
  • Hide critical Information or actions in the drawer that users need to access frequently.