Brand
Changelogv1.4

Brand Drawer

<brand-drawer> wraps Shoelace's <sl-drawer>. Same modality as <brand-dialog> but slides in from a screen edge.

Placements

End (right)Start (left)TopBottom

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

CancelSave

Slides in from the start edge.

Slides down from the top.

Slides up from the bottom.

Form inside a drawer

Edit profile
CancelSave

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();