[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"examples-content:\u002Fexamples\u002Fcomponents\u002Fbutton-group":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":352,"links":353,"dates":402},"\u002Fexamples\u002Fcomponents\u002Fbutton-group","collection","components",true,{"example_count":9,"app_count":10},69,43,{"id":12,"title":13,"description":14},277,"Button group","See how interfaces place related actions together. Explore how grouped buttons use labels, spacing, and emphasis to show the relationship between available choices.",{"title":16,"description":17,"og_image":18},"Button group UI examples - Nicelydone","Button group UI design examples from SaaS apps. See how interfaces place related actions together. Explore how grouped buttons use labels, spacing, and…","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F170adc1b-21e5-4022-bb56-54932ce26680.png",[20,23,26],{"label":21,"to":22},"Examples","\u002Fexamples",{"label":24,"to":25},"SaaS UI component examples","\u002Fexamples\u002Fcomponents",{"label":27,"to":4},"Button group UI examples",{"title":27,"eyebrow":29,"description":30,"sections":31,"body":35},"UI component category","Button group UI design examples from SaaS apps. See how interfaces place related actions together. Explore how grouped buttons use labels, spacing, and emphasis to show the relationship between available…",[32],{"title":33,"description":14,"links":34},"About Button group",[],[36],"69 UI components",[38,72,97,127,156,183,204,229,252,279,305,332],{"uuid":39,"title":40,"description":41,"canonical_path":42,"image":18,"width":43,"height":44,"image_alt":45,"kind":46,"categories":47,"app":50},"6a6e40e3-8f1d-4c5f-8174-e2e0a2edae9b","Tabular UI component","A modal with options to copy HTML and plain text to clipboard, and download HTML file.","\u002Fexamples\u002Fapps\u002Ftabular\u002Fcomponents",1240,738,"UI component from Tabular","component",[48],{"id":12,"title":13,"slug":49},"button-group",{"slug":51,"title":52,"logo":53,"baseline":54,"categories":55},"tabular","Tabular","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Feadf3716-18bb-466f-8b45-a512bf9311c4.png","Create emails easily with our email builder",[56,60,64,68],{"id":57,"title":58,"slug":59},92,"Email","email",{"id":61,"title":62,"slug":63},27,"Email Newsletters","email-newsletters",{"id":65,"title":66,"slug":67},8,"Design","design",{"id":69,"title":70,"slug":71},96,"No code","no-code",{"uuid":73,"title":74,"description":75,"canonical_path":76,"image":77,"width":78,"height":79,"image_alt":80,"kind":46,"categories":81,"app":83},"daad1ef4-6348-4485-b7b6-43036c84687a","Leap UI component","The image shows two buttons.","\u002Fexamples\u002Fapps\u002Fleap\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Ff15fb845-bd8b-48b8-8a80-b4e62745a0cc.png",607,131,"UI component from Leap",[82],{"id":12,"title":13,"slug":49},{"slug":84,"title":85,"logo":86,"baseline":87,"categories":88},"leap","Leap","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fleap-60d851ac.png","Automate any workflow with AI",[89,93],{"id":90,"title":91,"slug":92},80,"Artificial Intelligence","artificial-intelligence",{"id":94,"title":95,"slug":96},30,"Productivity","productivity",{"uuid":98,"title":99,"description":100,"canonical_path":101,"image":102,"width":103,"height":104,"image_alt":105,"kind":46,"categories":106,"app":108},"05e70941-4ceb-49c3-be50-101a433d676c","Front UI component","The image shows two buttons, one to skip and one to start setup.","\u002Fexamples\u002Fapps\u002Ffront\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F1e513592-490c-4551-ac4f-90329c4c7716.png",476,198,"UI component from Front",[107],{"id":12,"title":13,"slug":49},{"slug":109,"title":110,"logo":111,"baseline":112,"categories":113},"front","Front","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Ffront-f25c6b6e.png","Email redesigned for teams",[114,118,122,126],{"id":115,"title":116,"slug":117},23,"Collaboration","collaboration",{"id":119,"title":120,"slug":121},47,"Customer Service","customer-service",{"id":123,"title":124,"slug":125},82,"Communication","communication",{"id":57,"title":58,"slug":59},{"uuid":128,"title":129,"description":130,"canonical_path":131,"image":132,"width":133,"height":134,"image_alt":135,"kind":46,"categories":136,"app":138},"997b551c-2a53-4234-8b5b-878b123e55b8","Destructive action button group","A horizontal button group containing a secondary 'Cancel' button and a primary destructive 'Downgrade' button.","\u002Fexamples\u002Fapps\u002Fstripe\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F145435a0-683c-4f0a-bfdb-620517322a8e.png",462,196,"Destructive action button group from Stripe",[137],{"id":12,"title":13,"slug":49},{"slug":139,"title":140,"logo":141,"baseline":142,"categories":143},"stripe","Stripe","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fstripe-ac594414.png","Payments infrastructure for the internet",[144,148,152],{"id":145,"title":146,"slug":147},36,"Finance","finance",{"id":149,"title":150,"slug":151},37,"Developer APIs","developer-apis",{"id":153,"title":154,"slug":155},39,"Payments","payments",{"uuid":157,"title":158,"description":159,"canonical_path":160,"image":161,"width":162,"height":163,"image_alt":164,"kind":46,"categories":165,"app":167},"89e256f1-fabc-4b63-9d6a-58c3426c7ebd","Delete confirmation buttons","A button group containing an outlined Cancel button and a red filled Delete event button with a dropdown arrow.","\u002Fexamples\u002Fapps\u002Famie\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F861b59fc-ea3c-4ba4-b3e5-0e554178333a.png",585,201,"Delete confirmation buttons from Amie",[166],{"id":12,"title":13,"slug":49},{"slug":168,"title":169,"logo":170,"baseline":171,"categories":172},"amie","Amie","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Famie-929f0269.png","The joyful productivity app",[173,177,181,182],{"id":174,"title":175,"slug":176},101,"Calendar","calendar",{"id":178,"title":179,"slug":180},29,"Task Management","task-management",{"id":94,"title":95,"slug":96},{"id":90,"title":91,"slug":92},{"uuid":184,"title":185,"description":186,"canonical_path":187,"image":188,"width":189,"height":190,"image_alt":191,"kind":46,"categories":192,"app":194},"313ecf13-fd51-4fd7-8caf-a44bb9a9bf5a","Wiza UI component","A set of actions for a folder","\u002Fexamples\u002Fapps\u002Fwiza\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F57a688dd-69ca-43eb-9fd7-89a140e2100b.png",795,207,"UI component from Wiza",[193],{"id":12,"title":13,"slug":49},{"slug":195,"title":196,"logo":197,"baseline":198,"categories":199},"wiza","Wiza","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fwiza-21efd5aa.png","Wiza makes prospecting magical",[200],{"id":201,"title":202,"slug":203},53,"CRM","crm",{"uuid":205,"title":206,"description":207,"canonical_path":208,"image":209,"width":210,"height":211,"image_alt":212,"kind":46,"categories":213,"app":215},"d632712f-a423-4f68-9da1-e1f14cb0df0f","Modal action buttons","A pair of buttons positioned at opposite ends of a row, typically found at the bottom of a modal or form. The left button is a secondary 'Sign out' action, and the right is a primary 'Save' action.","\u002Fexamples\u002Fapps\u002Frefrakt\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F33772a33-d7b1-41ff-8482-800ea21a9204.png",1024,224,"Modal action buttons from Refrakt",[214],{"id":12,"title":13,"slug":49},{"slug":216,"title":217,"logo":218,"baseline":219,"categories":220},"refrakt","Refrakt","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Frefrakt-4bd9bf02.png","A more meaningful home for photography",[221,225],{"id":222,"title":223,"slug":224},49,"Social Network","social-network",{"id":226,"title":227,"slug":228},31,"Photography","photography",{"uuid":230,"title":231,"description":232,"canonical_path":233,"image":234,"width":235,"height":236,"image_alt":237,"kind":46,"categories":238,"app":240},"6e5783a0-beb5-40cf-a252-d6101a54cea4","Figma UI component","A set of action buttons","\u002Fexamples\u002Fapps\u002Ffigma\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fff8971e7-8670-48f9-8b1b-6ee9a8f18cdf.png",912,192,"UI component from Figma",[239],{"id":12,"title":13,"slug":49},{"slug":241,"title":242,"logo":243,"baseline":244,"categories":245},"figma","Figma","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Ffigma-569108c3.png","The collaborative interface design tool",[246,247,248],{"id":65,"title":66,"slug":67},{"id":115,"title":116,"slug":117},{"id":249,"title":250,"slug":251},48,"Developer Tools","developer-tools",{"uuid":253,"title":254,"description":255,"canonical_path":256,"image":257,"width":258,"height":259,"image_alt":260,"kind":46,"categories":261,"app":263},"6e25d444-9aec-4fcd-a156-fbfde9c64b26","Dyte UI component","A modal with meeting options","\u002Fexamples\u002Fapps\u002Fdyte\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fba396e1c-04ec-496d-a2b3-32177d14945a.png",896,304,"UI component from Dyte",[262],{"id":12,"title":13,"slug":49},{"slug":264,"title":265,"logo":266,"baseline":267,"categories":268},"dyte","Dyte","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fdyte-eac67577.png","Build powerful live experiences in your product",[269,273,274,275],{"id":270,"title":271,"slug":272},70,"Video streaming","video-streaming",{"id":149,"title":150,"slug":151},{"id":123,"title":124,"slug":125},{"id":276,"title":277,"slug":278},100,"Video","video",{"uuid":280,"title":281,"description":282,"canonical_path":283,"image":284,"width":285,"height":286,"image_alt":287,"kind":46,"categories":288,"app":290},"aa28da03-c90e-4b81-ba7e-3c355eb07201","Fibery UI component","A toolbar with several options.","\u002Fexamples\u002Fapps\u002Ffibery\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F0ed60853-b4b9-4980-86bd-1d0dd87daaa8.png",1461,349,"UI component from Fibery",[289],{"id":12,"title":13,"slug":49},{"slug":291,"title":292,"logo":293,"baseline":294,"categories":295},"fibery","Fibery","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Ffibery-eb0f19ed.png","Build your own work & knowledge hub",[296,300,304],{"id":297,"title":298,"slug":299},22,"Knowledge Management","knowledge-management",{"id":301,"title":302,"slug":303},86,"Product management","product-management",{"id":115,"title":116,"slug":117},{"uuid":306,"title":307,"description":232,"canonical_path":308,"image":309,"width":310,"height":311,"image_alt":312,"kind":46,"categories":313,"app":315},"f7816b1e-26bf-4095-b052-a2f852b16fa7","Webflow UI component","\u002Fexamples\u002Fapps\u002Fwebflow\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F16ae0ab8-9046-4021-bb9a-32b5fe0ffb74.png",1207,325,"UI component from Webflow",[314],{"id":12,"title":13,"slug":49},{"slug":316,"title":317,"logo":318,"baseline":319,"categories":320},"webflow","Webflow","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fwebflow-d8c55605.png","Responsive web design tool, CMS, and hosting platform",[321,322,326,330,331],{"id":69,"title":70,"slug":71},{"id":323,"title":324,"slug":325},6,"Publishing","publishing",{"id":327,"title":328,"slug":329},7,"Web Development","web-development",{"id":65,"title":66,"slug":67},{"id":115,"title":116,"slug":117},{"uuid":333,"title":334,"description":335,"canonical_path":336,"image":337,"width":338,"height":339,"image_alt":340,"kind":46,"categories":341,"app":343},"57460067-e028-44dc-bc2e-8fce6eb1e1cd","Photoroom UI component","A selection bar with actions","\u002Fexamples\u002Fapps\u002Fphotoroom\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fad5478d6-0aba-4696-82f1-50ea5a642599.png",1755,431,"UI component from Photoroom",[342],{"id":12,"title":13,"slug":49},{"slug":344,"title":345,"logo":346,"baseline":347,"categories":348},"photoroom","Photoroom","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fphotoroom-0ae20398.png","Magic photo studio on the go",[349,350,351],{"id":226,"title":227,"slug":228},{"id":65,"title":66,"slug":67},{"id":90,"title":91,"slug":92},[],[354,357,360,363,366,369,372,375,378,381,384,387,390,393,396,399],{"label":355,"to":356},"Files","\u002Fexamples\u002Fscreens\u002Ffiles",{"label":358,"to":359},"Confirmation","\u002Fexamples\u002Fscreens\u002Fconfirmation",{"label":361,"to":362},"Filter & Sort","\u002Fexamples\u002Fscreens\u002Ffilter-and-sort",{"label":364,"to":365},"Add & Create","\u002Fexamples\u002Fscreens\u002Fadd-and-create",{"label":367,"to":368},"Tabular design examples","\u002Fexamples\u002Fapps\u002Ftabular",{"label":370,"to":371},"Leap design examples","\u002Fexamples\u002Fapps\u002Fleap",{"label":373,"to":374},"Front design examples","\u002Fexamples\u002Fapps\u002Ffront",{"label":376,"to":377},"Stripe design examples","\u002Fexamples\u002Fapps\u002Fstripe",{"label":379,"to":380},"Amie design examples","\u002Fexamples\u002Fapps\u002Famie",{"label":382,"to":383},"Wiza design examples","\u002Fexamples\u002Fapps\u002Fwiza",{"label":385,"to":386},"Refrakt design examples","\u002Fexamples\u002Fapps\u002Frefrakt",{"label":388,"to":389},"Figma design examples","\u002Fexamples\u002Fapps\u002Ffigma",{"label":391,"to":392},"Dyte design examples","\u002Fexamples\u002Fapps\u002Fdyte",{"label":394,"to":395},"Fibery design examples","\u002Fexamples\u002Fapps\u002Ffibery",{"label":397,"to":398},"Webflow design examples","\u002Fexamples\u002Fapps\u002Fwebflow",{"label":400,"to":401},"Photoroom design examples","\u002Fexamples\u002Fapps\u002Fphotoroom",{"published_at":403,"updated_at":404},"2022-08-29T14:13:54.000Z","2026-09-25T12:10:11.000Z"]