[{"data":1,"prerenderedAt":1240},["ShallowReactive",2],{"api-none":3,"docs-nav-en":4,"locale-alternates":247,"page-en-\u002Fcomponents\u002Fbb-badge":378,"pt-showcase-BbBadge":1131},null,[5,20,32,56,68,112,145,181,202,223,235,241],{"label":6,"entries":7},"Getting started",[8,12,16],{"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,{"title":17,"path":18,"component":-1,"order":19},"Adoption checklist","\u002Fguides\u002Fadoption-checklist",3,{"label":21,"entries":22},"Design system",[23,26,29],{"title":24,"path":25,"component":-1,"order":11},"Design tokens","\u002Fguides\u002Fdesign-tokens",{"title":27,"path":28,"component":-1,"order":15},"Design language","\u002Fguides\u002Fdesign-language",{"title":30,"path":31,"component":-1,"order":19},"Passthrough","\u002Fguides\u002Fpassthrough",{"label":33,"entries":34},"Playbooks",[35,38,41,44,48,52],{"title":36,"path":37,"component":-1,"order":11},"Options and items","\u002Fguides\u002Foptions-and-items",{"title":39,"path":40,"component":-1,"order":15},"Fetching data","\u002Fguides\u002Ffetching-data",{"title":42,"path":43,"component":-1,"order":19},"Coherence","\u002Fguides\u002Fcoherence",{"title":45,"path":46,"component":-1,"order":47},"Validated forms","\u002Fguides\u002Fvalidated-forms",4,{"title":49,"path":50,"component":-1,"order":51},"Icons","\u002Fguides\u002Ficons",5,{"title":53,"path":54,"component":-1,"order":55},"Preset components","\u002Fguides\u002Fpreset-components",6,{"label":57,"entries":58},"Ecosystem",[59,62,65],{"title":60,"path":61,"component":-1,"order":11},"Inertia and Laravel","\u002Fguides\u002Finertia",{"title":63,"path":64,"component":-1,"order":15},"Nuxt","\u002Fguides\u002Fnuxt",{"title":66,"path":67,"component":-1,"order":19},"AI agents","\u002Fguides\u002Fai-agents",{"label":69,"entries":70},"Inputs",[71,74,77,80,83,86,89,92,96,100,104,108],{"title":72,"path":73,"component":72,"order":11},"BbBaseButton","\u002Fcomponents\u002Fbb-base-button",{"title":75,"path":76,"component":75,"order":15},"BbButton","\u002Fcomponents\u002Fbb-button",{"title":78,"path":79,"component":78,"order":19},"BbCalendar","\u002Fcomponents\u002Fbb-calendar",{"title":81,"path":82,"component":81,"order":19},"BbColorInput","\u002Fcomponents\u002Fbb-color-input",{"title":84,"path":85,"component":84,"order":47},"BbDatePickerInput","\u002Fcomponents\u002Fbb-date-picker-input",{"title":87,"path":88,"component":87,"order":51},"BbDropzone","\u002Fcomponents\u002Fbb-dropzone",{"title":90,"path":91,"component":90,"order":55},"BbForm","\u002Fcomponents\u002Fbb-form",{"title":93,"path":94,"component":93,"order":95},"BbNumberInput","\u002Fcomponents\u002Fbb-number-input",7,{"title":97,"path":98,"component":97,"order":99},"BbTag","\u002Fcomponents\u002Fbb-tag",8,{"title":101,"path":102,"component":101,"order":103},"BbTextarea","\u002Fcomponents\u002Fbb-textarea",9,{"title":105,"path":106,"component":105,"order":107},"BbTextInput","\u002Fcomponents\u002Fbb-text-input",10,{"title":109,"path":110,"component":109,"order":111},"BbTimePickerInput","\u002Fcomponents\u002Fbb-time-picker-input",11,{"label":113,"entries":114},"Selection",[115,118,121,124,127,130,133,136,139,142],{"title":116,"path":117,"component":116,"order":11},"BbCheckbox","\u002Fcomponents\u002Fbb-checkbox",{"title":119,"path":120,"component":119,"order":15},"BbCheckboxGroup","\u002Fcomponents\u002Fbb-checkbox-group",{"title":122,"path":123,"component":122,"order":19},"BbRadio","\u002Fcomponents\u002Fbb-radio",{"title":125,"path":126,"component":125,"order":47},"BbRadioGroup","\u002Fcomponents\u002Fbb-radio-group",{"title":128,"path":129,"component":128,"order":51},"BbRating","\u002Fcomponents\u002Fbb-rating",{"title":131,"path":132,"component":131,"order":55},"BbSelect","\u002Fcomponents\u002Fbb-select",{"title":134,"path":135,"component":134,"order":95},"BbSelectPopover","\u002Fcomponents\u002Fbb-select-popover",{"title":137,"path":138,"component":137,"order":99},"BbSlider","\u002Fcomponents\u002Fbb-slider",{"title":140,"path":141,"component":140,"order":103},"BbSwitch","\u002Fcomponents\u002Fbb-switch",{"title":143,"path":144,"component":143,"order":107},"BbSwitchGroup","\u002Fcomponents\u002Fbb-switch-group",{"label":146,"entries":147},"Overlay",[148,151,154,157,160,163,166,169,172,175,178],{"title":149,"path":150,"component":149,"order":11},"BbColorPalette","\u002Fcomponents\u002Fbb-color-palette",{"title":152,"path":153,"component":152,"order":15},"BbConfirm","\u002Fcomponents\u002Fbb-confirm",{"title":155,"path":156,"component":155,"order":19},"BbDatePicker","\u002Fcomponents\u002Fbb-date-picker",{"title":158,"path":159,"component":158,"order":47},"BbDialog","\u002Fcomponents\u002Fbb-dialog",{"title":161,"path":162,"component":161,"order":51},"BbDropdown","\u002Fcomponents\u002Fbb-dropdown",{"title":164,"path":165,"component":164,"order":55},"BbDropdownButton","\u002Fcomponents\u002Fbb-dropdown-button",{"title":167,"path":168,"component":167,"order":95},"BbHoverCard","\u002Fcomponents\u002Fbb-hover-card",{"title":170,"path":171,"component":170,"order":95},"BbOffCanvas","\u002Fcomponents\u002Fbb-off-canvas",{"title":173,"path":174,"component":173,"order":99},"BbPopover","\u002Fcomponents\u002Fbb-popover",{"title":176,"path":177,"component":176,"order":103},"BbTimePicker","\u002Fcomponents\u002Fbb-time-picker",{"title":179,"path":180,"component":179,"order":107},"BbTooltip","\u002Fcomponents\u002Fbb-tooltip",{"label":182,"entries":183},"Navigation",[184,187,190,193,196,199],{"title":185,"path":186,"component":185,"order":11},"BbAccordion","\u002Fcomponents\u002Fbb-accordion",{"title":188,"path":189,"component":188,"order":15},"BbBreadcrumbs","\u002Fcomponents\u002Fbb-breadcrumbs",{"title":191,"path":192,"component":191,"order":19},"BbCollapsible","\u002Fcomponents\u002Fbb-collapsible",{"title":194,"path":195,"component":194,"order":47},"BbPagination","\u002Fcomponents\u002Fbb-pagination",{"title":197,"path":198,"component":197,"order":51},"BbTabs","\u002Fcomponents\u002Fbb-tabs",{"title":200,"path":201,"component":200,"order":55},"BbTree","\u002Fcomponents\u002Fbb-tree",{"label":203,"entries":204},"Feedback",[205,208,211,214,217,220],{"title":206,"path":207,"component":206,"order":11},"BbAlert","\u002Fcomponents\u002Fbb-alert",{"title":209,"path":210,"component":209,"order":15},"BbBadge","\u002Fcomponents\u002Fbb-badge",{"title":212,"path":213,"component":212,"order":19},"BbIndicator","\u002Fcomponents\u002Fbb-indicator",{"title":215,"path":216,"component":215,"order":47},"BbProgress","\u002Fcomponents\u002Fbb-progress",{"title":218,"path":219,"component":218,"order":51},"BbSpinner","\u002Fcomponents\u002Fbb-spinner",{"title":221,"path":222,"component":221,"order":55},"BbToast","\u002Fcomponents\u002Fbb-toast",{"label":224,"entries":225},"Data Display",[226,229,232],{"title":227,"path":228,"component":227,"order":11},"BbAvatar","\u002Fcomponents\u002Fbb-avatar",{"title":230,"path":231,"component":230,"order":15},"BbIcon","\u002Fcomponents\u002Fbb-icon",{"title":233,"path":234,"component":233,"order":19},"BbTable","\u002Fcomponents\u002Fbb-table",{"label":236,"entries":237},"Layout & Utility",[238],{"title":239,"path":240,"component":239,"order":11},"BbSmoothHeight","\u002Fcomponents\u002Fbb-smooth-height",{"label":242,"entries":243},"Other",[244],{"title":245,"path":246,"component":245,"order":11},"BbAsterisk","\u002Fcomponents\u002Fbb-asterisk",{"\u002Fit\u002Fcomponenti\u002Fbb-accordion":248,"\u002Fen\u002Fcomponents\u002Fbb-accordion":249,"\u002Fit\u002Fcomponenti\u002Fbb-alert":250,"\u002Fen\u002Fcomponents\u002Fbb-alert":251,"\u002Fit\u002Fcomponenti\u002Fbb-asterisk":252,"\u002Fen\u002Fcomponents\u002Fbb-asterisk":253,"\u002Fit\u002Fcomponenti\u002Fbb-avatar":254,"\u002Fen\u002Fcomponents\u002Fbb-avatar":255,"\u002Fit\u002Fcomponenti\u002Fbb-badge":256,"\u002Fen\u002Fcomponents\u002Fbb-badge":257,"\u002Fit\u002Fcomponenti\u002Fbb-base-button":258,"\u002Fen\u002Fcomponents\u002Fbb-base-button":259,"\u002Fit\u002Fcomponenti\u002Fbb-breadcrumbs":260,"\u002Fen\u002Fcomponents\u002Fbb-breadcrumbs":261,"\u002Fit\u002Fcomponenti\u002Fbb-button":262,"\u002Fen\u002Fcomponents\u002Fbb-button":263,"\u002Fit\u002Fcomponenti\u002Fbb-calendar":264,"\u002Fen\u002Fcomponents\u002Fbb-calendar":265,"\u002Fit\u002Fcomponenti\u002Fbb-checkbox":266,"\u002Fen\u002Fcomponents\u002Fbb-checkbox":267,"\u002Fit\u002Fcomponenti\u002Fbb-checkbox-group":268,"\u002Fen\u002Fcomponents\u002Fbb-checkbox-group":269,"\u002Fit\u002Fcomponenti\u002Fbb-collapsible":270,"\u002Fen\u002Fcomponents\u002Fbb-collapsible":271,"\u002Fit\u002Fcomponenti\u002Fbb-color-input":272,"\u002Fen\u002Fcomponents\u002Fbb-color-input":273,"\u002Fit\u002Fcomponenti\u002Fbb-color-palette":274,"\u002Fen\u002Fcomponents\u002Fbb-color-palette":275,"\u002Fit\u002Fcomponenti\u002Fbb-confirm":276,"\u002Fen\u002Fcomponents\u002Fbb-confirm":277,"\u002Fit\u002Fcomponenti\u002Fbb-date-picker":278,"\u002Fen\u002Fcomponents\u002Fbb-date-picker":279,"\u002Fit\u002Fcomponenti\u002Fbb-date-picker-input":280,"\u002Fen\u002Fcomponents\u002Fbb-date-picker-input":281,"\u002Fit\u002Fcomponenti\u002Fbb-dialog":282,"\u002Fen\u002Fcomponents\u002Fbb-dialog":283,"\u002Fit\u002Fcomponenti\u002Fbb-dropdown":284,"\u002Fen\u002Fcomponents\u002Fbb-dropdown":285,"\u002Fit\u002Fcomponenti\u002Fbb-dropdown-button":286,"\u002Fen\u002Fcomponents\u002Fbb-dropdown-button":287,"\u002Fit\u002Fcomponenti\u002Fbb-dropzone":288,"\u002Fen\u002Fcomponents\u002Fbb-dropzone":289,"\u002Fit\u002Fcomponenti\u002Fbb-form":290,"\u002Fen\u002Fcomponents\u002Fbb-form":291,"\u002Fit\u002Fcomponenti\u002Fbb-hover-card":292,"\u002Fen\u002Fcomponents\u002Fbb-hover-card":293,"\u002Fit\u002Fcomponenti\u002Fbb-icon":294,"\u002Fen\u002Fcomponents\u002Fbb-icon":295,"\u002Fit\u002Fcomponenti\u002Fbb-indicator":296,"\u002Fen\u002Fcomponents\u002Fbb-indicator":297,"\u002Fit\u002Fcomponenti\u002Fbb-number-input":298,"\u002Fen\u002Fcomponents\u002Fbb-number-input":299,"\u002Fit\u002Fcomponenti\u002Fbb-off-canvas":300,"\u002Fen\u002Fcomponents\u002Fbb-off-canvas":301,"\u002Fit\u002Fcomponenti\u002Fbb-pagination":302,"\u002Fen\u002Fcomponents\u002Fbb-pagination":303,"\u002Fit\u002Fcomponenti\u002Fbb-popover":304,"\u002Fen\u002Fcomponents\u002Fbb-popover":305,"\u002Fit\u002Fcomponenti\u002Fbb-progress":306,"\u002Fen\u002Fcomponents\u002Fbb-progress":307,"\u002Fit\u002Fcomponenti\u002Fbb-radio":308,"\u002Fen\u002Fcomponents\u002Fbb-radio":309,"\u002Fit\u002Fcomponenti\u002Fbb-radio-group":310,"\u002Fen\u002Fcomponents\u002Fbb-radio-group":311,"\u002Fit\u002Fcomponenti\u002Fbb-rating":312,"\u002Fen\u002Fcomponents\u002Fbb-rating":313,"\u002Fit\u002Fcomponenti\u002Fbb-select":314,"\u002Fen\u002Fcomponents\u002Fbb-select":315,"\u002Fit\u002Fcomponenti\u002Fbb-select-popover":316,"\u002Fen\u002Fcomponents\u002Fbb-select-popover":317,"\u002Fit\u002Fcomponenti\u002Fbb-slider":318,"\u002Fen\u002Fcomponents\u002Fbb-slider":319,"\u002Fit\u002Fcomponenti\u002Fbb-smooth-height":320,"\u002Fen\u002Fcomponents\u002Fbb-smooth-height":321,"\u002Fit\u002Fcomponenti\u002Fbb-spinner":322,"\u002Fen\u002Fcomponents\u002Fbb-spinner":323,"\u002Fit\u002Fcomponenti\u002Fbb-switch":324,"\u002Fen\u002Fcomponents\u002Fbb-switch":325,"\u002Fit\u002Fcomponenti\u002Fbb-switch-group":326,"\u002Fen\u002Fcomponents\u002Fbb-switch-group":327,"\u002Fit\u002Fcomponenti\u002Fbb-table":328,"\u002Fen\u002Fcomponents\u002Fbb-table":329,"\u002Fit\u002Fcomponenti\u002Fbb-tabs":330,"\u002Fen\u002Fcomponents\u002Fbb-tabs":331,"\u002Fit\u002Fcomponenti\u002Fbb-tag":332,"\u002Fen\u002Fcomponents\u002Fbb-tag":333,"\u002Fit\u002Fcomponenti\u002Fbb-text-input":334,"\u002Fen\u002Fcomponents\u002Fbb-text-input":335,"\u002Fit\u002Fcomponenti\u002Fbb-textarea":336,"\u002Fen\u002Fcomponents\u002Fbb-textarea":337,"\u002Fit\u002Fcomponenti\u002Fbb-time-picker":338,"\u002Fen\u002Fcomponents\u002Fbb-time-picker":339,"\u002Fit\u002Fcomponenti\u002Fbb-time-picker-input":340,"\u002Fen\u002Fcomponents\u002Fbb-time-picker-input":341,"\u002Fit\u002Fcomponenti\u002Fbb-toast":342,"\u002Fen\u002Fcomponents\u002Fbb-toast":343,"\u002Fit\u002Fcomponenti\u002Fbb-tooltip":344,"\u002Fen\u002Fcomponents\u002Fbb-tooltip":345,"\u002Fit\u002Fcomponenti\u002Fbb-tree":346,"\u002Fen\u002Fcomponents\u002Fbb-tree":347,"\u002Fit\u002Fguide\u002Fadoption-checklist":348,"\u002Fen\u002Fguides\u002Fadoption-checklist":349,"\u002Fit\u002Fguide\u002Fai-agents":350,"\u002Fen\u002Fguides\u002Fai-agents":351,"\u002Fit\u002Fguide\u002Fcoherence":352,"\u002Fen\u002Fguides\u002Fcoherence":353,"\u002Fit\u002Fguide\u002Fdesign-language":354,"\u002Fen\u002Fguides\u002Fdesign-language":355,"\u002Fit\u002Fguide\u002Fdesign-tokens":356,"\u002Fen\u002Fguides\u002Fdesign-tokens":357,"\u002Fit\u002Fguide\u002Ffetching-data":358,"\u002Fen\u002Fguides\u002Ffetching-data":359,"\u002Fit\u002Fguide\u002Ficons":360,"\u002Fen\u002Fguides\u002Ficons":361,"\u002Fit\u002Fguide\u002Finertia":362,"\u002Fen\u002Fguides\u002Finertia":363,"\u002Fit\u002Fguide\u002Finstallation":364,"\u002Fen\u002Fguides\u002Finstallation":365,"\u002Fit\u002Fguide\u002Fmigration":366,"\u002Fen\u002Fguides\u002Fmigration":367,"\u002Fit\u002Fguide\u002Fnuxt":368,"\u002Fen\u002Fguides\u002Fnuxt":369,"\u002Fit\u002Fguide\u002Foptions-and-items":370,"\u002Fen\u002Fguides\u002Foptions-and-items":371,"\u002Fit\u002Fguide\u002Fpassthrough":372,"\u002Fen\u002Fguides\u002Fpassthrough":373,"\u002Fit\u002Fguide\u002Fpreset-components":374,"\u002Fen\u002Fguides\u002Fpreset-components":375,"\u002Fit\u002Fguide\u002Fvalidated-forms":376,"\u002Fen\u002Fguides\u002Fvalidated-forms":377},"\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-calendar","\u002Fit\u002Fcomponenti\u002Fbb-calendar","\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-hover-card","\u002Fit\u002Fcomponenti\u002Fbb-hover-card","\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\u002Fadoption-checklist","\u002Fit\u002Fguide\u002Fadoption-checklist","\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\u002Fpassthrough","\u002Fit\u002Fguide\u002Fpassthrough","\u002Fen\u002Fguides\u002Fpreset-components","\u002Fit\u002Fguide\u002Fpreset-components","\u002Fen\u002Fguides\u002Fvalidated-forms","\u002Fit\u002Fguide\u002Fvalidated-forms",{"id":379,"title":209,"body":380,"component":209,"description":1120,"extension":552,"group":203,"meta":1121,"navigation":1122,"order":15,"path":210,"sections":1123,"seo":1128,"stem":1129,"__hash__":1130},"docs_en\u002Fcomponents\u002Fbb-badge.md",{"type":381,"value":382,"toc":1109},"minimark",[383,441,447,475,483,492,496,508,513,554,557,578,598,601,631,658,663,677,680,699,705,715,718,764,775,778,790,794,802,805,818,824,827,882,894,1007,1036,1043,1059,1062,1105],[384,385,386,402],"when",{},[387,388,389,392,393,397,398,401],"p",{},[390,391,209],"code",{}," is a small inline pill: a status label (",[394,395,396],"em",{},"Active",", ",[394,399,400],{},"Beta","), a short\ncount, a token the user can dismiss.",[403,404,406],"template",{"v-slot:else":405},"",[407,408,409,423,434],"ul",{},[410,411,412,417,418,422],"li",{},[413,414,415],"a",{"href":296},[390,416,212],{},", when the marker belongs ",[419,420,421],"strong",{},"on top\nof"," something else: an unread count on a bell, a presence dot on an avatar",[410,424,425,429,430,433],{},[413,426,427],{"href":332},[390,428,97],{},", when the token is an input people ",[419,431,432],{},"type","\nfree-form values into",[410,435,436,440],{},[413,437,438],{"href":262},[390,439,75],{},", when it is a standalone action",[387,442,443,444,446],{},"Also see: ",[413,445,27],{"href":354},".",[448,449,450],"migration",{},[387,451,452,453,455,456,458,459,462,463,466,467,470,471,474],{},"Two v2 names land here. The v2 ",[390,454,209],{},", the count anchored to an element, is\nnow ",[390,457,212],{},": rename the tag and move ",[390,460,461],{},"content"," to ",[390,464,465],{},"text",". ",[390,468,469],{},"BbChip"," is this\nbadge with ",[390,472,473],{},"clearable",", which you now have to write yourself.",[476,477,479],"h2",{"id":478},"visual",[480,481,482],"span",{},"Status labels",[387,484,485,486,488,489,491],{},"Write the label inside the badge; there is no ",[390,487,465],{}," or ",[390,490,461],{}," prop. Map\neach state to one variant and one icon in a single table, so colour is never the\nonly signal.",[493,494],"demo",{"name":495},"BbBadge\u002FOrderStatus",[387,497,498,499,504,505,446],{},"A badge is inert until you add ",[413,500,502],{"href":501},"\u002Fen\u002Fcomponents\u002Fbb-badge\u002Fapi#prop-clearable",[390,503,473],{}," or a ",[390,506,507],{},"BbBadgeButton",[509,510,512],"h3",{"id":511},"variants-and-sizes","Variants and sizes",[387,514,515,521,522,397,525,397,528,531,532,466,535,537,538,542,543,462,546,549,550,553],{},[413,516,518],{"href":517},"\u002Fen\u002Fcomponents\u002Fbb-badge\u002Fapi#prop-variant",[390,519,520],{},"variant"," picks the tone of the pill: ",[390,523,524],{},"primary",[390,526,527],{},"secondary",[390,529,530],{},"outline",",\n",[390,533,534],{},"destructive",[390,536,524],{}," is the default. ",[413,539,541],{"href":540},"\u002Fen\u002Fcomponents\u002Fbb-badge\u002Fapi#prop-size","Sizes"," run from ",[390,544,545],{},"xs",[390,547,548],{},"2xl",", and\n",[390,551,552],{},"md",", the default, is the one meant for a line of running text.",[493,555],{"name":556},"BbBadge\u002FVisualOptions",[387,558,559,560,562,563,566,567,466,571,574,575,446],{},"Keep ",[390,561,534],{}," for what is actually wrong. There is no ",[390,564,565],{},"success"," variant,\nand an unregistered name colours nothing, so\n",[413,568,570],{"href":569},"#styling","register the tones you need",[390,572,573],{},"variant=\"none\""," drops the variant\nclass entirely, for pills you ",[413,576,577],{"href":569},"colour yourself",[387,579,580,581,584,585,397,587,590,591,397,594,590,596,446],{},"Beside a control the badge runs larger than the button it pairs with: ",[390,582,583],{},"lg"," next\nto ",[390,586,545],{},[390,588,589],{},"xl"," next to ",[390,592,593],{},"sm",[390,595,548],{},[390,597,552],{},[509,599,49],{"id":600},"icons",[387,602,603,609,610,616,617,623,624,627,628,446],{},[413,604,606],{"href":605},"\u002Fen\u002Fcomponents\u002Fbb-badge\u002Fapi#prop-prepend:icon",[390,607,608],{},"prepend:icon"," and ",[413,611,613],{"href":612},"\u002Fen\u002Fcomponents\u002Fbb-badge\u002Fapi#prop-append:icon",[390,614,615],{},"append:icon"," put an icon beside the label. With ",[413,618,620],{"href":619},"\u002Fen\u002Fcomponents\u002Fbb-badge\u002Fapi#prop-icon",[390,621,622],{},"icon"," the\nbadge goes icon-only and the slot becomes its accessible name, so keep writing\nthe label. An empty one is an error for ",[390,625,626],{},"npx bitboss-ui check"," and the ESLint\nrule ",[390,629,630],{},"require-accessible-name",[387,632,633,634,397,637,397,640,643,644,646,647,397,650,653,654,657],{},"The slots named after those props (",[390,635,636],{},"#icon",[390,638,639],{},"#prepend:icon",[390,641,642],{},"#append:icon",")\nreplace them inside the ",[390,645,622],{}," part, so ",[390,648,649],{},"pt:icon",[390,651,652],{},"--icon-size"," and the\nloading spinner still apply. Their scope is the badge's states,\n",[390,655,656],{},"{ loading, activeLink, exactActiveLink }",", so a chip that links to a page can\nshow a solid glyph while that page is open.",[476,659,660],{"id":473},[480,661,662],{},"Removable tokens",[387,664,665,669,670,676],{},[413,666,667],{"href":501},[390,668,473],{}," adds a trailing clear button and emits ",[413,671,673],{"href":672},"\u002Fen\u002Fcomponents\u002Fbb-badge\u002Fapi#event-click:clear",[390,674,675],{},"click:clear"," when it is\npressed.",[493,678],{"name":679},"BbBadge\u002FFilters",[387,681,682,683,686,687,693,694,696,697,446],{},"The badge does not remove itself: taking the item out of your own state is your\njob. The × is named \"Remove\" plus the badge's text, so a chip reading ",[394,684,685],{},"Italy","\nannounces \"Remove Italy\" with no wiring. A\n",[413,688,690],{"href":689},"\u002Fen\u002Fcomponents\u002Fbb-badge\u002Fapi#prop-clearableLabel",[390,691,692],{},"clearable-label"," is the ×'s\nwhole name, on any body: write the full phrase, not a verb. An ",[390,695,615],{}," shares the trailing\nslot with the ×, which then shows only on hover or focus, so lead removable\nchips with ",[390,698,608],{},[476,700,702],{"id":701},"interactive",[480,703,704],{},"Clickable badges",[387,706,707,708,710,711,714],{},"To make the pill's body clickable, slot a ",[390,709,507],{}," as a ",[419,712,713],{},"direct"," child\nof the default slot. The clear button stays beside it, with its own tab stop.",[493,716],{"name":717},"BbBadge\u002FInteractive",[387,719,720,721,723,724,728,729,731,732,734,735,397,738,397,741,397,744,609,747,750,751,754,755,757,758,760,761,763],{},"With a ",[390,722,507],{}," in the body the × is named by the bare verb, \"Remove\",\nso give it a ",[413,725,726],{"href":689},[390,727,692],{},"\nthat says what goes. ",[390,730,507],{}," composes ",[390,733,72],{},", so it also takes\n",[390,736,737],{},"href",[390,739,740],{},"to",[390,742,743],{},"target",[390,745,746],{},"rel",[390,748,749],{},"disabled",". On Inertia, ",[390,752,753],{},"method"," needs ",[390,756,737],{},":\nonly ",[390,759,737],{}," becomes a visit, and ",[390,762,740],{}," is a router link.",[387,765,766,767,770,771,774],{},"A link body's slot gets ",[390,768,769],{},"{ activeLink, exactActiveLink }",", and the state\nreaches the whole chip: ",[390,772,773],{},"pt:root:active-link"," and the icon slots. Whatever\nrenders outside the button (the badge's root, and the × side of a clearable\nbadge) gets it only once the page hydrates; the label and the leading icon have\nit in the server HTML.",[493,776],{"name":777},"BbBadge\u002FLink",[387,779,780,781,783,784,787,788,446],{},"Nothing warns you about two mistakes. Wrapping the ",[390,782,507],{}," in another\nelement duplicates the label. Slotting a plain ",[390,785,786],{},"\u003Cbutton>"," instead nests it\ninside the badge's own button once the badge is ",[390,789,473],{},[509,791,793],{"id":792},"loading","Loading",[387,795,796,801],{},[413,797,799],{"href":798},"\u002Fen\u002Fcomponents\u002Fbb-badge\u002Fapi#prop-loading",[390,800,792],{}," 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.",[493,803],{"name":804},"BbBadge\u002FLoading",[387,806,807,808,810,811,814,815,817],{},"A loading badge ignores clicks on its ",[390,809,507],{},": your ",[390,812,813],{},"@click"," does not\nfire, a link does not navigate and the body leaves the tab order. Set ",[390,816,792],{},"\non the one badge whose action is saving, and a second press cannot run it twice.",[476,819,821],{"id":820},"styling",[480,822,823],{},"Custom tones",[387,825,826],{},"For a tone that recurs across the product, register a variant in the plugin\nconfig instead of colouring pills one at a time.",[828,829,833],"pre",{"className":830,"code":831,"language":832,"meta":405,"style":405},"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",[390,834,835,842,859,874],{"__ignoreMap":405},[480,836,838],{"class":837,"line":11},"line",[480,839,841],{"class":840},"sLBg1","\u002F\u002F nuxt.config.ts\n",[480,843,844,848,851,855],{"class":837,"line":15},[480,845,847],{"class":846},"sHUrx","export",[480,849,850],{"class":846}," default",[480,852,854],{"class":853},"sKwhi"," defineNuxtConfig",[480,856,858],{"class":857},"soyes","({\n",[480,860,861,865,869,872],{"class":837,"line":19},[480,862,864],{"class":863},"suds8","    bitboss: { badgeVariants: [",[480,866,868],{"class":867},"sT6z2","'soft-green'",[480,870,871],{"class":863},"] }",[480,873,531],{"class":857},[480,875,876,879],{"class":837,"line":47},[480,877,878],{"class":857},"})",[480,880,881],{"class":863},";\n",[387,883,884,885,889,890,893],{},"The registered name joins the TypeScript union behind ",[413,886,887],{"href":517},[390,888,520],{}," and gives you a\n",[390,891,892],{},".bb-badge--soft-green"," hook. You write the CSS, setting the two custom\nproperties the built-in variants drive. Mix them from a theme token, so the pill\nfollows dark mode and a retuned palette.",[828,895,899],{"className":896,"code":897,"language":898,"meta":405,"style":405},"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, var(--bb-success) 15%, var(--bb-panel));\n    --fg: color-mix(in oklab, var(--bb-success) 55%, var(--bb-text));\n}\n","css",[390,900,901,910,961,1002],{"__ignoreMap":405},[480,902,903,907],{"class":837,"line":11},[480,904,906],{"class":905},"s-5SL",".bb-badge.bb-badge--soft-green",[480,908,909],{"class":863}," {\n",[480,911,912,915,918,921,924,927,930,932,935,937,940,943,946,949,951,953,955,958],{"class":837,"line":15},[480,913,914],{"class":857},"    --bg",[480,916,917],{"class":863},": ",[480,919,920],{"class":905},"color-mix",[480,922,923],{"class":863},"(",[480,925,926],{"class":857},"in",[480,928,929],{"class":857}," oklab",[480,931,397],{"class":863},[480,933,934],{"class":905},"var",[480,936,923],{"class":863},[480,938,939],{"class":857},"--bb-success",[480,941,942],{"class":863},") ",[480,944,945],{"class":905},"15",[480,947,948],{"class":846},"%",[480,950,397],{"class":863},[480,952,934],{"class":905},[480,954,923],{"class":863},[480,956,957],{"class":857},"--bb-panel",[480,959,960],{"class":863},"));\n",[480,962,963,966,968,970,972,974,976,978,980,982,984,986,989,991,993,995,997,1000],{"class":837,"line":19},[480,964,965],{"class":857},"    --fg",[480,967,917],{"class":863},[480,969,920],{"class":905},[480,971,923],{"class":863},[480,973,926],{"class":857},[480,975,929],{"class":857},[480,977,397],{"class":863},[480,979,934],{"class":905},[480,981,923],{"class":863},[480,983,939],{"class":857},[480,985,942],{"class":863},[480,987,988],{"class":905},"55",[480,990,948],{"class":846},[480,992,397],{"class":863},[480,994,934],{"class":905},[480,996,923],{"class":863},[480,998,999],{"class":857},"--bb-text",[480,1001,960],{"class":863},[480,1003,1004],{"class":837,"line":47},[480,1005,1006],{"class":863},"}\n",[387,1008,1009,1010,1013,1014,1017,1018,1021,1022,609,1025,1028,1029,1013,1032,1035],{},"The same class reaches past color: ",[390,1011,1012],{},"--bw"," with ",[390,1015,1016],{},"--border-color"," draws a border,\n",[390,1019,1020],{},"--r"," rounds the pill, ",[390,1023,1024],{},"--fs",[390,1026,1027],{},"--px"," set the label size and side padding,\nand ",[390,1030,1031],{},"--ring-color",[390,1033,1034],{},"--ring-size"," style the focus ring of a clickable badge.",[387,1037,1038,1039,1042],{},"For a one-off accent, override the same properties inline:\n",[390,1040,1041],{},":style=\"{ '--bg': 'var(--bb-info)', '--fg': 'var(--bb-info-fg)' }\"",". With a\ncolour of your own, check the contrast yourself.",[387,1044,1045,1046,1048,1049,609,1052,1055,1056,1058],{},"When the colours come from data, such as labels each workspace colours its own\nway, there is no name to register. Set ",[390,1047,573],{},": the badge renders no\nvariant class and you paint it with ",[390,1050,1051],{},"--bg",[390,1053,1054],{},"--fg",". Until you set them it\nkeeps the base ",[390,1057,524],{}," colours.",[493,1060],{"name":1061},"BbBadge\u002FVariantNone",[448,1063,1065],{"title":1064},"v2 stylesheets",[387,1066,1067,1070,1071,1074,1075,1078,1079,1082,1083,1086,1087,609,1090,1093,1094,1097,1098,1100,1101,1104],{},[390,1068,1069],{},".bb-chip"," selectors become ",[390,1072,1073],{},".bb-badge",", the label span is ",[390,1076,1077],{},".bb-badge__text"," and\nthe × is ",[390,1080,1081],{},".bb-badge__clear"," (it was ",[390,1084,1085],{},"__clear-button","). The pill now holds two\nsides, ",[390,1088,1089],{},".bb-badge__body",[390,1091,1092],{},".bb-badge__trailing",", so a direct-child selector\nsuch as ",[390,1095,1096],{},".bb-badge > .bb-badge__text"," has to become a descendant one.\n",[390,1099,626],{}," flags each stale ",[390,1102,1103],{},".bb-*"," selector and names the class to use.",[1106,1107,1108],"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":405,"searchDepth":19,"depth":19,"links":1110},[1111,1115,1116,1119],{"id":478,"depth":15,"text":482,"children":1112},[1113,1114],{"id":511,"depth":19,"text":512},{"id":600,"depth":19,"text":49},{"id":473,"depth":15,"text":662},{"id":701,"depth":15,"text":704,"children":1117},[1118],{"id":792,"depth":19,"text":793},{"id":820,"depth":15,"text":823},"The library's inline pill: status labels, counts and removable tokens.",{},true,[1124,1125,1126,1127],{"id":478,"title":482},{"id":473,"title":662},{"id":701,"title":704},{"id":820,"title":823},{"title":209,"description":1120},"components\u002Fbb-badge","_Xj-_teMiqEDncNCSArb9rOyFm3PAaQjdOhf3BdpCRc",{"name":209,"slug":1132,"group":203,"description":1133,"entrypoint":1134,"docs":1135,"props":1138,"models":1179,"events":1180,"slots":1185,"exposed":1198,"pt":1199,"validated":3,"migration":1231},"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":1136,"source":1137},"ai\u002FBbBadge.md","ai\u002Fsource\u002FBbBadge.md",[1139,1143,1148,1152,1155,1158,1160,1164,1169,1175],{"name":615,"type":1140,"required":1141,"default":3,"description":1142,"note":3,"demo":478},"string | undefined",false,"Icon rendered after the label. On a `clearable` badge it shares the trailing slot with the clear button: the icon shows at rest and the clear button reveals over it on hover\u002Ffocus.",{"name":473,"type":1144,"required":1141,"default":1145,"description":1146,"note":1147,"demo":473},"boolean | undefined","false","Renders a trailing clear button and emits `click:clear` when pressed — turns the 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":1149,"type":1140,"required":1141,"default":3,"description":1150,"note":1151,"demo":701},"clearableLabel","Accessible name of the clear button, whole: set, it is the name on any body (\"Remove the filter Deleted\"). Rarely needed: unset, the name is composed from the localized `badge.clearLabel` verb and the badge text (\"Remove Italy\"), or the verb alone when a `BbBadgeButton` owns the body.","Set it when a `BbBadgeButton` owns the body: the × is then named by the bare verb (\"Remove\"), so the two controls do not both read the label, and \"Remove priority filter\" says what goes.",{"name":622,"type":1140,"required":1141,"default":3,"description":1153,"note":1154,"demo":478},"Renders an icon-only badge. When set, `prepend:icon` \u002F `append:icon` are ignored and the default slot becomes the badge's visually hidden accessible label — always provide it.","Keep writing the label in the slot: it becomes the accessible name. An icon-only badge with an empty slot is an error for `npx bitboss-ui check` and the ESLint rule `require-accessible-name`.",{"name":792,"type":1144,"required":1141,"default":1145,"description":1156,"note":1157,"demo":701},"Shows a spinner in place of the leftmost icon (`icon` or `prepend:icon`; the `append:icon` when it is the only one; else the leading slot), as `BbButton` does, with a hidden loading announcement.","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":608,"type":1140,"required":1141,"default":3,"description":1159,"note":3,"demo":478},"Icon rendered before the label.",{"name":1161,"type":1162,"required":1141,"default":3,"description":1163,"note":3,"demo":3},"pt","PtMap\u003CBbBadgePtPart, \"outline\" | \"primary\" | \"destructive\" | \"activeLink\" | \"exactActiveLink\" | \"loading\" | \"secondary\"> | undefined","Passthrough, object form: `{ icon: '…', 'icon:loading': '…' }` — the same keys as the `pt:*` attributes without the prefix. Parts: `root`, `icon`, `spinner`, `text`, `clear`. States: `loading` and the registered variants (an app's own included).",{"name":1165,"type":1166,"required":1141,"default":3,"description":1167,"note":3,"demo":1168},"pt:\u003Cpart>","PtValue | undefined","Passthrough, attribute form: one attribute per part, `pt:\u003Cpart>`, and per part and state, `pt:\u003Cpart>:\u003Cstate>`. Parts: `clear`, `icon`, `root`, `spinner`, `text`. States: `activeLink`, `destructive`, `exactActiveLink`, `loading`, `outline`, `primary`, `secondary`.","passthrough",{"name":1170,"type":1171,"required":1141,"default":1172,"description":1173,"note":1174,"demo":478},"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":520,"type":1176,"required":1141,"default":1177,"description":1178,"note":3,"demo":478},"BadgeVariantType | undefined","\"primary\"","Visual variant: `primary`, `secondary`, `destructive`, or `outline`. Status colours are a registration (vite plugin `badgeVariants`, the `soft-*` palette in design-language.md) styled as `.bb-badge--\u003Cvariant>`. `'none'` renders no variant class: set `--bg` \u002F `--fg` on the element.",[],[1181],{"name":675,"signature":1182,"description":1183,"note":1184,"demo":473},"(event: MouseEvent): void","Emitted when the clear button is pressed (only rendered when `clearable`).","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`.",[1186,1189,1194,1196],{"name":615,"type":1187,"description":1188,"note":3,"demo":3},"BbBadgeIconSlotProps","The trailing icon, replacing `append:icon`; inside the `icon` part.",{"name":1190,"type":1191,"description":1192,"note":1193,"demo":701},"default","object","The badge's label content. When `icon` is set this becomes the visually hidden accessible label. Render a `BbBadgeButton` here to make the badge body 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.",{"name":622,"type":1187,"description":1195,"note":3,"demo":3},"The glyph of an icon-only badge, replacing the `icon` prop. Renders inside the `icon` part: `pt:icon`, `--icon-size` and the loading spinner apply.",{"name":608,"type":1187,"description":1197,"note":3,"demo":3},"The leading icon, replacing `prepend:icon`; inside the `icon` part.",[],{"parts":1200,"states":1214},[1201,1204,1206,1209,1211],{"name":1202,"description":1203},"root","The badge.",{"name":622,"description":1205},"Every content glyph — the `icon`-mode glyph, `prepend:icon`, `append:icon` — a broadcast. The clear ✕ is not in it.",{"name":1207,"description":1208},"spinner","The loading glyph. It REPLACES an icon while `loading` (on a button it joins one instead).",{"name":465,"description":1210},"The label span; it owns the truncation.",{"name":1212,"description":1213},"clear","The ✕ that removes the badge (`clearable`).",[1215,1218,1220,1223,1225,1227,1229],{"name":1216,"description":1217},"activeLink","Component-wide: the badge's `BbBadgeButton` is a link to the current page or one of its ancestors. The weakest state.",{"name":534,"description":1219},"Component-wide: `variant: 'destructive'`. Below the real states, like every variant.",{"name":1221,"description":1222},"exactActiveLink","Component-wide: the badge's `BbBadgeButton` is a link to the current page itself (`activeLink` is on too).",{"name":792,"description":1224},"Component-wide: `loading` is on; the spinner takes an icon's place.",{"name":530,"description":1226},"Component-wide: `variant: 'outline'`. Below the real states, like every variant.",{"name":524,"description":1228},"Component-wide: `variant: 'primary'`. Merged after the part's base entry and before its states, so the real states still win.",{"name":527,"description":1230},"Component-wide: `variant: 'secondary'`. Below the real states, like every variant.",{"removed":1232,"renamed":1239},[1233],{"name":461,"surface":1234,"replacedBy":3,"hint":3,"since":1235,"migration":1236,"silent":1122,"fix":1237},"prop","3.0.0-alpha.1","ai\u002Fguides\u002Fmigration\u002Fcomponents\u002Fbb-badge.md",{"kind":1238},"manual",[],1793055138211]