Quillo.qweComponents

Tags

#feedback

38 components tagged feedback. Narrow them down with a search or more tags.

Typography 1

CalloutA highlighted aside with an icon and a title, as a note, tip, warning, important point or caution.typographydocumentfeedbackno-js6 views · 6 downloads

Forms 3

NpsInputThe eleven scores 0 to 10 of a Net Promoter question in a row, with the words at the ends: real radios posted with a form.formsinputfeedbackno-js5 views · 7 downloadsPasswordStrengthA new-password field with a meter that fills as it gets stronger and a checklist of rules ticked as they are met.formsinputsecurityfeedbackinteractive5 views · 4 downloadsPollVote for one option with a tap and see the results as bars with each one's share; the vote also goes in a hidden input.formsbuttonsocialfeedbackinteractive6 views · 6 downloads

Feedback 26

AlertA message in the page in six tones and three variants, with an icon, announced to screen readers, and dismissable.feedbackstatusno-js5 views · 9 downloadsBadgeA small pill for a status or a count: six tones, soft, solid or outline, a status dot, and 99+.feedbackstatusno-js8 views · 6 downloadsBannerAn announcement across the top of the page in six tones, with a link, closed for the session once dismissed.feedbacknotificationpageno-js7 views · 6 downloadsCoachmarkA small callout pointing at an element by id, explaining it once, dismissed with Got it; several make a tour.feedbackpopovernotificationinteractive6 views · 8 downloadsConnectionStatusSays when the browser goes offline, as a bar across the top or a pill, and that it is back online for a moment.feedbackstatusnotificationinteractive6 views · 7 downloadsCookieConsentA cookie banner with accept, reject and settings by category, remembering the choice in localStorage.feedbacknotificationsettingssecurityinteractive6 views · 7 downloadsEmptyStateWhat a list or page shows when there is nothing in it yet, with an icon and what to do next.feedbackpageno-js6 views · 7 downloadsErrorPageA 404 or 500 page: the code large, what it means, a search box if wanted, and links to go on from.feedbackpagestatusnavigationno-js5 views · 7 downloadsInlineMessageA small one-line message with an icon for its tone (info, success, warning, error), to sit in a form or beside a control.feedbackstatusformstextno-js5 views · 8 downloadsLoadingDotsThree dots bouncing in turn, inline, for something short that is on its way; screen readers hear the label.feedbackloadingstatusanimationno-js5 views · 7 downloadsLoadingOverlayCovers its content with a spinner and a message while something is busy, keeping the content in place but out of reach.feedbackloadingstatusoverlayno-js5 views · 6 downloadsMeterA measurement within a range, coloured green, amber or red by whether it is where it should be, as segments or one bar.feedbackprogressno-js4 views · 8 downloadsNewBadgeA small New, Beta or Updated label beside an item, in tones and variants, that stops showing after a date.feedbackstatusmarketingno-js5 views · 7 downloadsNoticesThe styles for Quillo's own notify() toasts and ask() dialogs, in every tone and position.feedbacktoastdialogno-js5 views · 6 downloadsNotificationDotA small dot or a count on the corner of anything, in tones and four positions, with a label for screen readers.feedbacknotificationstatusno-js5 views · 7 downloadsProgressHow far along something is, as a bar or a ring, with its percentage, or indeterminate.feedbackprogressloadingno-js5 views · 7 downloadsProgressRingCircular progress in four sizes, with its percentage or a value of your own in the middle, or turning while not known.feedbackprogressno-js6 views · 8 downloadsResultPageA whole page that says how something ended: an icon for the outcome, a title, text and what to do next.feedbackpagestatussectionno-js5 views · 4 downloadsSaveStatusSaving…, Saved, Unsaved changes or Could not save, with an icon, the time last saved and an optional action.feedbackstatustimeno-js5 views · 6 downloadsSkeletonGrey shapes where content will be while it loads: text lines, boxes, circles, and a card.feedbackloadingno-js6 views · 6 downloadsSkeletonTableA table of grey bars in rows and columns, with a header row, while a table's data loads.feedbackloadingtabledatano-js4 views · 7 downloadsSkeletonTextGrey lines in the shape of a paragraph, with a heading and several paragraphs if asked, while text loads.feedbackloadingtextno-js5 views · 5 downloadsSnackbarA short message along the bottom of the window with one action, shown from anywhere by calling snackbar_show().feedbacknotificationtoaststatusinteractive6 views · 6 downloadsSpinnerA loading spinner with a label for screen readers; it pulses instead of turning with reduced motion.feedbackloadingno-js6 views · 7 downloadsStatusDotA coloured dot and a word for the state of a person or a service, with an optional pulse, said to screen readers.feedbackstatusno-js4 views · 8 downloadsUploadProgressOne file's upload: name, bytes sent of its size, speed, time left, a bar, and Cancel; done, paused and error states.feedbackprogressuploadfileno-js4 views · 8 downloads

Overlays 2

AlertDialogA modal that only informs, with one OK button, on the browser's own <dialog> and no JavaScript.dialogoverlayfeedbackno-js6 views · 7 downloadsToastA stack of toasts any component adds with toast_show(): tones, an action button, and timers that hold on hover.toastnotificationfeedbackinteractive6 views · 7 downloads

Data 1

TagA chip for labels and filters people pick: tones, links, a dot, toggles and a remove button.feedbackstatusno-js7 views · 6 downloads

Commerce 1

StockStatusIn stock, only a few left, out of stock, pre-order or back-order, with a coloured dot and the count.commercestatusfeedbackno-js7 views · 5 downloads

News 1

CorrectionNoticeA correction, clarification, update, editor's note or retraction on a story, dated, with a link to the corrections policy; boxed on top or a line at the end.newsnoticearticlefeedbackno-js8 views · 7 downloads

Marketing 1

AnnouncementBarA slim bar at the top with one message, a badge and a link, closed for good once dismissed.marketingnotificationfeedbackpageinteractive6 views · 5 downloads

Mobile 2

RatePromptAsks for a rating only after real use, with limits on how often, and a route to send a problem instead.mobileinteractivetabletratingfeedbackstore2 views · 6 downloadsRetryBannerFailed loads with a back-off shown as a countdown, a Try now, cleared on success.mobileinteractiveofflineretryfeedbacktablet3 views · 6 downloads

Other tags

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