BlueStack.io - Component Library

drawer Component

Drawer Class API Reference

Type	Class Options	Usage	Notes
Base	`drawer`	Required base class	Always required
Base	`drawer-overlay`	Overlay container	Wraps the drawer element
Position	`left`	Slides from left edge	Default position
	`right`	Slides from right edge	For filters/details
	`top`	Slides from top edge	For notifications
	`bottom`	Slides from bottom edge	Mobile action sheets
Size	`tiny`	240px / 20vh	Minimal content
	`small`	320px / 30vh	Simple forms
	(default)	400px / 40vh	No class needed
	`large`	600px / 60vh	Detailed forms
	`big`	800px / 80vh	Complex interfaces
	`fullscreen`	100% viewport	Full coverage
Color (Semantic)	(default)	Gray/neutral	No class needed
	`primary`	Main action color	Blue-based
	`positive`	Success/confirm	Green-based
	`negative`	Danger/delete	Red-based
	`warning`	Caution/alert	Yellow/orange-based
	`info`	Information	Blue-based
Overlay	`no-backdrop`	No overlay background	Transparent overlay
	`dark-backdrop`	Darker overlay	70% black opacity
	`light-backdrop`	Light overlay	70% white opacity

Drawer System

The drawer system provides sliding panels from screen edges. It requires three parts:

Trigger Button - A button with data-drawer="drawer-id" attribute
Drawer HTML - The drawer structure with matching id="drawer-id"
JavaScript - Automatically loaded via hygge.core.js (no setup needed!)

Position Variants

Left Drawer (Default)

Preview Code

Copy

<!-- Trigger Button -->
<button class="button primary" data-drawer="example-left">Open Left Drawer</button>

<!-- Drawer HTML -->
<div id="example-left" class="drawer-overlay hidden" aria-hidden="true">
  <div class="drawer left">
    <!-- 'left' is optional as it's default -->
    <div class="header">
      <div>
        <h3 class="title">Left Drawer</h3>
        <p class="description">Slides in from the left edge</p>
      </div>
      <button class="close">
        <i class="icon x w-4 h-4"></i>
      </button>
    </div>
    <div class="content">
      <p>This is a left-aligned drawer. Perfect for navigation menus.</p>
    </div>
    <div class="footer">
      <button class="button">Cancel</button>
      <button class="button primary">Save Changes</button>
    </div>
  </div>
</div>

Right Drawer

Preview Code

Copy

<!-- Trigger Button -->
<button class="button primary" data-drawer="example-right">Open Right Drawer</button>

<!-- Drawer HTML -->
<div id="example-right" class="drawer-overlay hidden" aria-hidden="true">
  <div class="drawer right">
    <div class="header">
      <h3 class="title">Right Drawer</h3>
      <button class="close">
        <i class="icon x w-4 h-4"></i>
      </button>
    </div>
    <div class="content">
      <p>Slides from right. Great for filters and settings.</p>
    </div>
    <div class="footer center">
      <button class="button primary">Close</button>
    </div>
  </div>
</div>

Top Drawer

Preview Code

Copy

<!-- Trigger Button -->
<button class="button primary" data-drawer="example-top">Open Top Drawer</button>

<!-- Drawer HTML -->
<div id="example-top" class="drawer-overlay hidden" aria-hidden="true">
  <div class="drawer top">
    <div class="header">
      <h3 class="title">Notification</h3>
      <button class="close">
        <i class="icon x w-4 h-4"></i>
      </button>
    </div>
    <div class="content">
      <p>Slides down from top. Perfect for notifications.</p>
    </div>
  </div>
</div>

Bottom Drawer

Preview Code

Copy

<!-- Trigger Button -->
<button class="button primary" data-drawer="example-bottom">Open Bottom Drawer</button>

<!-- Drawer HTML -->
<div id="example-bottom" class="drawer-overlay hidden" aria-hidden="true">
  <div class="drawer bottom">
    <div class="header">
      <h3 class="title">Actions</h3>
      <button class="close">
        <i class="icon x w-4 h-4"></i>
      </button>
    </div>
    <div class="content">
      <p>Slides up from bottom. Mobile-style action sheets.</p>
    </div>
    <div class="footer">
      <button class="button primary w-full">Select Option</button>
    </div>
  </div>
