Component primitive

Brand Drawer

<brand-drawer> keeps supporting tasks beside the current page. Every placement includes a visible close control, Escape handling, and focus containment.

<brand-drawer>Framework-agnostic custom element

Light themeSemantic surface

Dark themeSame component API

Element: <brand-drawer>
Library: Brand
Runtime: Web Component
Theming: Semantic tokens

Placements

End (right)

Start (left)

Top

Bottom

Slides in from the end edge (right in LTR, left in RTL).

Cancel

Save

Slides in from the start edge.

Slides down from the top.

Slides up from the bottom.

Form inside a drawer

Edit profile

Engineering

Operations

Sales

Cancel

Save

Usage

import { BrandDrawer } from '@brandos/ui';

<brand-drawer label="Settings" placement="end" id="settings">
  <p>Drawer body.</p>
  <brand-button slot="footer" variant="primary">Save</brand-button>
</brand-drawer>

document.getElementById('settings').show();