[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"examples-content:\u002Fexamples\u002Fcomponents\u002Fnotification-element":3,"content-store-meta":-1},{"canonical_path":4,"template":5,"family":6,"indexable":7,"totals":8,"category":11,"seo":15,"breadcrumbs":19,"content":28,"examples":37,"showcases":350,"links":351,"dates":400},"\u002Fexamples\u002Fcomponents\u002Fnotification-element","collection","components",true,{"example_count":9,"app_count":10},308,184,{"id":12,"title":13,"description":14},247,"Notification Toast","See how interfaces provide brief feedback without replacing the current page. Explore how toast messages present a result, a related action, and an optional dismiss control.",{"title":16,"description":17,"og_image":18},"Notification Toast UI examples - Nicelydone","Notification Toast UI design examples from SaaS apps. See how interfaces provide brief feedback without replacing the current page. Explore how toast…","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F3be431ab-a28e-4768-9320-c2568c6fe157.png",[20,23,26],{"label":21,"to":22},"Examples","\u002Fexamples",{"label":24,"to":25},"SaaS UI component examples","\u002Fexamples\u002Fcomponents",{"label":27,"to":4},"Notification Toast UI examples",{"title":27,"eyebrow":29,"description":30,"sections":31,"body":35},"UI component category","Notification Toast UI design examples from SaaS apps. See how interfaces provide brief feedback without replacing the current page. Explore how toast messages present a result, a related action, and an optional…",[32],{"title":33,"description":14,"links":34},"About Notification Toast",[],[36],"308 UI components",[38,68,93,126,152,174,201,223,246,273,300,326],{"uuid":39,"title":40,"description":41,"canonical_path":42,"image":18,"width":43,"height":44,"image_alt":45,"kind":46,"categories":47,"app":50},"59bf86b1-c136-44c1-97da-6d520e0183ca","Lithic UI component","A success notification modal with a progress bar.","\u002Fexamples\u002Fapps\u002Flithic\u002Fcomponents",701,244,"UI component from Lithic","component",[48],{"id":12,"title":13,"slug":49},"notification-element",{"slug":51,"title":52,"logo":53,"baseline":54,"categories":55},"lithic","Lithic","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002F29eef334-64df-456e-bb65-9d93c535b644.png","Programmable card issuing and money movement platform",[56,60,64],{"id":57,"title":58,"slug":59},36,"Finance","finance",{"id":61,"title":62,"slug":63},39,"Payments","payments",{"id":65,"title":66,"slug":67},37,"Developer APIs","developer-apis",{"uuid":69,"title":70,"description":71,"canonical_path":72,"image":73,"width":74,"height":75,"image_alt":76,"kind":46,"categories":77,"app":79},"19876c14-cf74-4ffe-9dad-b6d05b27fa57","Dock UI component","A blue alert message indicating an AI-driven tone change is being processed.","\u002Fexamples\u002Fapps\u002Fdock\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F66b208ff-7683-448b-b8d9-64062ba849d4.png",652,179,"UI component from Dock",[78],{"id":12,"title":13,"slug":49},{"slug":80,"title":81,"logo":82,"baseline":83,"categories":84},"dock","Dock","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fdock-k4tgvy1y.png","The new way to manage external relationships",[85,89],{"id":86,"title":87,"slug":88},23,"Collaboration","collaboration",{"id":90,"title":91,"slug":92},29,"Task Management","task-management",{"uuid":94,"title":95,"description":96,"canonical_path":97,"image":98,"width":99,"height":100,"image_alt":101,"kind":46,"categories":102,"app":104},"52b6f9df-98f8-48ca-9778-1ce6603d980b","Bloom UI component","A success notification indicating a draft order has been converted to an order.","\u002Fexamples\u002Fapps\u002Fbloom\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F2db68ef5-def0-42e9-a2a1-51bd1a1e9496.png",838,208,"UI component from Bloom",[103],{"id":12,"title":13,"slug":49},{"slug":105,"title":106,"logo":107,"baseline":108,"categories":109},"bloom","Bloom","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002F62461f0d-4182-4996-ae7b-cbc623f6ee3f.png","A new way to build commerce",[110,114,118,122],{"id":111,"title":112,"slug":113},80,"Artificial Intelligence","artificial-intelligence",{"id":115,"title":116,"slug":117},3,"Shopping","shopping",{"id":119,"title":120,"slug":121},7,"Web Development","web-development",{"id":123,"title":124,"slug":125},96,"No code","no-code",{"uuid":127,"title":128,"description":129,"canonical_path":130,"image":131,"width":132,"height":133,"image_alt":134,"kind":46,"categories":135,"app":137},"13a43546-72bc-4bcf-bfb2-f82a458e08f1","Appwrite UI component","A modal window displaying the status of a file upload.","\u002Fexamples\u002Fapps\u002Fappwrite\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F8ca0280f-a560-4007-a025-9dbb055ef65b.png",941,335,"UI component from Appwrite",[136],{"id":12,"title":13,"slug":49},{"slug":138,"title":139,"logo":140,"baseline":141,"categories":142},"appwrite","Appwrite","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Faba3119b-0179-4fbd-b6d0-2bb3a0bfda07.png","Open-source backend platform for building and scaling apps with Auth, Database, Storage, Functions, Realtime, Messaging, and Sites.",[143,147,148],{"id":144,"title":145,"slug":146},48,"Developer Tools","developer-tools",{"id":65,"title":66,"slug":67},{"id":149,"title":150,"slug":151},45,"Open Source","open-source",{"uuid":153,"title":154,"canonical_path":155,"image":156,"width":157,"height":158,"image_alt":159,"kind":46,"categories":160,"app":162},"72d5741d-dddd-49bd-b82f-81e3865b2fe7","Voiceflow UI component","\u002Fexamples\u002Fapps\u002Fvoiceflow\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F266bcae7-1e78-48c5-a1d1-b2b93a64e796.png",881,350,"UI component from Voiceflow",[161],{"id":12,"title":13,"slug":49},{"slug":163,"title":164,"logo":165,"baseline":166,"categories":167},"voiceflow","Voiceflow","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fvoiceflow-ba430e40.png","Build amazing conversational assistants",[168,169,173],{"id":111,"title":112,"slug":113},{"id":170,"title":171,"slug":172},47,"Customer Service","customer-service",{"id":123,"title":124,"slug":125},{"uuid":175,"title":176,"description":177,"canonical_path":178,"image":179,"width":180,"height":181,"image_alt":182,"kind":46,"categories":183,"app":185},"bba7ed55-110b-44f2-90f4-e4b3742ad2e4","Verification code sent toast","Displays confirmation that a verification code was emailed and provides a dismiss control","\u002Fexamples\u002Fapps\u002Fbeside\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F6b86ca74-c9ea-4abc-884e-34771a02f540.png",1116,529,"Verification code sent toast from Beside",[184],{"id":12,"title":13,"slug":49},{"slug":186,"title":187,"logo":188,"baseline":189,"categories":190},"beside","Beside","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002F8c14025e-58b4-4801-bd91-3e31a3cf8f21.png","AI-powered business phone assistant that answers calls and takes action",[191,192,193,197],{"id":111,"title":112,"slug":113},{"id":170,"title":171,"slug":172},{"id":194,"title":195,"slug":196},53,"CRM","crm",{"id":198,"title":199,"slug":200},82,"Communication","communication",{"uuid":202,"title":203,"description":204,"canonical_path":205,"image":206,"width":207,"height":208,"image_alt":209,"kind":46,"categories":210,"app":212},"31d0c58d-aa75-4610-a40f-5614dad569d4","Success toast","Dark rounded pill toast with white checkmark icon and text confirming the authenticator app is now disabled.","\u002Fexamples\u002Fapps\u002Ffamily\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F7e5aaf10-28fa-4433-b239-9ebd92dcd8ad.png",777,391,"Success toast from Family",[211],{"id":12,"title":13,"slug":49},{"slug":213,"title":214,"logo":215,"baseline":216,"categories":217},"family","Family","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002F54b399c5-e1bc-4b2d-9748-6c66246cee2b.png","Your favorite crypto wallet.",[218,219],{"id":57,"title":58,"slug":59},{"id":220,"title":221,"slug":222},95,"Blockchain","blockchain",{"uuid":224,"title":225,"description":226,"canonical_path":227,"image":228,"width":229,"height":230,"image_alt":231,"kind":46,"categories":232,"app":234},"2dba830b-e5ee-4482-a617-ffc2b420aa95","Data availability alert","Informs the user that the last 7 days of billing data is unavailable and shows data from an earlier start date instead","\u002Fexamples\u002Fapps\u002Fexa\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fb47e3960-d30b-4bf7-bdb7-78bec62015a4.png",799,251,"Data availability alert from Exa",[233],{"id":12,"title":13,"slug":49},{"slug":235,"title":236,"logo":237,"baseline":238,"categories":239},"exa","Exa","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002F011e446a-087b-451e-b27d-63d67d92a42f.png","Real-time AI search engine with structured web search API and deep research tools",[240,244,245],{"id":241,"title":242,"slug":243},55,"Search engine","search-engine",{"id":111,"title":112,"slug":113},{"id":65,"title":66,"slug":67},{"uuid":247,"title":248,"description":249,"canonical_path":250,"image":251,"width":252,"height":253,"image_alt":254,"kind":46,"categories":255,"app":257},"e230e6cc-9e09-4496-9046-308f9207b5d6","Amie UI component","A modal dialog announcing an AI scheduling feature for todos.","\u002Fexamples\u002Fapps\u002Famie\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fff8c8683-1eb1-43b4-aa22-e3c0693965d4.png",634,532,"UI component from Amie",[256],{"id":12,"title":13,"slug":49},{"slug":258,"title":259,"logo":260,"baseline":261,"categories":262},"amie","Amie","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Famie-929f0269.png","The joyful productivity app",[263,267,268,272],{"id":264,"title":265,"slug":266},101,"Calendar","calendar",{"id":90,"title":91,"slug":92},{"id":269,"title":270,"slug":271},30,"Productivity","productivity",{"id":111,"title":112,"slug":113},{"uuid":274,"title":275,"description":276,"canonical_path":277,"image":278,"width":279,"height":280,"image_alt":281,"kind":46,"categories":282,"app":284},"841e0a34-0f72-4fcc-8247-88ad2fea9bbe","Navattic UI component","A success notification message with a checkmark icon.","\u002Fexamples\u002Fapps\u002Fnavattic\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F85d69dcd-57e0-4100-bf1f-09ad598aa2de.png",816,185,"UI component from Navattic",[283],{"id":12,"title":13,"slug":49},{"slug":285,"title":286,"logo":287,"baseline":288,"categories":289},"navattic","Navattic","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fd26bd2f9-ee1e-4acc-9d41-1890fbd1b5c4.png","Make buying easier with demos",[290,294,295,296],{"id":291,"title":292,"slug":293},25,"Marketing","marketing",{"id":111,"title":112,"slug":113},{"id":123,"title":124,"slug":125},{"id":297,"title":298,"slug":299},103,"Demo Automation","demo-automation",{"uuid":301,"title":302,"description":303,"canonical_path":304,"image":305,"width":306,"height":307,"image_alt":308,"kind":46,"categories":309,"app":311},"1df79535-4174-4b0b-8dee-5aca09ac1a7e","Mailchimp UI component","A dark notification bar displaying a success message with a close button.","\u002Fexamples\u002Fapps\u002Fmailchimp\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F5cf069f0-4dc4-441a-8512-cb931f9fe557.png",1836,406,"UI component from Mailchimp",[310],{"id":12,"title":13,"slug":49},{"slug":312,"title":313,"logo":314,"baseline":315,"categories":316},"mailchimp","Mailchimp","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fmailchimp-bd8e0c89.png","All-in-one marketing platform for small business",[317,318,322],{"id":291,"title":292,"slug":293},{"id":319,"title":320,"slug":321},27,"Email Newsletters","email-newsletters",{"id":323,"title":324,"slug":325},68,"SMS","sms",{"uuid":327,"title":328,"description":329,"canonical_path":330,"image":331,"width":332,"height":333,"image_alt":334,"kind":46,"categories":335,"app":337},"f630f0de-1d1e-45d9-873b-d227ab09d7d0","Linear UI component","A modal dialog informing the user about a feature not available on their current plan and prompting them to upgrade.","\u002Fexamples\u002Fapps\u002Flinear\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fa6db0a34-39b7-4d6d-8420-d8a4e9d5cbdb.png",892,388,"UI component from Linear",[336],{"id":12,"title":13,"slug":49},{"slug":338,"title":339,"logo":340,"baseline":341,"categories":342},"linear","Linear","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Flinear-c6809667.png","The issue tracking tool you'll enjoy using",[343,344,345,346],{"id":90,"title":91,"slug":92},{"id":269,"title":270,"slug":271},{"id":86,"title":87,"slug":88},{"id":347,"title":348,"slug":349},86,"Product management","product-management",[],[352,355,358,361,364,367,370,373,376,379,382,385,388,391,394,397],{"label":353,"to":354},"Account Settings","\u002Fexamples\u002Fscreens\u002Faccount-settings",{"label":356,"to":357},"Filter & Sort","\u002Fexamples\u002Fscreens\u002Ffilter-and-sort",{"label":359,"to":360},"AI Chat","\u002Fexamples\u002Fscreens\u002Fai-chat",{"label":362,"to":363},"Edit","\u002Fexamples\u002Fscreens\u002Fedit",{"label":365,"to":366},"Lithic design examples","\u002Fexamples\u002Fapps\u002Flithic",{"label":368,"to":369},"Dock design examples","\u002Fexamples\u002Fapps\u002Fdock",{"label":371,"to":372},"Bloom design examples","\u002Fexamples\u002Fapps\u002Fbloom",{"label":374,"to":375},"Appwrite design examples","\u002Fexamples\u002Fapps\u002Fappwrite",{"label":377,"to":378},"Voiceflow design examples","\u002Fexamples\u002Fapps\u002Fvoiceflow",{"label":380,"to":381},"Beside design examples","\u002Fexamples\u002Fapps\u002Fbeside",{"label":383,"to":384},"Family design examples","\u002Fexamples\u002Fapps\u002Ffamily",{"label":386,"to":387},"Exa design examples","\u002Fexamples\u002Fapps\u002Fexa",{"label":389,"to":390},"Amie design examples","\u002Fexamples\u002Fapps\u002Famie",{"label":392,"to":393},"Navattic design examples","\u002Fexamples\u002Fapps\u002Fnavattic",{"label":395,"to":396},"Mailchimp design examples","\u002Fexamples\u002Fapps\u002Fmailchimp",{"label":398,"to":399},"Linear design examples","\u002Fexamples\u002Fapps\u002Flinear",{"published_at":401,"updated_at":402},"2022-08-22T10:31:54.000Z","2026-09-17T10:44:16.000Z"]