</div>

Size Variants

Tiny Drawer

Preview Code

Copy

<!-- Trigger Button -->
<button class="button" data-drawer="example-tiny">Tiny Drawer</button>

<!-- Drawer HTML -->
<div id="example-tiny" class="drawer-overlay hidden" aria-hidden="true">
  <div class="drawer tiny">
    <!-- Notice the 'tiny' class -->
    <div class="header">
      <h3 class="title">Tiny (240px)</h3>
      <button class="close">
        <i class="icon x w-4 h-4"></i>
      </button>
    </div>
    <div class="content">
      <p>Compact drawer for minimal content.</p>
    </div>
  </div>
</div>

Large Drawer

Preview Code

Copy

<!-- Trigger Button -->
<button class="button" data-drawer="example-large">Large Drawer</button>

<!-- Drawer HTML -->
<div id="example-large" class="drawer-overlay hidden" aria-hidden="true">
  <div class="drawer large">
    <!-- Notice the 'large' class -->
    <div class="header">
      <h3 class="title">Large (600px)</h3>
      <button class="close">
        <i class="icon x w-4 h-4"></i>
      </button>
    </div>
    <div class="content">
      <p>Large drawer for detailed forms or content.</p>
    </div>
  </div>
</div>

Fullscreen Drawer

Preview Code

Copy

<!-- Trigger Button -->
<button class="button" data-drawer="example-fullscreen">Fullscreen Drawer</button>

<!-- Drawer HTML -->
<div id="example-fullscreen" class="drawer-overlay hidden" aria-hidden="true">
  <div class="drawer fullscreen">
    <!-- Notice the 'fullscreen' class -->
    <div class="header">
      <h3 class="title">Fullscreen Drawer</h3>
      <button class="close">
        <i class="icon x w-4 h-4"></i>
      </button>
    </div>
    <div class="content">
      <p>Covers the entire viewport.</p>
    </div>
  </div>
</div>

Color Variants

Primary Drawer

Preview Code

Copy

<!-- Trigger Button -->
<button class="button primary" data-drawer="example-primary">Primary Drawer</button>

<!-- Drawer HTML -->
<div id="example-primary" class="drawer-overlay hidden" aria-hidden="true">
  <div class="drawer primary">
    <!-- Notice the 'primary' class -->
    <div class="header">
      <div class="icon-container">
        <i class="icon info-circle"></i>
      </div>
      <div>
        <h3 class="title">Primary Action</h3>
        <p class="description">Important information</p>
      </div>
      <button class="close">
        <i class="icon x w-4 h-4"></i>
      </button>
    </div>
    <div class="content">
      <p>Primary color scheme for main actions.</p>
    </div>
    <div class="footer">
      <button class="button">Cancel</button>
      <button class="button primary">Continue</button>
    </div>
  </div>
</div>

Negative Drawer

Preview Code

Copy

<!-- Trigger Button -->
<button class="button negative" data-drawer="example-negative">Danger Drawer</button>

<!-- Drawer HTML -->
<div id="example-negative" class="drawer-overlay hidden" aria-hidden="true">
  <div class="drawer negative">
    <!-- Notice the 'negative' class -->
    <div class="header">
      <div class="icon-container">
        <i class="icon alert-triangle"></i>
      </div>
      <div>
        <h3 class="title">Delete Confirmation</h3>
        <p class="description">This action cannot be undone</p>
      </div>
      <button class="close">
        <i class="icon x w-4 h-4"></i>
      </button>
    </div>
    <div class="content">
      <p>Are you sure you want to delete this item?</p>
    </div>
    <div class="footer">
      <button class="button">Cancel</button>
      <button class="button negative">Delete</button>
    </div>
  </div>
</div>

Form Example

Form Drawer

Preview Code

Copy

<!-- Trigger Button -->
<button class="button primary" data-drawer="example-form">Edit Profile</button>

