[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"content:legacy:page:\u002Fposts\u002Fuiux\u002Fcommon-button-mistake":3,"content:legacy:navigation":94,"content:legacy:surround:\u002Fposts\u002Fuiux\u002Fcommon-button-mistake":423,"content:related-articles:Common Button Mistake in UI\u002FUX":425},{"id":4,"title":5,"body":6,"category":75,"description":76,"duration":77,"extension":78,"icon":79,"image":80,"meta":83,"modifiedAt":79,"navigation":84,"path":85,"publishedAt":86,"seo":87,"sitemap":88,"stem":89,"tags":90,"updatedAt":92,"__hash__":93},"posts\u002Fposts\u002Fuiux\u002Fcommon-button-mistake.md","Common Button Mistake in UI\u002FUX",{"type":7,"value":8,"toc":66},"minimark",[9,14,22,26,36,40,46,50,56,60],[10,11,13],"h2",{"id":12},"no-hierarchy","No hierarchy",[15,16,17],"p",{},[18,19],"img",{"alt":20,"src":21},"Rule 1","https:\u002F\u002Fraw.githubusercontent.com\u002Ffullstack-core\u002Fblog\u002Frefs\u002Fheads\u002Fmain\u002Fblog\u002Fdetail\u002Fuiux\u002Fcommon-button-mistake-in-uiux-1.jpg",[10,23,25],{"id":24},"inadequate-size","Inadequate size",[15,27,28,32],{},[18,29],{"alt":30,"src":31},"Rule 2a","https:\u002F\u002Fraw.githubusercontent.com\u002Ffullstack-core\u002Fblog\u002Frefs\u002Fheads\u002Fmain\u002Fblog\u002Fdetail\u002Fuiux\u002Fcommon-button-mistake-in-uiux-2a.jpg",[18,33],{"alt":34,"src":35},"Rule 2b","https:\u002F\u002Fraw.githubusercontent.com\u002Ffullstack-core\u002Fblog\u002Frefs\u002Fheads\u002Fmain\u002Fblog\u002Fdetail\u002Fuiux\u002Fcommon-button-mistake-in-uiux-2b.jpg",[10,37,39],{"id":38},"ignoring-states","Ignoring states",[15,41,42],{},[18,43],{"alt":44,"src":45},"Rule 3","https:\u002F\u002Fraw.githubusercontent.com\u002Ffullstack-core\u002Fblog\u002Frefs\u002Fheads\u002Fmain\u002Fblog\u002Fdetail\u002Fuiux\u002Fcommon-button-mistake-in-uiux-3.jpg",[10,47,49],{"id":48},"placement","Placement",[15,51,52],{},[18,53],{"alt":54,"src":55},"Rule 4","https:\u002F\u002Fraw.githubusercontent.com\u002Ffullstack-core\u002Fblog\u002Frefs\u002Fheads\u002Fmain\u002Fblog\u002Fdetail\u002Fuiux\u002Fcommon-button-mistake-in-uiux-4.jpg",[10,57,59],{"id":58},"wording","Wording",[15,61,62],{},[18,63],{"alt":64,"src":65},"Rule 5","https:\u002F\u002Fraw.githubusercontent.com\u002Ffullstack-core\u002Fblog\u002Frefs\u002Fheads\u002Fmain\u002Fblog\u002Fdetail\u002Fuiux\u002Fcommon-button-mistake-in-uiux-5.jpg",{"title":67,"searchDepth":68,"depth":68,"links":69},"",2,[70,71,72,73,74],{"id":12,"depth":68,"text":13},{"id":24,"depth":68,"text":25},{"id":38,"depth":68,"text":39},{"id":48,"depth":68,"text":49},{"id":58,"depth":68,"text":59},"uiux","Explores the importance of button design and how it affects user experience.","2","md",null,{"src":81,"alt":82},"https:\u002F\u002Fraw.githubusercontent.com\u002Ffullstack-core\u002Fblog\u002Frefs\u002Fheads\u002Fmain\u002Fblog\u002Fcover\u002Fcommon-button-mistake-in-uiux.jpg","Common_Button_Mistake",{},true,"\u002Fposts\u002Fuiux\u002Fcommon-button-mistake","2025-06-14",{"title":5,"description":76},{"loc":85,"lastmod":86},"posts\u002Fuiux\u002Fcommon-button-mistake",[75,91],"design","2026-09-21T22:25:07+07:00","0mQbV-sx4ZSauoR21Xjq9JHYksdsp-KUtR0qRk6qyd8",[95,243,351,366],{"title":96,"icon":97,"path":98,"stem":99,"children":100,"page":111},"Posts","fluent-color:data-bar-vertical-ascending-24","\u002Fposts","posts",[101,112,130,156,166,180,190,200,210,236],{"title":102,"icon":103,"redirect":104,"path":105,"stem":106,"children":107,"page":111},"Database","material-icon-theme:database","\u002Fposts\u002Fdatabase\u002Freplication-strategy","\u002Fposts\u002Fdatabase","posts\u002Fdatabase",[108],{"title":109,"path":104,"stem":110,"icon":79},"Database Replication strategy in large systems","posts\u002Fdatabase\u002Freplication-strategy",false,{"title":113,"icon":114,"redirect":115,"path":116,"stem":117,"children":118,"page":111},"Docker","vscode-icons:file-type-docker2","\u002Fposts\u002Fdocker\u002Fdocker-commands","\u002Fposts\u002Fdocker","posts\u002Fdocker",[119,122,126],{"title":120,"path":115,"stem":121,"icon":79},"Docker commands essentials","posts\u002Fdocker\u002Fdocker-commands",{"title":123,"path":124,"stem":125,"icon":79},"Some useful Dockerfile templates","\u002Fposts\u002Fdocker\u002Fdockerfile-templates","posts\u002Fdocker\u002Fdockerfile-templates",{"title":127,"path":128,"stem":129,"icon":79},"Setup Docker environment on Windows","\u002Fposts\u002Fdocker\u002Fsetup-docker-on-window","posts\u002Fdocker\u002Fsetup-docker-on-window",{"title":131,"icon":132,"redirect":133,"path":134,"stem":135,"children":136,"page":111},"Git & GitHub","material-icon-theme:git","\u002Fposts\u002Fgit\u002Fbrightly-decorate-graph","\u002Fposts\u002Fgit","posts\u002Fgit",[137,140,144,148,152],{"title":138,"path":133,"stem":139,"icon":79},"Brightly decorate your GitHub Graph","posts\u002Fgit\u002Fbrightly-decorate-graph",{"title":141,"path":142,"stem":143,"icon":79},"Download a specific folder on GitHub repository","\u002Fposts\u002Fgit\u002Fdownload-specific-folder","posts\u002Fgit\u002Fdownload-specific-folder",{"title":145,"path":146,"stem":147,"icon":79},"Syncing Git Tags across to other repositories","\u002Fposts\u002Fgit\u002Fsyncing-tags-across-repositories","posts\u002Fgit\u002Fsyncing-tags-across-repositories",{"title":149,"path":150,"stem":151,"icon":79},"Unlocking GitHub Achievement badges","\u002Fposts\u002Fgit\u002Funlocking-achievement-badges","posts\u002Fgit\u002Funlocking-achievement-badges",{"title":153,"path":154,"stem":155,"icon":79},"Essential Git commands every developer should master","\u002Fposts\u002Fgit\u002Fuseful-commands-like-pro","posts\u002Fgit\u002Fuseful-commands-like-pro",{"title":157,"icon":158,"redirect":159,"path":160,"stem":161,"children":162,"page":111},"Golang","material-icon-theme:go","\u002Fposts\u002Fgolang\u002Foptimizing-performance-with-pgo","\u002Fposts\u002Fgolang","posts\u002Fgolang",[163],{"title":164,"path":159,"stem":165,"icon":79},"Optimizing Performance in Go Applications with PGO","posts\u002Fgolang\u002Foptimizing-performance-with-pgo",{"title":167,"icon":168,"redirect":169,"path":170,"stem":171,"children":172,"page":111},"JavaScript","vscode-icons:file-type-js","\u002Fposts\u002Fjavascript\u002F9-lines-of-tips","\u002Fposts\u002Fjavascript","posts\u002Fjavascript",[173,176],{"title":174,"path":169,"stem":175,"icon":79},"9 lines of JavaScript replace 50 lines of code","posts\u002Fjavascript\u002F9-lines-of-tips",{"title":177,"path":178,"stem":179,"icon":79},"Javascript Promises - Specific functions and use cases","\u002Fposts\u002Fjavascript\u002Fpromises-cheatsheet","posts\u002Fjavascript\u002Fpromises-cheatsheet",{"title":181,"icon":182,"redirect":183,"path":184,"stem":185,"children":186,"page":111},"Node","material-icon-theme:nodejs-alt","\u002Fposts\u002Fnodejs\u002Fevent-loop","\u002Fposts\u002Fnodejs","posts\u002Fnodejs",[187],{"title":188,"path":183,"stem":189,"icon":79},"Secret about Event Loop flow in Nodejs","posts\u002Fnodejs\u002Fevent-loop",{"title":191,"icon":192,"redirect":193,"path":194,"stem":195,"children":196,"page":111},"Nuxt","vscode-icons:file-type-nuxt","\u002Fposts\u002Fnuxt\u002Fenable-pwa-in-nuxt","\u002Fposts\u002Fnuxt","posts\u002Fnuxt",[197],{"title":198,"path":193,"stem":199,"icon":79},"Enable PWA and Service Worker in Nuxt","posts\u002Fnuxt\u002Fenable-pwa-in-nuxt",{"title":201,"icon":202,"redirect":203,"path":204,"stem":205,"children":206,"page":111},"Performance","emojione:rocket","\u002Fposts\u002Fperformance\u002Fbackground-image-injection-problem","\u002Fposts\u002Fperformance","posts\u002Fperformance",[207],{"title":208,"path":203,"stem":209,"icon":79},"Background-Image injection problem in UX","posts\u002Fperformance\u002Fbackground-image-injection-problem",{"title":211,"icon":212,"redirect":213,"path":214,"stem":215,"children":216,"page":111},"Tutorial","fluent-color:book-open-lightbulb-24","\u002Fposts\u002Ftutorial\u002Fclassification-and-functionality-of-the-servers","\u002Fposts\u002Ftutorial","posts\u002Ftutorial",[217,220,224,228,232],{"title":218,"path":213,"stem":219,"icon":79},"Classification and functionality of the servers","posts\u002Ftutorial\u002Fclassification-and-functionality-of-the-servers",{"title":221,"path":222,"stem":223,"icon":79},"What is the difference between localhost and 127.0.0.1?","\u002Fposts\u002Ftutorial\u002Fdifferent-between-localhost-and-127-0-0-1","posts\u002Ftutorial\u002Fdifferent-between-localhost-and-127-0-0-1",{"title":225,"path":226,"stem":227,"icon":79},"8 essential network protocols every programmer should know","\u002Fposts\u002Ftutorial\u002Fessential-network-protocols","posts\u002Ftutorial\u002Fessential-network-protocols",{"title":229,"path":230,"stem":231,"icon":79},"Pre rels in header link tag - SEO technique enhancement","\u002Fposts\u002Ftutorial\u002Fpre-rels-in-header-link-tag","posts\u002Ftutorial\u002Fpre-rels-in-header-link-tag",{"title":233,"path":234,"stem":235,"icon":79},"Better code with SOLID principles","\u002Fposts\u002Ftutorial\u002Fwhat-is-solid","posts\u002Ftutorial\u002Fwhat-is-solid",{"title":237,"icon":238,"redirect":85,"path":239,"stem":240,"children":241,"page":111},"UI\u002FUX","devicon:figma","\u002Fposts\u002Fuiux","posts\u002Fuiux",[242],{"title":5,"path":85,"stem":89,"icon":79},{"title":244,"icon":245,"path":246,"stem":247,"children":248,"page":111},"Cheatsheets","fluent-color:paw-16","\u002Fcheatsheets","cheatsheets",[249,254,259,262,267,270,275,279,284,289,294,299,304,309,313,317,322,327,331,336,341,346],{"title":250,"path":251,"stem":252,"icon":253},"Bash","\u002Fcheatsheets\u002Fbash","cheatsheets\u002Fbash","material-icon-theme:powershell",{"title":255,"path":256,"stem":257,"icon":258},"CSS","\u002Fcheatsheets\u002Fcss","cheatsheets\u002Fcss","vscode-icons:file-type-css2",{"title":113,"path":260,"stem":261,"icon":114},"\u002Fcheatsheets\u002Fdocker","cheatsheets\u002Fdocker",{"title":263,"path":264,"stem":265,"icon":266},"Git","\u002Fcheatsheets\u002Fgit","cheatsheets\u002Fgit","devicon:git",{"title":157,"path":268,"stem":269,"icon":158},"\u002Fcheatsheets\u002Fgo","cheatsheets\u002Fgo",{"title":271,"path":272,"stem":273,"icon":274},"HTML","\u002Fcheatsheets\u002Fhtml","cheatsheets\u002Fhtml","material-icon-theme:html",{"title":167,"path":276,"stem":277,"icon":278},"\u002Fcheatsheets\u002Fjavascript","cheatsheets\u002Fjavascript","material-icon-theme:javascript",{"title":280,"path":281,"stem":282,"icon":283},"Latex","\u002Fcheatsheets\u002Flatex","cheatsheets\u002Flatex","material-icon-theme:latexmk",{"title":285,"path":286,"stem":287,"icon":288},"Linux","\u002Fcheatsheets\u002Flinux","cheatsheets\u002Flinux","devicon:linux",{"title":290,"path":291,"stem":292,"icon":293},"Markdown","\u002Fcheatsheets\u002Fmarkdown","cheatsheets\u002Fmarkdown","material-icon-theme:markdown",{"title":295,"path":296,"stem":297,"icon":298},"Mongo","\u002Fcheatsheets\u002Fmongo","cheatsheets\u002Fmongo","devicon:mongodb",{"title":300,"path":301,"stem":302,"icon":303},"Nest","\u002Fcheatsheets\u002Fnest","cheatsheets\u002Fnest","material-icon-theme:nest",{"title":305,"path":306,"stem":307,"icon":308},"Next","\u002Fcheatsheets\u002Fnext","cheatsheets\u002Fnext","logos:nextjs-icon",{"title":181,"path":310,"stem":311,"icon":312},"\u002Fcheatsheets\u002Fnode","cheatsheets\u002Fnode","material-icon-theme:nodejs",{"title":191,"path":314,"stem":315,"icon":316},"\u002Fcheatsheets\u002Fnuxt","cheatsheets\u002Fnuxt","material-icon-theme:nuxt",{"title":318,"path":319,"stem":320,"icon":321},"React","\u002Fcheatsheets\u002Freact","cheatsheets\u002Freact","material-icon-theme:react",{"title":323,"path":324,"stem":325,"icon":326},"Redis","\u002Fcheatsheets\u002Fredis","cheatsheets\u002Fredis","vscode-icons:folder-type-redis-opened",{"title":328,"path":329,"stem":330,"icon":103},"SQL","\u002Fcheatsheets\u002Fsql","cheatsheets\u002Fsql",{"title":332,"path":333,"stem":334,"icon":335},"Typescript","\u002Fcheatsheets\u002Ftypescript","cheatsheets\u002Ftypescript","material-icon-theme:typescript",{"title":337,"path":338,"stem":339,"icon":340},"Vercel","\u002Fcheatsheets\u002Fvercel","cheatsheets\u002Fvercel","vscode-icons:file-type-light-vercel",{"title":342,"path":343,"stem":344,"icon":345},"Vue","\u002Fcheatsheets\u002Fvue","cheatsheets\u002Fvue","material-icon-theme:vue",{"title":347,"path":348,"stem":349,"icon":350},"Windows","\u002Fcheatsheets\u002Fwindow","cheatsheets\u002Fwindow","material-icon-theme:folder-windows",{"title":352,"icon":353,"path":354,"stem":355,"children":356,"page":111},"Prompts","fluent-color:bot-sparkle-24","\u002Fprompts","prompts",[357],{"title":358,"path":359,"stem":360,"children":361,"page":111},"Image Generation","\u002Fprompts\u002Fimage-generation","prompts\u002Fimage-generation",[362],{"title":363,"path":364,"stem":365,"icon":353},"Futuristic Cloud Workspace","\u002Fprompts\u002Fimage-generation\u002Ffuturistic-cloud-workspace","prompts\u002Fimage-generation\u002Ffuturistic-cloud-workspace",{"title":367,"icon":368,"path":369,"stem":370,"children":371,"page":111},"Interviews","lucide:messages-square","\u002Finterviews","interviews",[372,376,381,384,388,393,398,403,408,413,418],{"title":373,"path":374,"stem":375,"icon":368},"Behavioral Engineering","\u002Finterviews\u002Fbehavioral-engineering","interviews\u002Fbehavioral-engineering",{"title":377,"path":378,"stem":379,"icon":380},"DevOps and Cloud","\u002Finterviews\u002Fdevops-cloud","interviews\u002Fdevops-cloud","logos:docker-icon",{"title":271,"path":382,"stem":383,"icon":274},"\u002Finterviews\u002Fhtml","interviews\u002Fhtml",{"title":167,"path":385,"stem":386,"icon":387},"\u002Finterviews\u002Fjavascript","interviews\u002Fjavascript","logos:javascript",{"title":389,"path":390,"stem":391,"icon":392},"Node.js and API Design","\u002Finterviews\u002Fnodejs-api","interviews\u002Fnodejs-api","logos:nodejs-icon",{"title":394,"path":395,"stem":396,"icon":397},"Software Testing","\u002Finterviews\u002Fsoftware-testing","interviews\u002Fsoftware-testing","lucide:flask-conical",{"title":399,"path":400,"stem":401,"icon":402},"SQL and Databases","\u002Finterviews\u002Fsql-databases","interviews\u002Fsql-databases","lucide:database",{"title":404,"path":405,"stem":406,"icon":407},"System Design","\u002Finterviews\u002Fsystem-design","interviews\u002Fsystem-design","lucide:network",{"title":409,"path":410,"stem":411,"icon":412},"TypeScript","\u002Finterviews\u002Ftypescript","interviews\u002Ftypescript","logos:typescript-icon",{"title":414,"path":415,"stem":416,"icon":417},"Vue and Nuxt","\u002Finterviews\u002Fvue-nuxt","interviews\u002Fvue-nuxt","logos:nuxt-icon",{"title":419,"path":420,"stem":421,"icon":422},"Web Security","\u002Finterviews\u002Fweb-security","interviews\u002Fweb-security","lucide:shield-check",[424,79],{"title":233,"path":234,"stem":235,"children":-1},[]]