[{"data":1,"prerenderedAt":636},["ShallowReactive",2],{"i-ph:sidebar":3,"i-ph:caret-left":8,"i-ph:caret-right":10,"components-badge":12,"i-ph:code":632,"i-ph:bell":634},{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":7},0,256,false,"\u003Cpath fill=\"currentColor\" d=\"M216 40H40a16 16 0 0 0-16 16v144a16 16 0 0 0 16 16h176a16 16 0 0 0 16-16V56a16 16 0 0 0-16-16M40 152h16a8 8 0 0 0 0-16H40v-16h16a8 8 0 0 0 0-16H40V88h16a8 8 0 0 0 0-16H40V56h40v144H40Zm176 48H96V56h120z\"\u002F>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":9},"\u003Cpath fill=\"currentColor\" d=\"M165.66 202.34a8 8 0 0 1-11.32 11.32l-80-80a8 8 0 0 1 0-11.32l80-80a8 8 0 0 1 11.32 11.32L91.31 128Z\"\u002F>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":11},"\u003Cpath fill=\"currentColor\" d=\"m181.66 133.66l-80 80a8 8 0 0 1-11.32-11.32L164.69 128L90.34 53.66a8 8 0 0 1 11.32-11.32l80 80a8 8 0 0 1 0 11.32\"\u002F>",{"id":13,"title":14,"body":15,"description":25,"extension":626,"meta":627,"navigation":104,"path":628,"seo":629,"stem":630,"__hash__":631},"docs\u002Fdocs\u002Fcomponents\u002Fbadge.md","Badge",{"type":16,"value":17,"toc":621},"minimark",[18,22,26,351,356,493,497,528,532,535,617],[19,20,14],"h1",{"id":21},"badge",[23,24,25],"p",{},"Badges are used to display a status of an object or action that a component has performed. Often used inside tables and other data lists.",[27,28,30],"badge-example",{"source-path":29},"Badge\u002FBadge.vue",[31,32,37],"pre",{"className":33,"code":34,"language":35,"meta":36,"style":36},"language-vue shiki shiki-themes vitesse-dark vitesse-light vitesse-dark","\u003Cscript setup>\nimport { Badge } from '@dolanske\u002Fvui'\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CBadge size=\"s\" variant=\"info\">\n    New\n  \u003C\u002FBadge>\n  \u003CBadge>\n    Overview\n  \u003C\u002FBadge>\n  \u003CBadge variant=\"success\" outline>\n    \u003CIcon name=\"ph:bell\" \u002F>\n    Subscribed\n  \u003C\u002FBadge>\n  \u003CBadge circle filled variant=\"warning\">\n    12\n  \u003C\u002FBadge>\n  \u003CBadge size=\"l\" variant=\"accent\">\n    Admin\n  \u003C\u002FBadge>\n\u003C\u002Ftemplate>\n","vue","",[38,39,40,60,89,99,106,116,152,159,169,178,184,193,216,240,246,255,281,287,296,327,333,342],"code",{"__ignoreMap":36},[41,42,45,49,53,57],"span",{"class":43,"line":44},"line",1,[41,46,48],{"class":47},"sP76a","\u003C",[41,50,52],{"class":51},"sKpE2","script",[41,54,56],{"class":55},"sflEz"," setup",[41,58,59],{"class":47},">\n",[41,61,63,66,69,72,75,78,82,86],{"class":43,"line":62},2,[41,64,65],{"class":51},"import",[41,67,68],{"class":47}," {",[41,70,71],{"class":55}," Badge",[41,73,74],{"class":47}," }",[41,76,77],{"class":51}," from",[41,79,81],{"class":80},"sBR95"," '",[41,83,85],{"class":84},"sfmH-","@dolanske\u002Fvui",[41,87,88],{"class":80},"'\n",[41,90,92,95,97],{"class":43,"line":91},3,[41,93,94],{"class":47},"\u003C\u002F",[41,96,52],{"class":51},[41,98,59],{"class":47},[41,100,102],{"class":43,"line":101},4,[41,103,105],{"emptyLinePlaceholder":104},true,"\n",[41,107,109,111,114],{"class":43,"line":108},5,[41,110,48],{"class":47},[41,112,113],{"class":51},"template",[41,115,59],{"class":47},[41,117,119,122,124,127,130,133,136,138,141,143,145,148,150],{"class":43,"line":118},6,[41,120,121],{"class":47},"  \u003C",[41,123,14],{"class":51},[41,125,126],{"class":55}," size",[41,128,129],{"class":47},"=",[41,131,132],{"class":80},"\"",[41,134,135],{"class":84},"s",[41,137,132],{"class":80},[41,139,140],{"class":55}," variant",[41,142,129],{"class":47},[41,144,132],{"class":80},[41,146,147],{"class":84},"info",[41,149,132],{"class":80},[41,151,59],{"class":47},[41,153,155],{"class":43,"line":154},7,[41,156,158],{"class":157},"sX1ls","    New\n",[41,160,162,165,167],{"class":43,"line":161},8,[41,163,164],{"class":47},"  \u003C\u002F",[41,166,14],{"class":51},[41,168,59],{"class":47},[41,170,172,174,176],{"class":43,"line":171},9,[41,173,121],{"class":47},[41,175,14],{"class":51},[41,177,59],{"class":47},[41,179,181],{"class":43,"line":180},10,[41,182,183],{"class":157},"    Overview\n",[41,185,187,189,191],{"class":43,"line":186},11,[41,188,164],{"class":47},[41,190,14],{"class":51},[41,192,59],{"class":47},[41,194,196,198,200,202,204,206,209,211,214],{"class":43,"line":195},12,[41,197,121],{"class":47},[41,199,14],{"class":51},[41,201,140],{"class":55},[41,203,129],{"class":47},[41,205,132],{"class":80},[41,207,208],{"class":84},"success",[41,210,132],{"class":80},[41,212,213],{"class":55}," outline",[41,215,59],{"class":47},[41,217,219,222,225,228,230,232,235,237],{"class":43,"line":218},13,[41,220,221],{"class":47},"    \u003C",[41,223,224],{"class":51},"Icon",[41,226,227],{"class":55}," name",[41,229,129],{"class":47},[41,231,132],{"class":80},[41,233,234],{"class":84},"ph:bell",[41,236,132],{"class":80},[41,238,239],{"class":47}," \u002F>\n",[41,241,243],{"class":43,"line":242},14,[41,244,245],{"class":157},"    Subscribed\n",[41,247,249,251,253],{"class":43,"line":248},15,[41,250,164],{"class":47},[41,252,14],{"class":51},[41,254,59],{"class":47},[41,256,258,260,262,265,268,270,272,274,277,279],{"class":43,"line":257},16,[41,259,121],{"class":47},[41,261,14],{"class":51},[41,263,264],{"class":55}," circle",[41,266,267],{"class":55}," filled",[41,269,140],{"class":55},[41,271,129],{"class":47},[41,273,132],{"class":80},[41,275,276],{"class":84},"warning",[41,278,132],{"class":80},[41,280,59],{"class":47},[41,282,284],{"class":43,"line":283},17,[41,285,286],{"class":157},"    12\n",[41,288,290,292,294],{"class":43,"line":289},18,[41,291,164],{"class":47},[41,293,14],{"class":51},[41,295,59],{"class":47},[41,297,299,301,303,305,307,309,312,314,316,318,320,323,325],{"class":43,"line":298},19,[41,300,121],{"class":47},[41,302,14],{"class":51},[41,304,126],{"class":55},[41,306,129],{"class":47},[41,308,132],{"class":80},[41,310,311],{"class":84},"l",[41,313,132],{"class":80},[41,315,140],{"class":55},[41,317,129],{"class":47},[41,319,132],{"class":80},[41,321,322],{"class":84},"accent",[41,324,132],{"class":80},[41,326,59],{"class":47},[41,328,330],{"class":43,"line":329},20,[41,331,332],{"class":157},"    Admin\n",[41,334,336,338,340],{"class":43,"line":335},21,[41,337,164],{"class":47},[41,339,14],{"class":51},[41,341,59],{"class":47},[41,343,345,347,349],{"class":43,"line":344},22,[41,346,94],{"class":47},[41,348,113],{"class":51},[41,350,59],{"class":47},[352,353,355],"h3",{"id":354},"props","Props",[357,358,359,375],"table",{},[360,361,362],"thead",{},[363,364,365,369,372],"tr",{},[366,367,368],"th",{},"Name",[366,370,371],{},"Default",[366,373,374],{},"Type",[376,377,378,414,434,452,475],"tbody",{},[363,379,380,386,391],{},[381,382,383],"td",{},[38,384,385],{},"variant",[381,387,388],{},[38,389,390],{},"neutral",[381,392,393,395,396,395,399,395,401,395,403,395,405,395,407,395,410,413],{},[38,394,390],{}," ",[38,397,398],{},"danger",[38,400,276],{},[38,402,208],{},[38,404,147],{},[38,406,322],{},[38,408,409],{},"note",[411,412],"br",{}," The visual style of the badge",[363,415,416,421,426],{},[381,417,418],{},[38,419,420],{},"outline",[381,422,423],{},[38,424,425],{},"false",[381,427,428,395,431,433],{},[38,429,430],{},"boolean",[411,432],{}," Whether to show the badge with an outline style",[363,435,436,441,445],{},[381,437,438],{},[38,439,440],{},"filled",[381,442,443],{},[38,444,425],{},[381,446,447,395,449,451],{},[38,448,430],{},[411,450],{}," Whether to show the badge with a filled background",[363,453,454,459,464],{},[381,455,456],{},[38,457,458],{},"size",[381,460,461],{},[38,462,463],{},"m",[381,465,466,395,468,395,470,395,472,474],{},[38,467,135],{},[38,469,463],{},[38,471,311],{},[411,473],{}," Controls the size of the badge",[363,476,477,482,486],{},[381,478,479],{},[38,480,481],{},"circle",[381,483,484],{},[38,485,425],{},[381,487,488,395,490,492],{},[38,489,430],{},[411,491],{}," Renders the badge as a circle. Useful for numeric counters or status dots",[352,494,496],{"id":495},"slots","Slots",[357,498,499,511],{},[360,500,501],{},[363,502,503,505,508],{},[366,504,368],{},[366,506,507],{},"Accepts",[366,509,510],{},"Description",[376,512,513],{},[363,514,515,520,525],{},[381,516,517],{},[38,518,519],{},"default",[381,521,522],{},[38,523,524],{},"any",[381,526,527],{},"Content to display inside the badge",[352,529,531],{"id":530},"tokens","Tokens",[23,533,534],{},"CSS variable tokens used for global or per-instance manipulation of certain styling.",[357,536,537,548],{},[360,538,539],{},[363,540,541,544,546],{},[366,542,543],{},"Token",[366,545,371],{},[366,547,510],{},[376,549,550,565,584,602],{},[363,551,552,557,562],{},[381,553,554],{},[38,555,556],{},"--vui-badge-padding-block",[381,558,559],{},[38,560,561],{},"2px",[381,563,564],{},"Vertical padding",[363,566,567,572,581],{},[381,568,569],{},[38,570,571],{},"--vui-badge-padding-inline",[381,573,574],{},[575,576,578],"a",{"href":577},"\u002Fdocs\u002Ftokens\u002Fspacing",[38,579,580],{},"var(--space-s)",[381,582,583],{},"Horizontal padding",[363,585,586,591,599],{},[381,587,588],{},[38,589,590],{},"--vui-badge-font-size",[381,592,593],{},[575,594,596],{"href":595},"\u002Fdocs\u002Ftokens\u002Ftext",[38,597,598],{},"var(--font-size-s)",[381,600,601],{},"Font size",[363,603,604,609,614],{},[381,605,606],{},[38,607,608],{},"--vui-badge-height",[381,610,611],{},[38,612,613],{},"24px",[381,615,616],{},"Badge height",[618,619,620],"style",{},"html pre.shiki code .sP76a, html code.shiki .sP76a{--shiki-dark:#666666;--shiki-light:#999999;--shiki-default:#666666}html pre.shiki code .sKpE2, html code.shiki .sKpE2{--shiki-dark:#4D9375;--shiki-light:#1E754F;--shiki-default:#4D9375}html pre.shiki code .sflEz, html code.shiki .sflEz{--shiki-dark:#BD976A;--shiki-light:#B07D48;--shiki-default:#BD976A}html pre.shiki code .sBR95, html code.shiki .sBR95{--shiki-dark:#C98A7D77;--shiki-light:#B5695977;--shiki-default:#C98A7D77}html pre.shiki code .sfmH-, html code.shiki .sfmH-{--shiki-dark:#C98A7D;--shiki-light:#B56959;--shiki-default:#C98A7D}html pre.shiki code .sX1ls, html code.shiki .sX1ls{--shiki-dark:#DBD7CAEE;--shiki-light:#393A34;--shiki-default:#DBD7CAEE}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 .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);}",{"title":36,"searchDepth":62,"depth":62,"links":622},[623,624,625],{"id":354,"depth":91,"text":355},{"id":495,"depth":91,"text":496},{"id":530,"depth":91,"text":531},"md",{},"\u002Fdocs\u002Fcomponents\u002Fbadge",{"title":14,"description":25},"docs\u002Fcomponents\u002Fbadge","ztODHVXMK9abO0r9tNScy4ljTnfk277KfWZZMlszzP8",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":633},"\u003Cpath fill=\"currentColor\" d=\"M69.12 94.15L28.5 128l40.62 33.85a8 8 0 1 1-10.24 12.29l-48-40a8 8 0 0 1 0-12.29l48-40a8 8 0 0 1 10.24 12.3m176 27.7l-48-40a8 8 0 1 0-10.24 12.3L227.5 128l-40.62 33.85a8 8 0 1 0 10.24 12.29l48-40a8 8 0 0 0 0-12.29m-82.39-89.37a8 8 0 0 0-10.25 4.79l-64 176a8 8 0 0 0 4.79 10.26A8.1 8.1 0 0 0 96 224a8 8 0 0 0 7.52-5.27l64-176a8 8 0 0 0-4.79-10.25\"\u002F>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":635},"\u003Cpath fill=\"currentColor\" d=\"M221.8 175.94c-5.55-9.56-13.8-36.61-13.8-71.94a80 80 0 1 0-160 0c0 35.34-8.26 62.38-13.81 71.94A16 16 0 0 0 48 200h40.81a40 40 0 0 0 78.38 0H208a16 16 0 0 0 13.8-24.06M128 216a24 24 0 0 1-22.62-16h45.24A24 24 0 0 1 128 216m-80-32c7.7-13.24 16-43.92 16-80a64 64 0 1 1 128 0c0 36.05 8.28 66.73 16 80Z\"\u002F>",1782200882405]