Quillo.qweComponents

Tags

#overlay

24 components tagged overlay. Narrow them down with a search or more tags.

Actions 1

DropdownMenuA button that opens a short list of links and actions; Escape or a click elsewhere closes it.menubuttonoverlayno-js6 views · 7 downloads

Feedback 2

LoadingOverlayCovers its content with a spinner and a message while something is busy, keeping the content in place but out of reach.feedbackloadingstatusoverlayno-js5 views · 5 downloadsTooltipA short note shown while something is hovered or focused, in CSS alone, on any of its four sides.overlaypopoverno-js5 views · 9 downloads

Overlays 17

AlertDialogA modal that only informs, with one OK button, on the browser's own <dialog> and no JavaScript.dialogoverlayfeedbackno-js6 views · 7 downloadsChatWidgetA chat button in the corner that opens a small chat panel, with replies from your server and a count for unseen ones.chatoverlaysocialinteractive4 views · 7 downloadsCommandPaletteCtrl+K opens a fuzzy search of commands and pages, grouped, with keys, recent picks and the arrow keys.overlaysearchkeyboardinteractive6 views · 8 downloadsDrawerA panel that slides in from an edge over the page, on the browser's own <dialog>.overlaynavigationinteractive6 views · 6 downloadsFlyoutA panel that opens beside its button at a chosen side, keeps open while you work in it, and closes on a click outside.popoveroverlayinteractive5 views · 10 downloadsFullscreenModalA dialog taking the whole window, with a bar holding close, its title and a main action, on the browser's <dialog>.dialogoverlaymobileinteractive5 views · 4 downloadsHoverCardA card of details on hover or focus, after a short wait, that stays under the pointer; Escape hides it.overlaypopoveruserno-js5 views · 6 downloadsLightboxThumbnails that open full-screen, with captions, a counter, the arrow keys, swipes and focus put back.overlaymediaimageinteractive5 views · 6 downloadsModalA dialog over the page, on the browser's own <dialog>: focus, Escape and screen readers handled.overlaydialogno-js6 views · 8 downloadsNotificationCenterA bell with the unread count, opening a panel of notifications to filter and mark read, one by one or all at once.notificationpopoveroverlayinteractive5 views · 6 downloadsPopoverA small panel of anything beside a button, on the browser's popover: Escape and clicks outside close it.overlaypopoverno-js5 views · 5 downloadsPromptDialogA modal asking for one text value with OK and Cancel, on the browser's own <dialog>; Enter submits, Escape cancels.dialogoverlayinputformsinteractive4 views · 5 downloadsQuickViewA Quick view button on a card that opens a preview of the item, its picture, price, text and actions, in a dialog.dialogcardcommerceoverlayinteractive5 views · 5 downloadsSearchOverlayA full-screen search with results as one types, grouped and marked, from a list or a server, opened with /.searchoverlaydialogkeyboardinteractive7 views · 5 downloadsShareSheetA bottom sheet with the ways to share a link: copy it, email, X, LinkedIn, WhatsApp and more, and the system's own.socialdialogoverlaymobileinteractive6 views · 4 downloadsSheetA bottom sheet on the browser's <dialog>: half or full height by its handle or a drag, Escape to close.overlaydialogmobileinteractive6 views · 5 downloadsSpotlightTourA guided tour that dims the page and lights one element at a time by id, with a card saying what it is.overlaydialogkeyboardinteractive5 views · 7 downloads

Navigation 1

ContextMenuA menu where an area is right-clicked, held or Shift+F10 is pressed, with shortcuts, separators and the arrow keys.menuoverlayinteractive5 views · 6 downloads

Mobile 3

AnchoredPopoverA popover with an arrow tied to its button on a tablet and a sheet on a phone, re-anchored on rotation and when a keyboard opens.mobiletabletinteractivepopoversheetoverlay3 views · 5 downloadsBottomSheetA sheet with peek, half and full stops, dragged by finger: it resists past its ends, snaps by speed, shares the finger with the list inside and rises above the keyboard.mobileinteractivesheetoverlaydetentsgesture4 views · 7 downloadsSlideOverA floating panel that slides over from either edge and stays while the page behind stays usable, moved between edges by drag.mobiletabletinteractivepaneloverlaydrag4 views · 7 downloads

Other tags

