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