Overlays

Everything drawn above the page: modal dialogs and side panels, drop-downs and context menus, tooltips and the selector.

Overview

The following components are available:

Component	Description
Aside	Panel that slides in from the side of the viewport, with a header and a scrolling body.
AsideHeader	Title bar of a side panel or a dialog, with a back arrow, extra icons and the close cross.
AvatarEditorDialog	Modal that frames an uploaded picture: the kit's crop window between a title and a save and cancel pair.
Backdrop	Full-screen layer behind an overlay, transparent by default, that catches the click meant to close it.
ContextMenu	Menu opened at the pointer through a ref, with submenus, a mobile sheet form and working keyboard navigation.
DropDownItem	One row of a dropdown menu: a label, an optional icon and badges, or a separator.
DropDown	Menu anchored to a control, rendered in a portal and positioned against the element you point it at.
ModalDialog	Dialog rendered in a portal, as a centred modal or a side panel, assembled from Header, Body, Footer and Container slots.
RoomLogoCoverDialog	Dialog for a room's generated logo: a colour from the palette and an optional glyph, over a live preview.
Selector	Panel for picking one or many things out of a list too long to render at once.
Tooltip	Floating hint attached to one or more anchors, rendered in a portal and positioned to stay in the viewport.