[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"examples-content:\u002Fexamples\u002Fcomponents\u002Fbadge":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":345,"links":346,"dates":395},"\u002Fexamples\u002Fcomponents\u002Fbadge","collection","components",true,{"example_count":9,"app_count":10},87,47,{"id":12,"title":13,"description":14},260,"Badge","See how interfaces attach a compact status or count to an item. Explore how badge text, color, and placement add context to nearby content.",{"title":16,"description":17,"og_image":18},"Badge UI examples - Nicelydone","Badge UI design examples from SaaS apps. See how interfaces attach a compact status or count to an item. Explore how badge text, color, and placement add…","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F5021bdbb-4cba-4776-8499-a94217c8000a.png",[20,23,26],{"label":21,"to":22},"Examples","\u002Fexamples",{"label":24,"to":25},"SaaS UI component examples","\u002Fexamples\u002Fcomponents",{"label":27,"to":4},"Badge UI examples",{"title":27,"eyebrow":29,"description":30,"sections":31,"body":35},"UI component category","Badge UI design examples from SaaS apps. See how interfaces attach a compact status or count to an item. Explore how badge text, color, and placement add context to nearby content.",[32],{"title":33,"description":14,"links":34},"About Badge",[],[36],"87 UI components",[38,72,101,134,153,182,203,229,250,269,290,315],{"uuid":39,"title":40,"description":41,"canonical_path":42,"image":18,"width":43,"height":44,"image_alt":45,"kind":46,"categories":47,"app":50},"800e0ea4-eea4-4183-bcf8-a7fcb87e89d9","Podia UI component","The screenshot displays a 'Failed' status indicator.","\u002Fexamples\u002Fapps\u002Fpodia\u002Fcomponents",275,184,"UI component from Podia","component",[48],{"id":12,"title":13,"slug":49},"badge",{"slug":51,"title":52,"logo":53,"baseline":54,"categories":55},"podia","Podia","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fpodia-g4nl3lhm.png","Sell online courses, memberships, and downloads",[56,60,64,68],{"id":57,"title":58,"slug":59},32,"Education","education",{"id":61,"title":62,"slug":63},1,"Communities","communities",{"id":65,"title":66,"slug":67},27,"Email Newsletters","email-newsletters",{"id":69,"title":70,"slug":71},33,"E-Learning","e-learning",{"uuid":73,"title":74,"description":75,"canonical_path":76,"image":77,"width":78,"height":79,"image_alt":80,"kind":46,"categories":81,"app":83},"d8c6092f-97d2-41a3-a613-cb836c4ae0e3","Height UI component","A simple announcement banner.","\u002Fexamples\u002Fapps\u002Fheight\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F8d7a828c-2133-4712-b1dc-3f8cc895e5ed.png",776,181,"UI component from Height",[82],{"id":12,"title":13,"slug":49},{"slug":84,"title":85,"logo":86,"baseline":87,"categories":88},"height","Height","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fheight-29b426a4.png","Manage projects across engineering, product, design, and other teams",[89,93,97],{"id":90,"title":91,"slug":92},86,"Product management","product-management",{"id":94,"title":95,"slug":96},29,"Task Management","task-management",{"id":98,"title":99,"slug":100},30,"Productivity","productivity",{"uuid":102,"title":103,"description":104,"canonical_path":105,"image":106,"width":107,"height":108,"image_alt":109,"kind":46,"categories":110,"app":112},"4a6b3d7e-fe58-4b55-98a4-4fa4daf41723","Framer UI component","A button with a neon outline and text inside.","\u002Fexamples\u002Fapps\u002Fframer\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fba3ba0e2-2a99-4b53-a928-029e26e99e9f.png",613,315,"UI component from Framer",[111],{"id":12,"title":13,"slug":49},{"slug":113,"title":114,"logo":115,"baseline":116,"categories":117},"framer","Framer","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fframer-4ee13abb.png","Always interactive, lightning fast design.",[118,122,126,130],{"id":119,"title":120,"slug":121},8,"Design","design",{"id":123,"title":124,"slug":125},7,"Web Development","web-development",{"id":127,"title":128,"slug":129},80,"Artificial Intelligence","artificial-intelligence",{"id":131,"title":132,"slug":133},96,"No code","no-code",{"uuid":135,"title":136,"description":137,"canonical_path":138,"image":139,"width":140,"height":141,"image_alt":142,"kind":46,"categories":143,"app":145},"9901ce89-2283-4fb3-bef9-54189a627a16","Superlist UI component","A booking card with a checkbox and a date and time indicator.","\u002Fexamples\u002Fapps\u002Fsuperlist\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F8ff8725d-215d-4212-9275-94de2f3a97ac.png",456,216,"UI component from Superlist",[144],{"id":12,"title":13,"slug":49},{"slug":146,"title":147,"logo":148,"baseline":149,"categories":150},"superlist","Superlist","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fsuperlist-159870df.png","Supercharged productivity",[151,152],{"id":94,"title":95,"slug":96},{"id":98,"title":99,"slug":100},{"uuid":154,"title":155,"description":156,"canonical_path":157,"image":158,"width":159,"height":160,"image_alt":161,"kind":46,"categories":162,"app":164},"5ef6af0b-4410-48a6-b003-7efe78427526","Eyebrow badge","A small, pill-shaped badge used as an eyebrow heading to introduce a section.","\u002Fexamples\u002Fapps\u002Fhookdeck\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Facdaf182-c2f8-4e50-bc73-fefce9b851d5.png",390,174,"Eyebrow badge from Hookdeck",[163],{"id":12,"title":13,"slug":49},{"slug":165,"title":166,"logo":167,"baseline":168,"categories":169},"hookdeck","Hookdeck","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fhookdeck-314d3191.png","A reliable event gateway for asynchronous applications",[170,174,178],{"id":171,"title":172,"slug":173},37,"Developer APIs","developer-apis",{"id":175,"title":176,"slug":177},16,"Monitoring","monitoring",{"id":179,"title":180,"slug":181},48,"Developer Tools","developer-tools",{"uuid":183,"title":184,"description":185,"canonical_path":186,"image":187,"width":188,"height":189,"image_alt":190,"kind":46,"categories":191,"app":193},"5f6b104c-e828-42d4-a028-aac411c1d6ec","Page title with beta badge","A large page title 'Configuration logs' accompanied by a pill-shaped badge indicating a beta feature.","\u002Fexamples\u002Fapps\u002Ftailscale\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F124c55ff-381e-4436-8b55-835cfb871285.png",899,187,"Page title with beta badge from Tailscale",[192],{"id":12,"title":13,"slug":49},{"slug":194,"title":195,"logo":196,"baseline":197,"categories":198},"tailscale","Tailscale","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Ftailscale-a7f66593.png","Best VPN service for secure networks",[199],{"id":200,"title":201,"slug":202},78,"Security","security",{"uuid":204,"title":205,"description":206,"canonical_path":207,"image":208,"width":209,"height":210,"image_alt":211,"kind":46,"categories":212,"app":214},"9abc3868-85d0-45e4-aef0-64a6ed5e3902","Announcement Badge","A pill-shaped badge used to announce news, featuring text and a right-pointing chevron icon.","\u002Fexamples\u002Fapps\u002Fbucket\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fa6555f72-e5cf-4f5b-bbf3-074b3801e8ad.png",698,241,"Announcement Badge from Bucket",[213],{"id":12,"title":13,"slug":49},{"slug":215,"title":216,"logo":217,"baseline":218,"categories":219},"bucket","Bucket","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fbucket-4bcf46bf.png","Get automated insights so you can iterate faster and delight your customers",[220,224,228],{"id":221,"title":222,"slug":223},46,"Analytics","analytics",{"id":225,"title":226,"slug":227},35,"Feedback","feedback",{"id":179,"title":180,"slug":181},{"uuid":230,"title":231,"description":232,"canonical_path":233,"image":234,"width":235,"height":236,"image_alt":237,"kind":46,"categories":238,"app":240},"074cde3d-447d-4128-94df-79edfb26f343","Date badge","A pill-shaped badge displaying a date alongside an image icon.","\u002Fexamples\u002Fapps\u002Fbuena\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fccb001d1-35c8-4462-bba3-16592df52380.png",368,196,"Date badge from Buena",[239],{"id":12,"title":13,"slug":49},{"slug":241,"title":242,"logo":243,"baseline":244,"categories":245},"buena","Buena","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fbuena-5b3e0a86.png","Property management, as it should be",[246],{"id":247,"title":248,"slug":249},9,"Real Estate","real-estate",{"uuid":251,"title":252,"description":253,"canonical_path":254,"image":255,"width":256,"height":257,"image_alt":258,"kind":46,"categories":259,"app":261},"e1a35664-f94d-4268-bacb-ca2c59393fbe","Dock UI component","A blue button with the text 'New'","\u002Fexamples\u002Fapps\u002Fdockio\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F273cc29f-41cc-44b4-83f8-da7eabcbae22.png",115,66,"UI component from Dock",[260],{"id":12,"title":13,"slug":49},{"slug":262,"title":263,"logo":264,"baseline":265,"categories":266},"dockio","Dock","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fdockio-cc9d7e66.png","End data fraud and reduce verification costs",[267,268],{"id":200,"title":201,"slug":202},{"id":171,"title":172,"slug":173},{"uuid":270,"title":271,"description":272,"canonical_path":273,"image":274,"width":275,"height":276,"image_alt":277,"kind":46,"categories":278,"app":280},"8051421d-b903-4be3-85c7-9fd390a8e88b","Wiza UI component","A button with an icon and text","\u002Fexamples\u002Fapps\u002Fwiza\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fbbef266c-866b-4187-a16e-c84d24c31681.png",448,235,"UI component from Wiza",[279],{"id":12,"title":13,"slug":49},{"slug":281,"title":282,"logo":283,"baseline":284,"categories":285},"wiza","Wiza","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fwiza-21efd5aa.png","Wiza makes prospecting magical",[286],{"id":287,"title":288,"slug":289},53,"CRM","crm",{"uuid":291,"title":292,"description":293,"canonical_path":294,"image":295,"width":296,"height":297,"image_alt":298,"kind":46,"categories":299,"app":301},"256cd295-e91d-477e-a0b1-4219ed1002eb","Beta badge","A pill-shaped badge indicating a beta feature or status.","\u002Fexamples\u002Fapps\u002Frefrakt\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F1695b4e7-89ea-4780-8d4a-b6380bc9a7e4.png",214,170,"Beta badge from Refrakt",[300],{"id":12,"title":13,"slug":49},{"slug":302,"title":303,"logo":304,"baseline":305,"categories":306},"refrakt","Refrakt","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Frefrakt-4bd9bf02.png","A more meaningful home for photography",[307,311],{"id":308,"title":309,"slug":310},49,"Social Network","social-network",{"id":312,"title":313,"slug":314},31,"Photography","photography",{"uuid":316,"title":317,"description":318,"canonical_path":319,"image":320,"width":321,"height":322,"image_alt":323,"kind":46,"categories":324,"app":326},"84264e55-555b-4e44-af45-389ac27d49b4","Dyte UI component","A button with text and an arrow icon","\u002Fexamples\u002Fapps\u002Fdyte\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F0a0f6328-58c3-41d5-80d6-ae4941481dcd.png",590,237,"UI component from Dyte",[325],{"id":12,"title":13,"slug":49},{"slug":327,"title":328,"logo":329,"baseline":330,"categories":331},"dyte","Dyte","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fdyte-eac67577.png","Build powerful live experiences in your product",[332,336,337,341],{"id":333,"title":334,"slug":335},70,"Video streaming","video-streaming",{"id":171,"title":172,"slug":173},{"id":338,"title":339,"slug":340},82,"Communication","communication",{"id":342,"title":343,"slug":344},100,"Video","video",[],[347,350,353,356,359,362,365,368,371,374,377,380,383,386,389,392],{"label":348,"to":349},"Landing Page","\u002Fexamples\u002Fpages\u002Flanding-page",{"label":351,"to":352},"Table","\u002Fexamples\u002Fscreens\u002Ftable",{"label":354,"to":355},"Browse","\u002Fexamples\u002Fscreens\u002Fbrowse",{"label":357,"to":358},"Filter & Sort","\u002Fexamples\u002Fscreens\u002Ffilter-and-sort",{"label":360,"to":361},"Podia design examples","\u002Fexamples\u002Fapps\u002Fpodia",{"label":363,"to":364},"Height design examples","\u002Fexamples\u002Fapps\u002Fheight",{"label":366,"to":367},"Framer design examples","\u002Fexamples\u002Fapps\u002Fframer",{"label":369,"to":370},"Superlist design examples","\u002Fexamples\u002Fapps\u002Fsuperlist",{"label":372,"to":373},"Hookdeck design examples","\u002Fexamples\u002Fapps\u002Fhookdeck",{"label":375,"to":376},"Tailscale design examples","\u002Fexamples\u002Fapps\u002Ftailscale",{"label":378,"to":379},"Bucket design examples","\u002Fexamples\u002Fapps\u002Fbucket",{"label":381,"to":382},"Buena design examples","\u002Fexamples\u002Fapps\u002Fbuena",{"label":384,"to":385},"Dock design examples","\u002Fexamples\u002Fapps\u002Fdockio",{"label":387,"to":388},"Wiza design examples","\u002Fexamples\u002Fapps\u002Fwiza",{"label":390,"to":391},"Refrakt design examples","\u002Fexamples\u002Fapps\u002Frefrakt",{"label":393,"to":394},"Dyte design examples","\u002Fexamples\u002Fapps\u002Fdyte",{"published_at":396,"updated_at":397},"2022-08-24T17:38:44.000Z","2026-09-19T12:10:19.000Z"]