interactive504no-js370mobile211forms176tablet151data128smart100list84chart80commerce68input64navigation63layout59card57finance52gesture48media44dashboard42text39button38feedback38keyboard37social37marketing36table34typography32search31status31user31document30image28picker28link26page26time26banking25calendar24overlay24select24progress23trading22calculator21schedule21travel20grid19settings19menu18news18security18utility18offline17price17blogging16dialog16sheet16swipe15accessibility14drag14notification14tabs14upload14chat13checkout13filter13popover13file12loans12section12audio11loading11profile11coop10forex10icon10code9article8camera8developer8flights8form8print8record8validation8comment7location7onboarding7pricing7video7cart6json6theme6animation5barcode5field5health5keypad5map5planning5qr5scroll5sort5admin4analytics4clock4dates4editor4feed4header4live4notes4parser4photo4player4seo4share4statistics4subscription4toast4analysis3banner3billing3budget3checklist3compare3date3election3games3gloves3gps3haptics3monitoring3number3panes3payment3pen3rotation3sensor3sync3tasks3timeline3timer3toolbar3tracking3undo3units3update3url3voice3wheel3wizard3writing3alerts2balance2capacity2cards2colour2columns2csv2currency2dedupe2device2discount2draft2drawing2education2email2experiment2feeds2files2forecast2fuzzy2help2history2hotels2links2long-press2meetings2merge2messages2money2motion2network2otp2panel2payments2permission2permissions2photos2pin2pinch2query2questions2quiz2rating2reactions2refresh2reorder2report2responsive2retry2scanner2selection2shipping2sign-in2slider2split2stock2storage2store2stories2summary2svg2tax2ticket2till2timezone2tracker2transfer2version2wallet2zoom2accordion1activities1ads1agenda1aggregate1agile1alert1amount1annotate1anomaly1api1app-shell1approval1archive1assessment1audit1autosave1availability1back1backlog1backtest1badge1bank1bar1battery1bibliography1bill1bills1book1bracket1branching1browser1builder1bulk1bundle1business1buy1byline1campaign1carousel1cars1cash1change1changes1check1chips1citation1cleaning1clipboard1cloud1cohort1combobox1comments1compass1conditional1configurator1confirm1conflicts1contact1context-menu1contrast1conversion1converter1cooking1copy1cost1coupon1cron1curl1dark-mode1deadline1debt1decimal1decision1decode1delivery1dependencies1design1detents1diff1disclosure1documents1downloads1dst1duplicates1edit1emoji1empty1encoding1entropy1envelopes1error1event1expenses1explorer1export1fab1faq1fashion1first-run1fit1fixtures1flashcards1flashlight1flesch1floor-plan1formatter1formula1frame1fullscreen1funnel1gallery1game1generator1geofence1goals1grades1grammar1group1groups1guard1handwriting1haptic1heading1headline1heatmap1hours1http1i18n1iban1import1income1indicator1inference1insights1interest1invoice1ios1isbn1job1jsonpath1jwt1kanban1keywords1kiosk1league1learning1level1like1lint1loan1localization1lock1logs1lyrics1mail1margin1markdown1markup1master-detail1matching1memory1mention1modal1mortgage1music1natural1notch1notice1notifications1options1order1orientation1outlier1overflow1overtime1packing1pagination1passcode1password1paste1pattern1payoff1payroll1paywall1people1plans1podcast1pointer1policy1poll1power1preview1profiling1projects1properties1publishing1quality1queue1rail1ranked1ranking1readability1reader1receipt1recipe1recommendations1records1reference1refinance1regex1register1regression1reliability1reload1reply1resize1resources1restaurant1resume1retention1revision1rewards1rings1risk1roles1roster1rota1rules1salary1save-data1savings1schema1screen1seats1seeds1seek1series1shake1shortcuts1sidebar1signature1signup1sizing1slo1slug1splash1sports1spotlight1spreadsheet1sql1stack1staff1standings1startup1status-bar1stepper1steps1sticky1streaks1study1style1subscribe1subtotals1support1survey1switch1tags1team1teams1temperature1template1time-zones1tip1tldr1toggle1torch1tour1tournament1transit1translation1tree1trend1tutorial1typo1unread1unsaved1username1validate1vibrate1viewer1virtual1visualisation1vote1voting1wake-lock1warehouse1waveform1wcag1weather1weight1weights1widget1world1