[{"data":1,"prerenderedAt":1029},["ShallowReactive",2],{"api-none":3,"docs-nav-en":4,"locale-alternates":232,"page-en-\u002Fcomponents\u002Fbb-badge":353,"pt-showcase-BbBadge":929},null,[5,16,25,46,58,100,133,166,187,208,220,226],{"label":6,"entries":7},"Getting started",[8,12],{"title":9,"path":10,"component":-1,"order":11},"Installation","\u002Fguides\u002Finstallation",1,{"title":13,"path":14,"component":-1,"order":15},"Migrating from v2","\u002Fguides\u002Fmigration",2,{"label":17,"entries":18},"Design system",[19,22],{"title":20,"path":21,"component":-1,"order":11},"Design tokens","\u002Fguides\u002Fdesign-tokens",{"title":23,"path":24,"component":-1,"order":15},"Design language","\u002Fguides\u002Fdesign-language",{"label":26,"entries":27},"Playbooks",[28,31,34,38,42],{"title":29,"path":30,"component":-1,"order":11},"Options and items","\u002Fguides\u002Foptions-and-items",{"title":32,"path":33,"component":-1,"order":15},"Fetching data","\u002Fguides\u002Ffetching-data",{"title":35,"path":36,"component":-1,"order":37},"Coherence","\u002Fguides\u002Fcoherence",3,{"title":39,"path":40,"component":-1,"order":41},"Validated forms","\u002Fguides\u002Fvalidated-forms",4,{"title":43,"path":44,"component":-1,"order":45},"Icons","\u002Fguides\u002Ficons",5,{"label":47,"entries":48},"Ecosystem",[49,52,55],{"title":50,"path":51,"component":-1,"order":11},"Inertia and Laravel","\u002Fguides\u002Finertia",{"title":53,"path":54,"component":-1,"order":15},"Nuxt","\u002Fguides\u002Fnuxt",{"title":56,"path":57,"component":-1,"order":37},"AI agents","\u002Fguides\u002Fai-agents",{"label":59,"entries":60},"Inputs",[61,64,67,70,73,76,80,84,88,92,96],{"title":62,"path":63,"component":62,"order":11},"BbBaseButton","\u002Fcomponents\u002Fbb-base-button",{"title":65,"path":66,"component":65,"order":15},"BbButton","\u002Fcomponents\u002Fbb-button",{"title":68,"path":69,"component":68,"order":37},"BbColorInput","\u002Fcomponents\u002Fbb-color-input",{"title":71,"path":72,"component":71,"order":41},"BbDatePickerInput","\u002Fcomponents\u002Fbb-date-picker-input",{"title":74,"path":75,"component":74,"order":45},"BbDropzone","\u002Fcomponents\u002Fbb-dropzone",{"title":77,"path":78,"component":77,"order":79},"BbForm","\u002Fcomponents\u002Fbb-form",6,{"title":81,"path":82,"component":81,"order":83},"BbNumberInput","\u002Fcomponents\u002Fbb-number-input",7,{"title":85,"path":86,"component":85,"order":87},"BbTag","\u002Fcomponents\u002Fbb-tag",8,{"title":89,"path":90,"component":89,"order":91},"BbTextarea","\u002Fcomponents\u002Fbb-textarea",9,{"title":93,"path":94,"component":93,"order":95},"BbTextInput","\u002Fcomponents\u002Fbb-text-input",10,{"title":97,"path":98,"component":97,"order":99},"BbTimePickerInput","\u002Fcomponents\u002Fbb-time-picker-input",11,{"label":101,"entries":102},"Selection",[103,106,109,112,115,118,121,124,127,130],{"title":104,"path":105,"component":104,"order":11},"BbCheckbox","\u002Fcomponents\u002Fbb-checkbox",{"title":107,"path":108,"component":107,"order":15},"BbCheckboxGroup","\u002Fcomponents\u002Fbb-checkbox-group",{"title":110,"path":111,"component":110,"order":37},"BbRadio","\u002Fcomponents\u002Fbb-radio",{"title":113,"path":114,"component":113,"order":41},"BbRadioGroup","\u002Fcomponents\u002Fbb-radio-group",{"title":116,"path":117,"component":116,"order":45},"BbRating","\u002Fcomponents\u002Fbb-rating",{"title":119,"path":120,"component":119,"order":79},"BbSelect","\u002Fcomponents\u002Fbb-select",{"title":122,"path":123,"component":122,"order":83},"BbSelectPopover","\u002Fcomponents\u002Fbb-select-popover",{"title":125,"path":126,"component":125,"order":87},"BbSlider","\u002Fcomponents\u002Fbb-slider",{"title":128,"path":129,"component":128,"order":91},"BbSwitch","\u002Fcomponents\u002Fbb-switch",{"title":131,"path":132,"component":131,"order":95},"BbSwitchGroup","\u002Fcomponents\u002Fbb-switch-group",{"label":134,"entries":135},"Overlay",[136,139,142,145,148,151,154,157,160,163],{"title":137,"path":138,"component":137,"order":11},"BbColorPalette","\u002Fcomponents\u002Fbb-color-palette",{"title":140,"path":141,"component":140,"order":15},"BbConfirm","\u002Fcomponents\u002Fbb-confirm",{"title":143,"path":144,"component":143,"order":37},"BbDatePicker","\u002Fcomponents\u002Fbb-date-picker",{"title":146,"path":147,"component":146,"order":41},"BbDialog","\u002Fcomponents\u002Fbb-dialog",{"title":149,"path":150,"component":149,"order":45},"BbDropdown","\u002Fcomponents\u002Fbb-dropdown",{"title":152,"path":153,"component":152,"order":79},"BbDropdownButton","\u002Fcomponents\u002Fbb-dropdown-button",{"title":155,"path":156,"component":155,"order":83},"BbOffCanvas","\u002Fcomponents\u002Fbb-off-canvas",{"title":158,"path":159,"component":158,"order":87},"BbPopover","\u002Fcomponents\u002Fbb-popover",{"title":161,"path":162,"component":161,"order":91},"BbTimePicker","\u002Fcomponents\u002Fbb-time-picker",{"title":164,"path":165,"component":164,"order":95},"BbTooltip","\u002Fcomponents\u002Fbb-tooltip",{"label":167,"entries":168},"Navigation",[169,172,175,178,181,184],{"title":170,"path":171,"component":170,"order":11},"BbAccordion","\u002Fcomponents\u002Fbb-accordion",{"title":173,"path":174,"component":173,"order":15},"BbBreadcrumbs","\u002Fcomponents\u002Fbb-breadcrumbs",{"title":176,"path":177,"component":176,"order":37},"BbCollapsible","\u002Fcomponents\u002Fbb-collapsible",{"title":179,"path":180,"component":179,"order":41},"BbPagination","\u002Fcomponents\u002Fbb-pagination",{"title":182,"path":183,"component":182,"order":45},"BbTabs","\u002Fcomponents\u002Fbb-tabs",{"title":185,"path":186,"component":185,"order":79},"BbTree","\u002Fcomponents\u002Fbb-tree",{"label":188,"entries":189},"Feedback",[190,193,196,199,202,205],{"title":191,"path":192,"component":191,"order":11},"BbAlert","\u002Fcomponents\u002Fbb-alert",{"title":194,"path":195,"component":194,"order":15},"BbBadge","\u002Fcomponents\u002Fbb-badge",{"title":197,"path":198,"component":197,"order":37},"BbIndicator","\u002Fcomponents\u002Fbb-indicator",{"title":200,"path":201,"component":200,"order":41},"BbProgress","\u002Fcomponents\u002Fbb-progress",{"title":203,"path":204,"component":203,"order":45},"BbSpinner","\u002Fcomponents\u002Fbb-spinner",{"title":206,"path":207,"component":206,"order":79},"BbToast","\u002Fcomponents\u002Fbb-toast",{"label":209,"entries":210},"Data Display",[211,214,217],{"title":212,"path":213,"component":212,"order":11},"BbAvatar","\u002Fcomponents\u002Fbb-avatar",{"title":215,"path":216,"component":215,"order":15},"BbIcon","\u002Fcomponents\u002Fbb-icon",{"title":218,"path":219,"component":218,"order":37},"BbTable","\u002Fcomponents\u002Fbb-table",{"label":221,"entries":222},"Layout & Utility",[223],{"title":224,"path":225,"component":224,"order":11},"BbSmoothHeight","\u002Fcomponents\u002Fbb-smooth-height",{"label":227,"entries":228},"Other",[229],{"title":230,"path":231,"component":230,"order":11},"BbAsterisk","\u002Fcomponents\u002Fbb-asterisk",{"\u002Fit\u002Fcomponenti\u002Fbb-accordion":233,"\u002Fen\u002Fcomponents\u002Fbb-accordion":234,"\u002Fit\u002Fcomponenti\u002Fbb-alert":235,"\u002Fen\u002Fcomponents\u002Fbb-alert":236,"\u002Fit\u002Fcomponenti\u002Fbb-asterisk":237,"\u002Fen\u002Fcomponents\u002Fbb-asterisk":238,"\u002Fit\u002Fcomponenti\u002Fbb-avatar":239,"\u002Fen\u002Fcomponents\u002Fbb-avatar":240,"\u002Fit\u002Fcomponenti\u002Fbb-badge":241,"\u002Fen\u002Fcomponents\u002Fbb-badge":242,"\u002Fit\u002Fcomponenti\u002Fbb-base-button":243,"\u002Fen\u002Fcomponents\u002Fbb-base-button":244,"\u002Fit\u002Fcomponenti\u002Fbb-breadcrumbs":245,"\u002Fen\u002Fcomponents\u002Fbb-breadcrumbs":246,"\u002Fit\u002Fcomponenti\u002Fbb-button":247,"\u002Fen\u002Fcomponents\u002Fbb-button":248,"\u002Fit\u002Fcomponenti\u002Fbb-checkbox":249,"\u002Fen\u002Fcomponents\u002Fbb-checkbox":250,"\u002Fit\u002Fcomponenti\u002Fbb-checkbox-group":251,"\u002Fen\u002Fcomponents\u002Fbb-checkbox-group":252,"\u002Fit\u002Fcomponenti\u002Fbb-collapsible":253,"\u002Fen\u002Fcomponents\u002Fbb-collapsible":254,"\u002Fit\u002Fcomponenti\u002Fbb-color-input":255,"\u002Fen\u002Fcomponents\u002Fbb-color-input":256,"\u002Fit\u002Fcomponenti\u002Fbb-color-palette":257,"\u002Fen\u002Fcomponents\u002Fbb-color-palette":258,"\u002Fit\u002Fcomponenti\u002Fbb-confirm":259,"\u002Fen\u002Fcomponents\u002Fbb-confirm":260,"\u002Fit\u002Fcomponenti\u002Fbb-date-picker":261,"\u002Fen\u002Fcomponents\u002Fbb-date-picker":262,"\u002Fit\u002Fcomponenti\u002Fbb-date-picker-input":263,"\u002Fen\u002Fcomponents\u002Fbb-date-picker-input":264,"\u002Fit\u002Fcomponenti\u002Fbb-dialog":265,"\u002Fen\u002Fcomponents\u002Fbb-dialog":266,"\u002Fit\u002Fcomponenti\u002Fbb-dropdown":267,"\u002Fen\u002Fcomponents\u002Fbb-dropdown":268,"\u002Fit\u002Fcomponenti\u002Fbb-dropdown-button":269,"\u002Fen\u002Fcomponents\u002Fbb-dropdown-button":270,"\u002Fit\u002Fcomponenti\u002Fbb-dropzone":271,"\u002Fen\u002Fcomponents\u002Fbb-dropzone":272,"\u002Fit\u002Fcomponenti\u002Fbb-form":273,"\u002Fen\u002Fcomponents\u002Fbb-form":274,"\u002Fit\u002Fcomponenti\u002Fbb-icon":275,"\u002Fen\u002Fcomponents\u002Fbb-icon":276,"\u002Fit\u002Fcomponenti\u002Fbb-indicator":277,"\u002Fen\u002Fcomponents\u002Fbb-indicator":278,"\u002Fit\u002Fcomponenti\u002Fbb-number-input":279,"\u002Fen\u002Fcomponents\u002Fbb-number-input":280,"\u002Fit\u002Fcomponenti\u002Fbb-off-canvas":281,"\u002Fen\u002Fcomponents\u002Fbb-off-canvas":282,"\u002Fit\u002Fcomponenti\u002Fbb-pagination":283,"\u002Fen\u002Fcomponents\u002Fbb-pagination":284,"\u002Fit\u002Fcomponenti\u002Fbb-popover":285,"\u002Fen\u002Fcomponents\u002Fbb-popover":286,"\u002Fit\u002Fcomponenti\u002Fbb-progress":287,"\u002Fen\u002Fcomponents\u002Fbb-progress":288,"\u002Fit\u002Fcomponenti\u002Fbb-radio":289,"\u002Fen\u002Fcomponents\u002Fbb-radio":290,"\u002Fit\u002Fcomponenti\u002Fbb-radio-group":291,"\u002Fen\u002Fcomponents\u002Fbb-radio-group":292,"\u002Fit\u002Fcomponenti\u002Fbb-rating":293,"\u002Fen\u002Fcomponents\u002Fbb-rating":294,"\u002Fit\u002Fcomponenti\u002Fbb-select":295,"\u002Fen\u002Fcomponents\u002Fbb-select":296,"\u002Fit\u002Fcomponenti\u002Fbb-select-popover":297,"\u002Fen\u002Fcomponents\u002Fbb-select-popover":298,"\u002Fit\u002Fcomponenti\u002Fbb-slider":299,"\u002Fen\u002Fcomponents\u002Fbb-slider":300,"\u002Fit\u002Fcomponenti\u002Fbb-smooth-height":301,"\u002Fen\u002Fcomponents\u002Fbb-smooth-height":302,"\u002Fit\u002Fcomponenti\u002Fbb-spinner":303,"\u002Fen\u002Fcomponents\u002Fbb-spinner":304,"\u002Fit\u002Fcomponenti\u002Fbb-switch":305,"\u002Fen\u002Fcomponents\u002Fbb-switch":306,"\u002Fit\u002Fcomponenti\u002Fbb-switch-group":307,"\u002Fen\u002Fcomponents\u002Fbb-switch-group":308,"\u002Fit\u002Fcomponenti\u002Fbb-table":309,"\u002Fen\u002Fcomponents\u002Fbb-table":310,"\u002Fit\u002Fcomponenti\u002Fbb-tabs":311,"\u002Fen\u002Fcomponents\u002Fbb-tabs":312,"\u002Fit\u002Fcomponenti\u002Fbb-tag":313,"\u002Fen\u002Fcomponents\u002Fbb-tag":314,"\u002Fit\u002Fcomponenti\u002Fbb-text-input":315,"\u002Fen\u002Fcomponents\u002Fbb-text-input":316,"\u002Fit\u002Fcomponenti\u002Fbb-textarea":317,"\u002Fen\u002Fcomponents\u002Fbb-textarea":318,"\u002Fit\u002Fcomponenti\u002Fbb-time-picker":319,"\u002Fen\u002Fcomponents\u002Fbb-time-picker":320,"\u002Fit\u002Fcomponenti\u002Fbb-time-picker-input":321,"\u002Fen\u002Fcomponents\u002Fbb-time-picker-input":322,"\u002Fit\u002Fcomponenti\u002Fbb-toast":323,"\u002Fen\u002Fcomponents\u002Fbb-toast":324,"\u002Fit\u002Fcomponenti\u002Fbb-tooltip":325,"\u002Fen\u002Fcomponents\u002Fbb-tooltip":326,"\u002Fit\u002Fcomponenti\u002Fbb-tree":327,"\u002Fen\u002Fcomponents\u002Fbb-tree":328,"\u002Fit\u002Fguide\u002Fai-agents":329,"\u002Fen\u002Fguides\u002Fai-agents":330,"\u002Fit\u002Fguide\u002Fcoherence":331,"\u002Fen\u002Fguides\u002Fcoherence":332,"\u002Fit\u002Fguide\u002Fdesign-language":333,"\u002Fen\u002Fguides\u002Fdesign-language":334,"\u002Fit\u002Fguide\u002Fdesign-tokens":335,"\u002Fen\u002Fguides\u002Fdesign-tokens":336,"\u002Fit\u002Fguide\u002Ffetching-data":337,"\u002Fen\u002Fguides\u002Ffetching-data":338,"\u002Fit\u002Fguide\u002Ficons":339,"\u002Fen\u002Fguides\u002Ficons":340,"\u002Fit\u002Fguide\u002Finertia":341,"\u002Fen\u002Fguides\u002Finertia":342,"\u002Fit\u002Fguide\u002Finstallation":343,"\u002Fen\u002Fguides\u002Finstallation":344,"\u002Fit\u002Fguide\u002Fmigration":345,"\u002Fen\u002Fguides\u002Fmigration":346,"\u002Fit\u002Fguide\u002Fnuxt":347,"\u002Fen\u002Fguides\u002Fnuxt":348,"\u002Fit\u002Fguide\u002Foptions-and-items":349,"\u002Fen\u002Fguides\u002Foptions-and-items":350,"\u002Fit\u002Fguide\u002Fvalidated-forms":351,"\u002Fen\u002Fguides\u002Fvalidated-forms":352},"\u002Fen\u002Fcomponents\u002Fbb-accordion","\u002Fit\u002Fcomponenti\u002Fbb-accordion","\u002Fen\u002Fcomponents\u002Fbb-alert","\u002Fit\u002Fcomponenti\u002Fbb-alert","\u002Fen\u002Fcomponents\u002Fbb-asterisk","\u002Fit\u002Fcomponenti\u002Fbb-asterisk","\u002Fen\u002Fcomponents\u002Fbb-avatar","\u002Fit\u002Fcomponenti\u002Fbb-avatar","\u002Fen\u002Fcomponents\u002Fbb-badge","\u002Fit\u002Fcomponenti\u002Fbb-badge","\u002Fen\u002Fcomponents\u002Fbb-base-button","\u002Fit\u002Fcomponenti\u002Fbb-base-button","\u002Fen\u002Fcomponents\u002Fbb-breadcrumbs","\u002Fit\u002Fcomponenti\u002Fbb-breadcrumbs","\u002Fen\u002Fcomponents\u002Fbb-button","\u002Fit\u002Fcomponenti\u002Fbb-button","\u002Fen\u002Fcomponents\u002Fbb-checkbox","\u002Fit\u002Fcomponenti\u002Fbb-checkbox","\u002Fen\u002Fcomponents\u002Fbb-checkbox-group","\u002Fit\u002Fcomponenti\u002Fbb-checkbox-group","\u002Fen\u002Fcomponents\u002Fbb-collapsible","\u002Fit\u002Fcomponenti\u002Fbb-collapsible","\u002Fen\u002Fcomponents\u002Fbb-color-input","\u002Fit\u002Fcomponenti\u002Fbb-color-input","\u002Fen\u002Fcomponents\u002Fbb-color-palette","\u002Fit\u002Fcomponenti\u002Fbb-color-palette","\u002Fen\u002Fcomponents\u002Fbb-confirm","\u002Fit\u002Fcomponenti\u002Fbb-confirm","\u002Fen\u002Fcomponents\u002Fbb-date-picker","\u002Fit\u002Fcomponenti\u002Fbb-date-picker","\u002Fen\u002Fcomponents\u002Fbb-date-picker-input","\u002Fit\u002Fcomponenti\u002Fbb-date-picker-input","\u002Fen\u002Fcomponents\u002Fbb-dialog","\u002Fit\u002Fcomponenti\u002Fbb-dialog","\u002Fen\u002Fcomponents\u002Fbb-dropdown","\u002Fit\u002Fcomponenti\u002Fbb-dropdown","\u002Fen\u002Fcomponents\u002Fbb-dropdown-button","\u002Fit\u002Fcomponenti\u002Fbb-dropdown-button","\u002Fen\u002Fcomponents\u002Fbb-dropzone","\u002Fit\u002Fcomponenti\u002Fbb-dropzone","\u002Fen\u002Fcomponents\u002Fbb-form","\u002Fit\u002Fcomponenti\u002Fbb-form","\u002Fen\u002Fcomponents\u002Fbb-icon","\u002Fit\u002Fcomponenti\u002Fbb-icon","\u002Fen\u002Fcomponents\u002Fbb-indicator","\u002Fit\u002Fcomponenti\u002Fbb-indicator","\u002Fen\u002Fcomponents\u002Fbb-number-input","\u002Fit\u002Fcomponenti\u002Fbb-number-input","\u002Fen\u002Fcomponents\u002Fbb-off-canvas","\u002Fit\u002Fcomponenti\u002Fbb-off-canvas","\u002Fen\u002Fcomponents\u002Fbb-pagination","\u002Fit\u002Fcomponenti\u002Fbb-pagination","\u002Fen\u002Fcomponents\u002Fbb-popover","\u002Fit\u002Fcomponenti\u002Fbb-popover","\u002Fen\u002Fcomponents\u002Fbb-progress","\u002Fit\u002Fcomponenti\u002Fbb-progress","\u002Fen\u002Fcomponents\u002Fbb-radio","\u002Fit\u002Fcomponenti\u002Fbb-radio","\u002Fen\u002Fcomponents\u002Fbb-radio-group","\u002Fit\u002Fcomponenti\u002Fbb-radio-group","\u002Fen\u002Fcomponents\u002Fbb-rating","\u002Fit\u002Fcomponenti\u002Fbb-rating","\u002Fen\u002Fcomponents\u002Fbb-select","\u002Fit\u002Fcomponenti\u002Fbb-select","\u002Fen\u002Fcomponents\u002Fbb-select-popover","\u002Fit\u002Fcomponenti\u002Fbb-select-popover","\u002Fen\u002Fcomponents\u002Fbb-slider","\u002Fit\u002Fcomponenti\u002Fbb-slider","\u002Fen\u002Fcomponents\u002Fbb-smooth-height","\u002Fit\u002Fcomponenti\u002Fbb-smooth-height","\u002Fen\u002Fcomponents\u002Fbb-spinner","\u002Fit\u002Fcomponenti\u002Fbb-spinner","\u002Fen\u002Fcomponents\u002Fbb-switch","\u002Fit\u002Fcomponenti\u002Fbb-switch","\u002Fen\u002Fcomponents\u002Fbb-switch-group","\u002Fit\u002Fcomponenti\u002Fbb-switch-group","\u002Fen\u002Fcomponents\u002Fbb-table","\u002Fit\u002Fcomponenti\u002Fbb-table","\u002Fen\u002Fcomponents\u002Fbb-tabs","\u002Fit\u002Fcomponenti\u002Fbb-tabs","\u002Fen\u002Fcomponents\u002Fbb-tag","\u002Fit\u002Fcomponenti\u002Fbb-tag","\u002Fen\u002Fcomponents\u002Fbb-text-input","\u002Fit\u002Fcomponenti\u002Fbb-text-input","\u002Fen\u002Fcomponents\u002Fbb-textarea","\u002Fit\u002Fcomponenti\u002Fbb-textarea","\u002Fen\u002Fcomponents\u002Fbb-time-picker","\u002Fit\u002Fcomponenti\u002Fbb-time-picker","\u002Fen\u002Fcomponents\u002Fbb-time-picker-input","\u002Fit\u002Fcomponenti\u002Fbb-time-picker-input","\u002Fen\u002Fcomponents\u002Fbb-toast","\u002Fit\u002Fcomponenti\u002Fbb-toast","\u002Fen\u002Fcomponents\u002Fbb-tooltip","\u002Fit\u002Fcomponenti\u002Fbb-tooltip","\u002Fen\u002Fcomponents\u002Fbb-tree","\u002Fit\u002Fcomponenti\u002Fbb-tree","\u002Fen\u002Fguides\u002Fai-agents","\u002Fit\u002Fguide\u002Fai-agents","\u002Fen\u002Fguides\u002Fcoherence","\u002Fit\u002Fguide\u002Fcoherence","\u002Fen\u002Fguides\u002Fdesign-language","\u002Fit\u002Fguide\u002Fdesign-language","\u002Fen\u002Fguides\u002Fdesign-tokens","\u002Fit\u002Fguide\u002Fdesign-tokens","\u002Fen\u002Fguides\u002Ffetching-data","\u002Fit\u002Fguide\u002Ffetching-data","\u002Fen\u002Fguides\u002Ficons","\u002Fit\u002Fguide\u002Ficons","\u002Fen\u002Fguides\u002Finertia","\u002Fit\u002Fguide\u002Finertia","\u002Fen\u002Fguides\u002Finstallation","\u002Fit\u002Fguide\u002Finstallation","\u002Fen\u002Fguides\u002Fmigration","\u002Fit\u002Fguide\u002Fmigration","\u002Fen\u002Fguides\u002Fnuxt","\u002Fit\u002Fguide\u002Fnuxt","\u002Fen\u002Fguides\u002Foptions-and-items","\u002Fit\u002Fguide\u002Foptions-and-items","\u002Fen\u002Fguides\u002Fvalidated-forms","\u002Fit\u002Fguide\u002Fvalidated-forms",{"id":354,"title":194,"body":355,"component":194,"description":918,"extension":538,"group":188,"meta":919,"navigation":920,"order":15,"path":195,"sections":921,"seo":926,"stem":927,"__hash__":928},"docs_en\u002Fcomponents\u002Fbb-badge.md",{"type":356,"value":357,"toc":906},"minimark",[358,416,444,452,461,465,475,480,502,523,527,540,560,563,577,582,591,594,597,603,613,616,639,642,651,655,660,663,676,682,685,740,750,850,857,873,876,902],[359,360,361,377],"when",{},[362,363,364,367,368,372,373,376],"p",{},[365,366,194],"code",{}," is a small inline pill: a status label (",[369,370,371],"em",{},"Active",", ",[369,374,375],{},"Beta","), a short\ncount, a token the user can dismiss.",[378,379,381],"template",{"v-slot:else":380},"",[382,383,384,398,409],"ul",{},[385,386,387,392,393,397],"li",{},[388,389,390],"a",{"href":277},[365,391,197],{},", when the marker belongs ",[394,395,396],"strong",{},"on top\nof"," something else: an unread count on a bell, a presence dot on an avatar",[385,399,400,404,405,408],{},[388,401,402],{"href":313},[365,403,85],{},", when the token is an input people ",[394,406,407],{},"type","\nfree-form values into",[385,410,411,415],{},[388,412,413],{"href":247},[365,414,65],{},", when it is a standalone action",[417,418,419],"migration",{},[362,420,421,422,424,425,427,428,431,432,435,436,439,440,443],{},"Two v2 names land here. The v2 ",[365,423,194],{},", the count anchored to an element, is\nnow ",[365,426,197],{},": rename the tag and move ",[365,429,430],{},"content"," to ",[365,433,434],{},"text",". ",[365,437,438],{},"BbChip"," is this\nbadge with ",[365,441,442],{},"clearable",", which you now have to write yourself.",[445,446,448],"h2",{"id":447},"visual",[449,450,451],"span",{},"Status labels",[362,453,454,455,457,458,460],{},"Write the label inside the badge; there is no ",[365,456,434],{}," or ",[365,459,430],{}," prop.",[462,463],"demo",{"name":464},"BbBadge\u002FVisualOptions",[362,466,467,468,470,471,474],{},"A badge is inert until you add ",[365,469,442],{}," or a ",[365,472,473],{},"BbBadgeButton",".",[476,477,479],"h3",{"id":478},"variants","Variants",[362,481,482,485,486,372,489,372,492,495,496,435,499,501],{},[365,483,484],{},"variant"," picks the tone of the pill: ",[365,487,488],{},"primary",[365,490,491],{},"secondary",[365,493,494],{},"outline",",\n",[365,497,498],{},"destructive",[365,500,488],{}," is the default.",[362,503,504,505,507,508,511,512,435,516,519,520,474],{},"Keep ",[365,506,498],{}," for what is actually wrong. There is no ",[365,509,510],{},"success"," variant,\nand an unregistered name colors nothing, so\n",[388,513,515],{"href":514},"#styling","register the tones you need",[365,517,518],{},"variant=\"none\""," drops the variant\nclass entirely, for pills you ",[388,521,522],{"href":514},"color yourself",[476,524,526],{"id":525},"sizes","Sizes",[362,528,529,530,431,533,372,536,539],{},"Sizes run from ",[365,531,532],{},"xs",[365,534,535],{},"2xl",[365,537,538],{},"md"," is the default and the one meant for a line\nof running text.",[362,541,542,543,546,547,372,549,552,553,372,556,552,558,474],{},"Beside a control the badge runs larger than the button it pairs with: ",[365,544,545],{},"lg"," next\nto ",[365,548,532],{},[365,550,551],{},"xl"," next to ",[365,554,555],{},"sm",[365,557,535],{},[365,559,538],{},[476,561,43],{"id":562},"icons",[362,564,565,568,569,572,573,576],{},[365,566,567],{},"prepend:icon"," and ",[365,570,571],{},"append:icon"," put an icon beside the label. With ",[365,574,575],{},"icon"," the\nbadge goes icon-only and the slot becomes its accessible name, so keep writing\nthe label.",[445,578,579],{"id":442},[449,580,581],{},"Removable tokens",[362,583,584,586,587,590],{},[365,585,442],{}," adds a trailing clear button and emits ",[365,588,589],{},"click:clear"," when it is\npressed.",[462,592],{"name":593},"BbBadge\u002FFilters",[362,595,596],{},"The badge does not remove itself: taking the item out of your own state is your\njob.",[445,598,600],{"id":599},"interactive",[449,601,602],{},"Clickable badges",[362,604,605,606,608,609,612],{},"To make the pill's body clickable, slot a ",[365,607,473],{}," as a ",[394,610,611],{},"direct"," child\nof the default slot. The clear button stays beside it, with its own tab stop.",[462,614],{"name":615},"BbBadge\u002FInteractive",[362,617,618,620,621,623,624,372,627,495,630,372,633,568,636,474],{},[365,619,473],{}," composes ",[365,622,62],{},", so it also takes ",[365,625,626],{},"href",[365,628,629],{},"to",[365,631,632],{},"target",[365,634,635],{},"rel",[365,637,638],{},"disabled",[462,640],{"name":641},"BbBadge\u002FLink",[362,643,644,645,648,649,474],{},"Both constraints are silent. Wrap the companion in another element and you are\nleft with a duplicated label, and a plain ",[365,646,647],{},"\u003Cbutton>"," of your own nests inside\nanother button as soon as the badge is ",[365,650,442],{},[476,652,654],{"id":653},"loading","Loading",[362,656,657,659],{},[365,658,653],{}," swaps a spinner in for the leftmost icon: the trailing one when that is\nthe only icon, a leading slot of its own when there are none.",[462,661],{"name":662},"BbBadge\u002FLoading",[362,664,665,666,668,669,672,673,675],{},"A loading badge ignores clicks on its ",[365,667,473],{},": your ",[365,670,671],{},"@click"," does not\nfire, a link does not navigate and the body leaves the tab order. Set ",[365,674,653],{},"\nwhile the action saves and a second press cannot run it twice.",[445,677,679],{"id":678},"styling",[449,680,681],{},"Custom tones",[362,683,684],{},"For a tone that recurs across the product, register a variant in the plugin\nconfig instead of coloring pills one at a time.",[686,687,691],"pre",{"className":688,"code":689,"language":690,"meta":380,"style":380},"language-ts shiki shiki-themes github-light-high-contrast github-dark-high-contrast","\u002F\u002F nuxt.config.ts\nexport default defineNuxtConfig({\n    bitboss: { badgeVariants: ['soft-green'] },\n});\n","ts",[365,692,693,700,717,732],{"__ignoreMap":380},[449,694,696],{"class":695,"line":11},"line",[449,697,699],{"class":698},"sLBg1","\u002F\u002F nuxt.config.ts\n",[449,701,702,706,709,713],{"class":695,"line":15},[449,703,705],{"class":704},"sHUrx","export",[449,707,708],{"class":704}," default",[449,710,712],{"class":711},"sKwhi"," defineNuxtConfig",[449,714,716],{"class":715},"soyes","({\n",[449,718,719,723,727,730],{"class":695,"line":37},[449,720,722],{"class":721},"suds8","    bitboss: { badgeVariants: [",[449,724,726],{"class":725},"sT6z2","'soft-green'",[449,728,729],{"class":721},"] }",[449,731,495],{"class":715},[449,733,734,737],{"class":695,"line":41},[449,735,736],{"class":715},"})",[449,738,739],{"class":721},";\n",[362,741,742,743,745,746,749],{},"The registered name joins the TypeScript union behind ",[365,744,484],{}," and gives you a\n",[365,747,748],{},".bb-badge--soft-green"," hook. You write the CSS, setting the two custom\nproperties the built-in variants drive.",[686,751,755],{"className":752,"code":753,"language":754,"meta":380,"style":380},"language-css shiki shiki-themes github-light-high-contrast github-dark-high-contrast",".bb-badge.bb-badge--soft-green {\n    --bg: color-mix(in oklab, #16a34a 15%, var(--bb-panel));\n    --fg: color-mix(in oklab, #16a34a 80%, var(--bb-text));\n}\n","css",[365,756,757,766,810,845],{"__ignoreMap":380},[449,758,759,763],{"class":695,"line":11},[449,760,762],{"class":761},"s-5SL",".bb-badge.bb-badge--soft-green",[449,764,765],{"class":721}," {\n",[449,767,768,771,774,777,780,783,786,788,791,794,797,799,802,804,807],{"class":695,"line":15},[449,769,770],{"class":715},"    --bg",[449,772,773],{"class":721},": ",[449,775,776],{"class":761},"color-mix",[449,778,779],{"class":721},"(",[449,781,782],{"class":715},"in",[449,784,785],{"class":715}," oklab",[449,787,372],{"class":721},[449,789,790],{"class":761},"#16a34a",[449,792,793],{"class":761}," 15",[449,795,796],{"class":704},"%",[449,798,372],{"class":721},[449,800,801],{"class":761},"var",[449,803,779],{"class":721},[449,805,806],{"class":715},"--bb-panel",[449,808,809],{"class":721},"));\n",[449,811,812,815,817,819,821,823,825,827,829,832,834,836,838,840,843],{"class":695,"line":37},[449,813,814],{"class":715},"    --fg",[449,816,773],{"class":721},[449,818,776],{"class":761},[449,820,779],{"class":721},[449,822,782],{"class":715},[449,824,785],{"class":715},[449,826,372],{"class":721},[449,828,790],{"class":761},[449,830,831],{"class":761}," 80",[449,833,796],{"class":704},[449,835,372],{"class":721},[449,837,801],{"class":761},[449,839,779],{"class":721},[449,841,842],{"class":715},"--bb-text",[449,844,809],{"class":721},[449,846,847],{"class":695,"line":41},[449,848,849],{"class":721},"}\n",[362,851,852,853,856],{},"For a one-off accent, override the same properties inline,\n",[365,854,855],{},":style=\"{ '--bg': '#7c3aed' }\"",", and check the contrast yourself.",[362,858,859,860,862,863,568,866,869,870,872],{},"When the colors come from data, such as labels each workspace colors its own\nway, there is no name to register. Set ",[365,861,518],{},": the badge renders no\nvariant class and you paint it with ",[365,864,865],{},"--bg",[365,867,868],{},"--fg",". Until you set them it\nkeeps the base ",[365,871,488],{}," colors.",[462,874],{"name":875},"BbBadge\u002FVariantNone",[417,877,879],{"title":878},"v2 stylesheets",[362,880,881,372,884,372,887,890,891,568,894,897,898,901],{},[365,882,883],{},".bb-badge",[365,885,886],{},".bb-badge__content",[365,888,889],{},".bb-badge__clear-button"," and the variant and\nsize modifiers all still match. Only direct-child selectors broke: the pill now\nholds two sides, ",[365,892,893],{},".bb-badge__body",[365,895,896],{},".bb-badge__trailing",", so\n",[365,899,900],{},".bb-badge > .bb-badge__content"," has to become a descendant selector.",[903,904,905],"style",{},"html pre.shiki code .sLBg1, html code.shiki .sLBg1{--shiki-default:#66707B;--shiki-dark:#BDC4CC}html pre.shiki code .sHUrx, html code.shiki .sHUrx{--shiki-default:#A0111F;--shiki-dark:#FF9492}html pre.shiki code .sKwhi, html code.shiki .sKwhi{--shiki-default:#622CBC;--shiki-dark:#DBB7FF}html pre.shiki code .soyes, html code.shiki .soyes{--shiki-default:#702C00;--shiki-dark:#FFB757}html pre.shiki code .suds8, html code.shiki .suds8{--shiki-default:#0E1116;--shiki-dark:#F0F3F6}html pre.shiki code .sT6z2, html code.shiki .sT6z2{--shiki-default:#032563;--shiki-dark:#ADDCFF}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 .s-5SL, html code.shiki .s-5SL{--shiki-default:#023B95;--shiki-dark:#91CBFF}",{"title":380,"searchDepth":37,"depth":37,"links":907},[908,913,914,917],{"id":447,"depth":15,"text":451,"children":909},[910,911,912],{"id":478,"depth":37,"text":479},{"id":525,"depth":37,"text":526},{"id":562,"depth":37,"text":43},{"id":442,"depth":15,"text":581},{"id":599,"depth":15,"text":602,"children":915},[916],{"id":653,"depth":37,"text":654},{"id":678,"depth":15,"text":681},"The library's inline pill: status labels, counts and removable tokens.",{},true,[922,923,924,925],{"id":447,"title":451},{"id":442,"title":581},{"id":599,"title":602},{"id":678,"title":681},{"title":194,"description":918},"components\u002Fbb-badge","lJ6z-fJZHXjFeVlGc-N7332TNaWmoIwciOxiQObIn2M",{"name":194,"slug":930,"group":188,"description":931,"entrypoint":932,"docs":933,"props":936,"models":991,"events":992,"slots":996,"exposed":1002,"pt":1003,"validated":3,"migration":1021},"bb-badge","Displays a compact inline status counter or label. It sits in the flow — for a bubble or dot anchored OVER another element, use BbIndicator (includes the co-located BbBadgeButton export).","bitboss-ui",{"contract":934,"source":935},"ai\u002FBbBadge.md","ai\u002Fsource\u002FBbBadge.md",[937,941,946,949,951,954,956,960,963,965,967,969,971,973,975,977,979,981,987],{"name":571,"type":938,"required":939,"default":3,"description":940,"note":3,"demo":447},"string | undefined",false,"Icon rendered after the label. On a `clearable` badge it shares the trailing\nslot with the clear button: the icon shows at rest and the clear button\nreveals over it on hover\u002Ffocus.",{"name":442,"type":942,"required":939,"default":943,"description":944,"note":945,"demo":442},"boolean | undefined","false","Renders a trailing clear button and emits `click:clear` when pressed — turns\nthe badge into a dismissible token (the pattern formerly served by `BbChip`).","Opt-in, which is the one thing that changed on the way from `BbChip`: a chip was removable unless told otherwise. Swapping the tag straight across loses the × with no error.",{"name":947,"type":938,"required":939,"default":3,"description":948,"note":3,"demo":442},"clearableLabel","Accessible label for the clear button.\n\nRarely needed: unset, the name is **composed** from the localized\n`badge.clearLabel` verb and the badge's own text — \"Remove Italy\", not a\nbare \"Remove\" — which is already the right name in almost every case.\nComposition is skipped when a `BbBadgeButton` owns the body (the verb\nthen stands alone, so the two controls do not both announce the label).\nSet this only to override that composed name outright.",{"name":575,"type":938,"required":939,"default":3,"description":950,"note":3,"demo":447},"Renders an icon-only badge. When set, `prepend:icon` \u002F `append:icon` are\nignored and the default slot becomes the badge's visually hidden accessible\nlabel — always provide it.",{"name":653,"type":942,"required":939,"default":943,"description":952,"note":953,"demo":599},"Shows a spinner in place of the leftmost icon, mirroring `BbButton`: it\nreplaces the `icon` glyph or the `prepend:icon` when one is set; when the\n`append:icon` is the sole icon it replaces that instead (e.g. a\nselect-activator chevron while the value saves), and with no icons at all\nit takes the leading slot. Adds a visually hidden loading announcement\nfor screen readers.","Also makes a slotted `BbBadgeButton` inert: clicks do not reach your `@click`, a link does not navigate, and the body leaves the tab order until `loading` clears.",{"name":567,"type":938,"required":939,"default":3,"description":955,"note":3,"demo":447},"Icon rendered before the label.",{"name":957,"type":958,"required":939,"default":3,"description":959,"note":3,"demo":3},"pt","PtMap\u003CBbBadgePtPart, \"loading\"> | undefined","Passthrough, object form: `{ icon: '…', 'icon:loading': '…' }` — the same\nkeys as the `pt:*` attributes without the prefix. Parts: `root`, `icon`,\n`spinner`, `text`, `clear`. State: `loading`.",{"name":961,"type":962,"required":939,"default":3,"description":3,"note":3,"demo":3},"pt:clear","PtValue | undefined",{"name":964,"type":962,"required":939,"default":3,"description":3,"note":3,"demo":3},"pt:clear:loading",{"name":966,"type":962,"required":939,"default":3,"description":3,"note":3,"demo":3},"pt:icon",{"name":968,"type":962,"required":939,"default":3,"description":3,"note":3,"demo":3},"pt:icon:loading",{"name":970,"type":962,"required":939,"default":3,"description":3,"note":3,"demo":3},"pt:root",{"name":972,"type":962,"required":939,"default":3,"description":3,"note":3,"demo":3},"pt:root:loading",{"name":974,"type":962,"required":939,"default":3,"description":3,"note":3,"demo":3},"pt:spinner",{"name":976,"type":962,"required":939,"default":3,"description":3,"note":3,"demo":3},"pt:spinner:loading",{"name":978,"type":962,"required":939,"default":3,"description":3,"note":3,"demo":3},"pt:text",{"name":980,"type":962,"required":939,"default":3,"description":3,"note":3,"demo":3},"pt:text:loading",{"name":982,"type":983,"required":939,"default":984,"description":985,"note":986,"demo":447},"size","keyof Sizes | undefined","\"md\"","Preset size of the badge.","Pick it from the control standing next to the badge, not from a remembered constant: `lg` matches an `xs` button, `xl` a `sm` one, `2xl` an `md` one. The default `md` is sized for running text.",{"name":484,"type":988,"required":939,"default":989,"description":990,"note":3,"demo":447},"BadgeVariantType | undefined","\"primary\"","Visual variant: `primary`, `secondary`, `destructive`, or `outline`.\nRegister more via the vite plugin `badgeVariants` option and style\n`.bb-badge--\u003Cvariant>` (set `--bg` \u002F `--fg`). `'none'` renders no\nvariant class — an escape hatch for a one-off look set through `--bg` \u002F\n`--fg` on the element.",[],[993],{"name":589,"signature":994,"description":3,"note":995,"demo":442},"(event: \"click:clear\", event: MouseEvent): void","Fires when the clear button is pressed. The badge is controlled and removes nothing on its own — drop the item from your own state in the handler. Pressing the × never fires a slotted `BbBadgeButton`.",[997],{"name":998,"type":999,"description":1000,"note":1001,"demo":599},"default","object","The badge's label content. When `icon` is set this becomes the visually\nhidden accessible label. Render a `BbBadgeButton` here to make the badge\nbody interactive (the wrapper stays a passive `\u003Cspan>`).","A `BbBadgeButton` here must be a direct child: wrapped in anything else the badge keeps its body and you get a duplicated label. One per badge — there is only one body to take over.",[],{"parts":1004,"states":1018},[1005,1008,1010,1013,1015],{"name":1006,"description":1007},"root","The badge.",{"name":575,"description":1009},"Every content glyph — the `icon`-mode glyph, `prepend:icon`, `append:icon` — a broadcast. The clear ✕ is not in it.",{"name":1011,"description":1012},"spinner","The loading glyph. It REPLACES an icon while `loading` (on a button it joins one instead).",{"name":434,"description":1014},"The label span; it owns the truncation.",{"name":1016,"description":1017},"clear","The ✕ that removes the badge (`clearable`).",[1019],{"name":653,"description":1020},"Component-wide: `loading` is on; the spinner takes an icon's place.",{"removed":1022,"renamed":1028},[1023],{"name":430,"replacedBy":3,"since":1024,"migration":1025,"silent":920,"fix":1026},"3.0.0-unreleased","ai\u002Fguides\u002Fmigration\u002Fcomponents\u002Fbb-badge.md",{"kind":1027},"manual",[],1790005160719]