[{"data":1,"prerenderedAt":931},["ShallowReactive",2],{"\u002Fnext\u002Fdodock\u002Fdeveloppeurs\u002Fcomposants-ui\u002Futiliser-les-composants-ui":3,"section:\u002Fnext\u002Fdodock\u002Fdeveloppeurs\u002Fcomposants-ui\u002Futiliser-les-composants-ui":930},{"id":4,"title":5,"body":6,"description":917,"extension":918,"meta":919,"navigation":921,"path":926,"seo":927,"stem":928,"__hash__":929},"docs\u002F2.next\u002F3.dodock\u002F10.developpeurs\u002F03.composants-ui\u002Futiliser-les-composants-ui.md","Utiliser les composants d'interface",{"type":7,"value":8,"toc":911},"minimark",[9,13,32,37,40,109,112,262,271,274,355,372,376,387,515,520,524,535,639,643,650,894,901,907],[10,11,5],"h1",{"id":12},"utiliser-les-composants-dinterface",[14,15,16,17,21,22,25,26,31],"p",{},"Le desk dessine ses boutons avec ",[18,19,20],"code",{},"frappe.ui.button",". Un bouton écrit à la main (",[18,23,24],{},"\u003Cbutton class=\"btn btn-primary\">",") n'a pas le style Espresso ni ses comportements. Cette page montre comment le remplacer. La liste complète des options est dans la ",[27,28,30],"a",{"href":29},"\u002Fnext\u002Fdodock\u002Fdeveloppeurs\u002Fcomposants-ui\u002Fcomposants-ui-espresso","référence des composants Espresso",".",[33,34,36],"h2",{"id":35},"remplacer-un-bouton","Remplacer un bouton",[14,38,39],{},"Avant :",[41,42,47],"pre",{"className":43,"code":44,"language":45,"meta":46,"style":46},"language-html shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cbutton class=\"btn btn-primary\" onclick=\"soumettre()\">Soumettre\u003C\u002Fbutton>\n","html","",[18,48,49],{"__ignoreMap":46},[50,51,54,58,62,66,69,72,76,78,81,83,85,89,92,94,97,101,104,106],"span",{"class":52,"line":53},"line",1,[50,55,57],{"class":56},"sMK4o","\u003C",[50,59,61],{"class":60},"swJcz","button",[50,63,65],{"class":64},"spNyl"," class",[50,67,68],{"class":56},"=",[50,70,71],{"class":56},"\"",[50,73,75],{"class":74},"sfazB","btn btn-primary",[50,77,71],{"class":56},[50,79,80],{"class":64}," onclick",[50,82,68],{"class":56},[50,84,71],{"class":56},[50,86,88],{"class":87},"s2Zo4","soumettre",[50,90,91],{"class":74},"()",[50,93,71],{"class":56},[50,95,96],{"class":56},">",[50,98,100],{"class":99},"sTEyZ","Soumettre",[50,102,103],{"class":56},"\u003C\u002F",[50,105,61],{"class":60},[50,107,108],{"class":56},">\n",[14,110,111],{},"Après :",[41,113,117],{"className":114,"code":115,"language":116,"meta":46,"style":46},"language-js shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","const $btn = frappe.ui.button({\n    label: __(\"Submit\"),\n    variant: \"solid\",\n    onclick: () => soumettre(),\n});\nfrm.fields_dict.actions_html.$wrapper.empty().append($btn);\n","js",[18,118,119,147,174,192,213,224],{"__ignoreMap":46},[50,120,121,124,127,129,132,134,137,139,141,144],{"class":52,"line":53},[50,122,123],{"class":64},"const",[50,125,126],{"class":99}," $btn ",[50,128,68],{"class":56},[50,130,131],{"class":99}," frappe",[50,133,31],{"class":56},[50,135,136],{"class":99},"ui",[50,138,31],{"class":56},[50,140,61],{"class":87},[50,142,143],{"class":99},"(",[50,145,146],{"class":56},"{\n",[50,148,150,153,156,159,161,163,166,168,171],{"class":52,"line":149},2,[50,151,152],{"class":60},"    label",[50,154,155],{"class":56},":",[50,157,158],{"class":87}," __",[50,160,143],{"class":99},[50,162,71],{"class":56},[50,164,165],{"class":74},"Submit",[50,167,71],{"class":56},[50,169,170],{"class":99},")",[50,172,173],{"class":56},",\n",[50,175,177,180,182,185,188,190],{"class":52,"line":176},3,[50,178,179],{"class":60},"    variant",[50,181,155],{"class":56},[50,183,184],{"class":56}," \"",[50,186,187],{"class":74},"solid",[50,189,71],{"class":56},[50,191,173],{"class":56},[50,193,195,198,200,203,206,209,211],{"class":52,"line":194},4,[50,196,197],{"class":87},"    onclick",[50,199,155],{"class":56},[50,201,202],{"class":56}," ()",[50,204,205],{"class":64}," =>",[50,207,208],{"class":87}," soumettre",[50,210,91],{"class":99},[50,212,173],{"class":56},[50,214,216,219,221],{"class":52,"line":215},5,[50,217,218],{"class":56},"}",[50,220,170],{"class":99},[50,222,223],{"class":56},";\n",[50,225,227,230,232,235,237,240,242,245,247,250,252,254,257,260],{"class":52,"line":226},6,[50,228,229],{"class":99},"frm",[50,231,31],{"class":56},[50,233,234],{"class":99},"fields_dict",[50,236,31],{"class":56},[50,238,239],{"class":99},"actions_html",[50,241,31],{"class":56},[50,243,244],{"class":99},"$wrapper",[50,246,31],{"class":56},[50,248,249],{"class":87},"empty",[50,251,91],{"class":99},[50,253,31],{"class":56},[50,255,256],{"class":87},"append",[50,258,259],{"class":99},"($btn)",[50,261,223],{"class":56},[14,263,264,265,267,268,270],{},"Exemple fictif : ",[18,266,239],{}," est un champ HTML du formulaire, et ",[18,269,88],{}," une fonction de votre script.",[14,272,273],{},"Correspondance des anciennes classes :",[275,276,277,292],"table",{},[278,279,280],"thead",{},[281,282,283,287],"tr",{},[284,285,286],"th",{},"Ancienne classe",[284,288,289,290],{},"Options de ",[18,291,20],{},[293,294,295,308,325,337],"tbody",{},[281,296,297,303],{},[298,299,300],"td",{},[18,301,302],{},"btn-primary",[298,304,305],{},[18,306,307],{},"variant: \"solid\"",[281,309,310,319],{},[298,311,312,315,316],{},[18,313,314],{},"btn-default",", ",[18,317,318],{},"btn-secondary",[298,320,321,324],{},[18,322,323],{},"variant: \"subtle\""," (défaut)",[281,326,327,332],{},[298,328,329],{},[18,330,331],{},"btn-danger",[298,333,334],{},[18,335,336],{},"variant: \"solid\", theme: \"red\"",[281,338,339,347],{},[298,340,341,315,344],{},[18,342,343],{},"btn-xs",[18,345,346],{},"btn-sm",[298,348,349,315,352],{},[18,350,351],{},"size: \"xs\"",[18,353,354],{},"size: \"sm\"",[14,356,357,358,315,361,364,365,368,369,31],{},"Les icônes sont des noms d'icônes Lucide (",[18,359,360],{},"\"check\"",[18,362,363],{},"\"printer\"","), pas des classes ",[18,366,367],{},"i-mdi-*"," ni ",[18,370,371],{},"octicon",[33,373,375],{"id":374},"afficher-létat-de-chargement","Afficher l'état de chargement",[14,377,378,379,382,383,386],{},"Si ",[18,380,381],{},"onclick"," renvoie une promesse, le bouton affiche un indicateur et ignore les clics jusqu'à la fin de la promesse. Le libellé change pendant ce temps : « Save » devient « Saving... », « Delete » devient « Deleting... », « Submit » devient « Submitting... ». Passez ",[18,384,385],{},"loading_label"," pour un autre texte.",[41,388,390],{"className":114,"code":389,"language":116,"meta":46,"style":46},"frappe.ui.button({\n    label: __(\"Traiter les commandes\"),\n    loading_label: __(\"Traitement...\"),\n    variant: \"solid\",\n    onclick: () => frappe.call({ method: \"mon_app.api.traiter_commandes\" }),\n});\n",[18,391,392,409,430,452,466,507],{"__ignoreMap":46},[50,393,394,397,399,401,403,405,407],{"class":52,"line":53},[50,395,396],{"class":99},"frappe",[50,398,31],{"class":56},[50,400,136],{"class":99},[50,402,31],{"class":56},[50,404,61],{"class":87},[50,406,143],{"class":99},[50,408,146],{"class":56},[50,410,411,413,415,417,419,421,424,426,428],{"class":52,"line":149},[50,412,152],{"class":60},[50,414,155],{"class":56},[50,416,158],{"class":87},[50,418,143],{"class":99},[50,420,71],{"class":56},[50,422,423],{"class":74},"Traiter les commandes",[50,425,71],{"class":56},[50,427,170],{"class":99},[50,429,173],{"class":56},[50,431,432,435,437,439,441,443,446,448,450],{"class":52,"line":176},[50,433,434],{"class":60},"    loading_label",[50,436,155],{"class":56},[50,438,158],{"class":87},[50,440,143],{"class":99},[50,442,71],{"class":56},[50,444,445],{"class":74},"Traitement...",[50,447,71],{"class":56},[50,449,170],{"class":99},[50,451,173],{"class":56},[50,453,454,456,458,460,462,464],{"class":52,"line":194},[50,455,179],{"class":60},[50,457,155],{"class":56},[50,459,184],{"class":56},[50,461,187],{"class":74},[50,463,71],{"class":56},[50,465,173],{"class":56},[50,467,468,470,472,474,476,478,480,483,485,488,491,493,495,498,500,503,505],{"class":52,"line":215},[50,469,197],{"class":87},[50,471,155],{"class":56},[50,473,202],{"class":56},[50,475,205],{"class":64},[50,477,131],{"class":99},[50,479,31],{"class":56},[50,481,482],{"class":87},"call",[50,484,143],{"class":99},[50,486,487],{"class":56},"{",[50,489,490],{"class":60}," method",[50,492,155],{"class":56},[50,494,184],{"class":56},[50,496,497],{"class":74},"mon_app.api.traiter_commandes",[50,499,71],{"class":56},[50,501,502],{"class":56}," }",[50,504,170],{"class":99},[50,506,173],{"class":56},[50,508,509,511,513],{"class":52,"line":226},[50,510,218],{"class":56},[50,512,170],{"class":99},[50,514,223],{"class":56},[14,516,264,517,519],{},[18,518,497],{}," est une méthode de votre application.",[33,521,523],{"id":522},"bouton-avec-seulement-une-icône","Bouton avec seulement une icône",[14,525,526,527,530,531,534],{},"Un bouton sans libellé est carré. Donnez-lui ",[18,528,529],{},"tooltip"," : le texte sert aussi d'",[18,532,533],{},"aria-label"," pour les lecteurs d'écran.",[41,536,538],{"className":114,"code":537,"language":116,"meta":46,"style":46},"frappe.ui.button({\n    icon: \"printer\",\n    variant: \"ghost\",\n    tooltip: __(\"Print\"),\n    onclick: () => frm.print_doc(),\n});\n",[18,539,540,556,572,587,609,631],{"__ignoreMap":46},[50,541,542,544,546,548,550,552,554],{"class":52,"line":53},[50,543,396],{"class":99},[50,545,31],{"class":56},[50,547,136],{"class":99},[50,549,31],{"class":56},[50,551,61],{"class":87},[50,553,143],{"class":99},[50,555,146],{"class":56},[50,557,558,561,563,565,568,570],{"class":52,"line":149},[50,559,560],{"class":60},"    icon",[50,562,155],{"class":56},[50,564,184],{"class":56},[50,566,567],{"class":74},"printer",[50,569,71],{"class":56},[50,571,173],{"class":56},[50,573,574,576,578,580,583,585],{"class":52,"line":176},[50,575,179],{"class":60},[50,577,155],{"class":56},[50,579,184],{"class":56},[50,581,582],{"class":74},"ghost",[50,584,71],{"class":56},[50,586,173],{"class":56},[50,588,589,592,594,596,598,600,603,605,607],{"class":52,"line":194},[50,590,591],{"class":60},"    tooltip",[50,593,155],{"class":56},[50,595,158],{"class":87},[50,597,143],{"class":99},[50,599,71],{"class":56},[50,601,602],{"class":74},"Print",[50,604,71],{"class":56},[50,606,170],{"class":99},[50,608,173],{"class":56},[50,610,611,613,615,617,619,622,624,627,629],{"class":52,"line":215},[50,612,197],{"class":87},[50,614,155],{"class":56},[50,616,202],{"class":56},[50,618,205],{"class":64},[50,620,621],{"class":99}," frm",[50,623,31],{"class":56},[50,625,626],{"class":87},"print_doc",[50,628,91],{"class":99},[50,630,173],{"class":56},[50,632,633,635,637],{"class":52,"line":226},[50,634,218],{"class":56},[50,636,170],{"class":99},[50,638,223],{"class":56},[33,640,642],{"id":641},"générer-le-html-dune-liste-de-boutons","Générer le HTML d'une liste de boutons",[14,644,645,646,649],{},"Dans une vue construite en chaînes HTML, utilisez ",[18,647,648],{},"frappe.ui.button.html(opts)",". Cette forme n'attache pas de gestionnaire : liez le clic avec une délégation d'événement.",[41,651,653],{"className":114,"code":652,"language":116,"meta":46,"style":46},"const html = rows.map((row) =>\n    frappe.ui.button.html({ label: __(\"Open\"), size: \"xs\", attrs: { \"data-name\": row.name } })\n).join(\"\");\n$container.html(html).on(\"click\", \".es-button\", (e) => frappe.set_route(\"Form\", \"ToDo\", $(e.currentTarget).attr(\"data-name\")));\n",[18,654,655,685,773,791],{"__ignoreMap":46},[50,656,657,659,662,664,667,669,672,674,676,680,682],{"class":52,"line":53},[50,658,123],{"class":64},[50,660,661],{"class":99}," html ",[50,663,68],{"class":56},[50,665,666],{"class":99}," rows",[50,668,31],{"class":56},[50,670,671],{"class":87},"map",[50,673,143],{"class":99},[50,675,143],{"class":56},[50,677,679],{"class":678},"sHdIc","row",[50,681,170],{"class":56},[50,683,684],{"class":64}," =>\n",[50,686,687,690,692,694,696,698,700,702,704,706,709,711,713,715,717,720,722,724,727,730,732,734,737,739,741,744,746,749,751,754,756,758,761,763,766,768,770],{"class":52,"line":149},[50,688,689],{"class":99},"    frappe",[50,691,31],{"class":56},[50,693,136],{"class":99},[50,695,31],{"class":56},[50,697,61],{"class":99},[50,699,31],{"class":56},[50,701,45],{"class":87},[50,703,143],{"class":99},[50,705,487],{"class":56},[50,707,708],{"class":60}," label",[50,710,155],{"class":56},[50,712,158],{"class":87},[50,714,143],{"class":99},[50,716,71],{"class":56},[50,718,719],{"class":74},"Open",[50,721,71],{"class":56},[50,723,170],{"class":99},[50,725,726],{"class":56},",",[50,728,729],{"class":60}," size",[50,731,155],{"class":56},[50,733,184],{"class":56},[50,735,736],{"class":74},"xs",[50,738,71],{"class":56},[50,740,726],{"class":56},[50,742,743],{"class":60}," attrs",[50,745,155],{"class":56},[50,747,748],{"class":56}," {",[50,750,184],{"class":56},[50,752,753],{"class":60},"data-name",[50,755,71],{"class":56},[50,757,155],{"class":56},[50,759,760],{"class":99}," row",[50,762,31],{"class":56},[50,764,765],{"class":99},"name ",[50,767,218],{"class":56},[50,769,502],{"class":56},[50,771,772],{"class":99},")\n",[50,774,775,777,779,782,784,787,789],{"class":52,"line":176},[50,776,170],{"class":99},[50,778,31],{"class":56},[50,780,781],{"class":87},"join",[50,783,143],{"class":99},[50,785,786],{"class":56},"\"\"",[50,788,170],{"class":99},[50,790,223],{"class":56},[50,792,793,796,798,800,803,805,808,810,812,815,817,819,821,824,826,828,831,834,836,838,840,842,845,847,849,852,854,856,858,861,863,865,868,871,873,876,878,881,883,885,887,889,892],{"class":52,"line":194},[50,794,795],{"class":99},"$container",[50,797,31],{"class":56},[50,799,45],{"class":87},[50,801,802],{"class":99},"(html)",[50,804,31],{"class":56},[50,806,807],{"class":87},"on",[50,809,143],{"class":99},[50,811,71],{"class":56},[50,813,814],{"class":74},"click",[50,816,71],{"class":56},[50,818,726],{"class":56},[50,820,184],{"class":56},[50,822,823],{"class":74},".es-button",[50,825,71],{"class":56},[50,827,726],{"class":56},[50,829,830],{"class":56}," (",[50,832,833],{"class":678},"e",[50,835,170],{"class":56},[50,837,205],{"class":64},[50,839,131],{"class":99},[50,841,31],{"class":56},[50,843,844],{"class":87},"set_route",[50,846,143],{"class":99},[50,848,71],{"class":56},[50,850,851],{"class":74},"Form",[50,853,71],{"class":56},[50,855,726],{"class":56},[50,857,184],{"class":56},[50,859,860],{"class":74},"ToDo",[50,862,71],{"class":56},[50,864,726],{"class":56},[50,866,867],{"class":87}," $",[50,869,870],{"class":99},"(e",[50,872,31],{"class":56},[50,874,875],{"class":99},"currentTarget)",[50,877,31],{"class":56},[50,879,880],{"class":87},"attr",[50,882,143],{"class":99},[50,884,71],{"class":56},[50,886,753],{"class":74},[50,888,71],{"class":56},[50,890,891],{"class":99},")))",[50,893,223],{"class":56},[14,895,896,897,900],{},"Le libellé et les attributs sont échappés. Les attributs ",[18,898,899],{},"on*"," sont refusés.",[14,902,903,904,31],{},"Pour appliquer le style Espresso à un bouton qui existe déjà, utilisez ",[18,905,906],{},"frappe.ui.button.dress(element, opts)",[908,909,910],"style",{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sHdIc, html code.shiki .sHdIc{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#EEFFFF;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic}",{"title":46,"searchDepth":53,"depth":149,"links":912},[913,914,915,916],{"id":35,"depth":149,"text":36},{"id":374,"depth":149,"text":375},{"id":522,"depth":149,"text":523},{"id":641,"depth":149,"text":642},"Remplacer un bouton Bootstrap écrit à la main par frappe.ui.button dans un script client ou une page du desk, avec état de chargement et info-bulle.","md",{"icon":920,"reviewed":921,"last_verified":922,"sources":923},"i-mdi-puzzle",true,"2026-11-03",[924,925],"dodock@develop:frappe\u002Fpublic\u002Fjs\u002Ffrappe\u002Fui\u002Fcomponents\u002Fbutton.js","dodock@develop:frappe\u002Fpublic\u002Fjs\u002Ffrappe\u002Fui\u002Fpage.js","\u002Fnext\u002Fdodock\u002Fdeveloppeurs\u002Fcomposants-ui\u002Futiliser-les-composants-ui",{"title":5,"description":917},"2.next\u002F3.dodock\u002F10.developpeurs\u002F03.composants-ui\u002Futiliser-les-composants-ui","tXx3uKDzZGIuultT6mx8cCrf2o0mqEQKyx1_POtBpZM",{},1793871741524]