<!-- Drawer HTML -->
<div id="example-form" class="drawer-overlay hidden" aria-hidden="true">
  <div class="drawer">
    <div class="header">
      <h3 class="title">Edit Profile</h3>
      <button class="close">
        <i class="icon x w-4 h-4"></i>
      </button>
    </div>
    <div class="content">
      <form class="space-y-4">
        <div>
          <label class="block text-sm font-medium text-gray-700 mb-1">Name</label>
          <input type="text" class="input" placeholder="Enter your name" />
        </div>
        <div>
          <label class="block text-sm font-medium text-gray-700 mb-1">Email</label>
          <input type="email" class="input" placeholder="Enter your email" />
        </div>
        <div>
          <label class="block text-sm font-medium text-gray-700 mb-1">Bio</label>
          <textarea class="textarea" rows="3" placeholder="Tell us about yourself"></textarea>
        </div>
      </form>
    </div>
    <div class="footer">
      <button class="button">Cancel</button>
      <button class="button primary" data-keep-open>Save Profile</button>
    </div>
  </div>
</div>

<button class="button primary" data-drawer="example-form">
    Edit Profile
</button>

<div id="example-form" class="drawer-overlay hidden" aria-hidden="true">
    <div class="drawer">
        <div class="header">
            <h3 class="title">Edit Profile</h3>
            <button class="close">
                <i class="icon x w-4 h-4"></i>
            </button>
        </div>
        <div class="content">
            <form class="space-y-4">
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Name</label>
                    <input type="text" class="input" placeholder="Enter your name">
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Email</label>
                    <input type="email" class="input" placeholder="Enter your email">
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Bio</label>
                    <textarea class="textarea" rows="3" placeholder="Tell us about yourself"></textarea>
                </div>
            </form>
        </div>
        <div class="footer">
            <button class="button">Cancel</button>
            <button class="button primary" data-keep-open>Save Profile</button>
        </div>
    </div>
</div>

JavaScript API

JavaScript Methods

Preview Code

Copy

// Open drawer Drawer.open('drawer-id'); Drawer.open('drawer-id', { position: 'right', size: 'large' }); // Close drawer Drawer.close('drawer-id'); // Toggle drawer Drawer.toggle('drawer-id'); // Close all drawers Drawer.closeAll(); // Check if drawer is open if (Drawer.isOpen('drawer-id')) { console.log('Drawer is open'); } // Event listeners document.getElementById('drawer-id').addEventListener('drawer:open', (e) => { console.log('Drawer opened', e.detail); }); document.getElementById('drawer-id').addEventListener('drawer:close', (e) => { console.log('Drawer closed', e.detail); });

// Open drawer Drawer.open('drawer-id'); Drawer.open('drawer-id', { position: 'right', size: 'large'
}); // Close drawer Drawer.close('drawer-id'); // Toggle drawer Drawer.toggle('drawer-id'); // Close
all drawers Drawer.closeAll(); // Check if drawer is open if (Drawer.isOpen('drawer-id')) {
console.log('Drawer is open'); } // Event listeners
document.getElementById('drawer-id').addEventListener('drawer:open', (e) => { console.log('Drawer
opened', e.detail); }); document.getElementById('drawer-id').addEventListener('drawer:close', (e) =>
{ console.log('Drawer closed', e.detail); });

Data Attributes

Advanced Trigger Options

Preview Code

Copy

<!-- Position and size via data attributes -->
<button
  class="button"
  data-drawer="my-drawer"
  data-drawer-position="right"
  data-drawer-size="large"
>
  Open Right Large Drawer
</button>

<!-- Prevent closing on overlay click -->
<div id="my-drawer" class="drawer-overlay hidden" aria-hidden="true" data-no-close-on-overlay>
  <div class="drawer">
    <!-- Drawer content -->
  </div>
</div>

<!-- Keep drawer open on button click -->
<button class="button primary" data-keep-open>Save without closing</button>

Interactive Examples

Usage Guidelines

Best Practices

Position: Use left for navigation, right for details/filters, top for notifications, bottom for mobile actions
Size: Choose based on content - tiny for menus, fullscreen for complex forms
Colors: Use semantic colors to convey meaning (positive for success, negative for danger)
Overlay: Clicking the overlay closes the drawer by default (can be disabled)
Keyboard: ESC key closes the drawer, Tab key is trapped within
Mobile: Swipe gestures are supported on touch devices
Accessibility: Proper ARIA attributes and focus management are built-in