[{"data":1,"prerenderedAt":17},["ShallowReactive",2],{"clay-page:\u002F4.x\u002Fwriting\u002Fcomponents\u002Fbadges":3},{"html":4,"toc":5,"description":13,"hero":14,"list":15,"socialImage":16},"\u003Ch1 id=\"badges\">Badges\u003C\u002Fh1>\n\u003Cp>Badges are small labels in a line of text or a heading: what is new, in beta or on its way out.\u003C\u002Fp>\n\u003Cdiv class=\"code-block\">\u003Cpre class=\"shiki shiki-themes light-plus dark-plus\" style=\"--shiki-light:#000000;--shiki-dark:#D4D4D4;--shiki-light-bg:#FFFFFF;--shiki-dark-bg:#1E1E1E\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#000000;--shiki-dark:#D4D4D4\">The \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#800000;--shiki-dark:#CE9178\">`--strict`\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#000000;--shiki-dark:#D4D4D4\"> option :badge[Since 2.0]{tip} fails builds with warnings.\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>\u003Cbutton type=\"button\" class=\"copy-code btn btn-sm btn-square btn-ghost\" title=\"Copy code\" aria-label=\"Copy code\">\u003Ci class=\"fa-solid fa-copy\">\u003C\u002Fi>\u003C\u002Fbutton>\u003C\u002Fdiv>\n\u003Cp>The \u003Ccode>--strict\u003C\u002Fcode> option \u003Cspan class=\"badge badge-sm badge-soft badge-success clay-badge\">Since 2.0\u003C\u002Fspan> fails builds with warnings.\u003C\u002Fp>\n\u003Ch2 id=\"types\">\u003Ca class=\"heading-anchor\" href=\"#types\" aria-label=\"Link to this section\" data-route=\"#types\">#\u003C\u002Fa>Types\u003C\u002Fh2>\n\u003Cp>Write the badge’s text in square brackets, and its type in braces. The types are named like the \u003Ca href=\"\u002Fclay-example-repo\u002F4.x\u002Fwriting\u002Falerts\" data-route=\"\u002F4.x\u002Fwriting\u002Falerts\">alerts\u003C\u002Fa>:\u003C\u002Fp>\n\u003Ctable>\n\u003Cthead>\n\u003Ctr>\n\u003Cth>Write\u003C\u002Fth>\n\u003Cth>Shows\u003C\u002Fth>\n\u003C\u002Ftr>\n\u003C\u002Fthead>\n\u003Ctbody>\u003Ctr>\n\u003Ctd>\u003Ccode>:badge[New]\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd>\u003Cspan class=\"badge badge-sm badge-soft badge-primary clay-badge\">New\u003C\u002Fspan>\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>\u003Ccode>:badge[Info]{info}\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd>\u003Cspan class=\"badge badge-sm badge-soft badge-info clay-badge\">Info\u003C\u002Fspan>\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>\u003Ccode>:badge[Note]{note}\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd>\u003Cspan class=\"badge badge-sm badge-soft badge-neutral clay-badge\">Note\u003C\u002Fspan>\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>\u003Ccode>:badge[Stable]{tip}\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd>\u003Cspan class=\"badge badge-sm badge-soft badge-success clay-badge\">Stable\u003C\u002Fspan>\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>\u003Ccode>:badge[Beta]{important}\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd>\u003Cspan class=\"badge badge-sm badge-soft badge-secondary clay-badge\">Beta\u003C\u002Fspan>\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>\u003Ccode>:badge[Deprecated]{warning}\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd>\u003Cspan class=\"badge badge-sm badge-soft badge-warning clay-badge\">Deprecated\u003C\u002Fspan>\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>\u003Ccode>:badge[Removed]{caution}\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd>\u003Cspan class=\"badge badge-sm badge-soft badge-error clay-badge\">Removed\u003C\u002Fspan>\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>\u003Ccode>:badge[Unsafe]{danger}\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd>\u003Cspan class=\"badge badge-sm badge-soft badge-error clay-badge\">Unsafe\u003C\u002Fspan>\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003C\u002Ftbody>\u003C\u002Ftable>\n\u003Cp>A type Clay does not know shows like a badge without a type.\u003C\u002Fp>\n\u003Ch2 id=\"in-headings\">\u003Ca class=\"heading-anchor\" href=\"#in-headings\" aria-label=\"Link to this section\" data-route=\"#in-headings\">#\u003C\u002Fa>In headings\u003C\u002Fh2>\n\u003Cdiv class=\"code-block\">\u003Cpre class=\"shiki shiki-themes light-plus dark-plus\" style=\"--shiki-light:#000000;--shiki-dark:#D4D4D4;--shiki-light-bg:#FFFFFF;--shiki-dark-bg:#1E1E1E\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#800000;--shiki-light-font-weight:bold;--shiki-dark:#569CD6;--shiki-dark-font-weight:bold\">### clay edit :badge[Since 3.0]{tip}\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>\u003Cbutton type=\"button\" class=\"copy-code btn btn-sm btn-square btn-ghost\" title=\"Copy code\" aria-label=\"Copy code\">\u003Ci class=\"fa-solid fa-copy\">\u003C\u002Fi>\u003C\u002Fbutton>\u003C\u002Fdiv>\n\u003Cp>A badge in a heading is part of the heading’s text, also for its \u003Ca href=\"\u002Fclay-example-repo\u002F4.x\u002Fwriting\u002Flinks-and-images\" data-route=\"\u002F4.x\u002Fwriting\u002Flinks-and-images\">\u003Ccode>#\u003C\u002Fcode> link\u003C\u002Fa>: the heading above is linked as \u003Ccode>#clay-edit-since-30\u003C\u002Fcode>. Put the badge in when you write the heading, so links to it do not change later.\u003C\u002Fp>\n\u003Cdiv class=\"markdown-alert markdown-alert-tip\">\n\u003Cp class=\"markdown-alert-title text-primary\">\u003Ci class=\"fa-solid fa-lightbulb mr-2\">\u003C\u002Fi>Tip\u003C\u002Fp>\n\u003Cp>One badge says a lot; a page full of them says nothing. Use them for what readers must not miss.\u003C\u002Fp>\n\u003C\u002Fdiv>\n",[6,10],{"id":7,"text":8,"level":9},"types","Types",2,{"id":11,"text":12,"level":9},"in-headings","In headings","Small labels in text and headings, like \"New\", \"Beta\" or \"Deprecated\", in the colors of the alerts.",null,false,"\u002F_clay\u002Fsocial\u002F4.x\u002Fwriting\u002Fcomponents\u002Fbadges.png",1792666369731]