Example heading New. . . Copy. Badges can be used as part of links or buttons to provide a counter.
MenuGettingstartedLayoutFormsComponentsAlertsAccordionBadgeBreadcrumbButtonsButtonGroupCardsCarouselCloseButtonDropdownsFiguresImagesListGroupModalNavsNavbarOffcanvasOverlaysPaginationPlaceholderPopoversProgressSpinnersTableTabsTooltipsToastsUtilitiesMigratingAboutBadgesBadgesscaletomatchthesizeoftheimmediateparentelementby
usingrelativefontsizingandemunits.
ExampleheadingNew
ExampleheadingNew
ExampleheadingNew
ExampleheadingNew
ExampleheadingNew
ExampleheadingNew
ExampleheadingNew
ExampleheadingNew
ExampleheadingNew
ExampleheadingNew
ExampleheadingNew
ExampleheadingNew
CopyBadgescanbeusedaspartoflinksorbuttonstoprovideacounter.
Profile9
unreadmessages
Profile9unreadmessagesCopyNotethatdependingonhowtheyareused,badgesmaybeconfusingfor
usersofscreenreadersandsimilarassistivetechnologies.Whilethe
stylingofbadgesprovidesavisualcueastotheirpurpose,theseusers
willsimplybepresentedwiththecontentofthebadge.Dependingonthe
specificsituation,thesebadgesmayseemlikerandomadditionalwordsor
numbersattheendofasentence,link,orbutton.Unlessthecontextis
clear,considerincludingadditionalcontextwithavisuallyhiddenpiece
ofadditionaltext.Contextualvariations#Addanyofthebelowmentionedmodifierclassestochangethe
appearanceofabadge.
PrimarySecondary{''}
SuccessDanger{''}
Warning
{''}
Info{''}
Light
{''}
Dark
PrimarySecondary{''}SuccessDanger{''}Warning{''}Info{''}Light{''}Dark
CopyPill#badgesUsethepillmodifierclasstomakebadgesmorerounded
(withalargerborder-radius).
Usefulifyoumissthebadgesfromv3.
Primary
{''}
Secondary
{''}
Success
{''}
Danger
{''}
Warning
{''}
Info
{''}
Light
{''}
Dark
Primary{''}Secondary{''}Success{''}Danger{''}Warning{''}Info{''}Light{''}Dark
CopyAPI#Badge#viewsourcefileimportBadgefrom'react-bootstrap/Badge'CopyimportcodefortheBadgecomponentNameTypeDefaultDescriptionaselementTypeYoucanuseacustomelementtypeforthiscomponent.bg'primary'|'secondary'|'success'|'danger'|'warning'|'info'|'light'|'dark''primary'ThevisualstyleofthebadgepillbooleanfalseAddthepillmodifiertomakebadgesmoreroundedwith
someadditionalhorizontalpaddingtext'primary'|'secondary'|'success'|'danger'|'warning'|'info'|'light'|'dark'SetsbadgetextcolorbsPrefixstring'badge'ChangetheunderlyingcomponentCSSbaseclassnameandmodifierclassnamesprefix.Thisisanescapehatchforworkingwithheavilycustomizedbootstrapcss.
