React Badge component and hook - MUI BaseSkip to content🎉 Material UI v7 is out now! Check out the announcement blog post.
The Badge component generates a small label that is attached to its child element.
FeedbackBundle sizeDemosComponents APIHooks APIuseBadge APIImportimport { useBadge } from '@mui/base/useBadge';
// or
import { useBadge } from '@mui/base';Learn about the difference by reading this guide on minimizing bundle size.
ParametersView:tableThe content rendered within the badge.
invisiblebooleanfalseIf true, the badge is invisible.
maxnumber99Max count to show.
showZerobooleanfalseControls whether the badge is hidden when badgeContent is zero.
Return valueView:tableDefines the content that's displayed inside the badge.
displayValueReact.ReactNodeValue to be displayed in the badge. If badgeContent is greater than max, it will return max+.
invisiblebooleanIf true, the component will not be visible.
maxnumberMaximum number to be displayed in the badge.
Was this page helpful?
•
Blog•
StoreContents
useBadgeImportParametersbadgeContentinvisiblemaxshowZeroReturn valuebadgeContentdisplayValueinvisiblemaxBecome a Diamond sponsorMUI stands in solidarity with Ukraine.React Badge component and hook - MUI Base,AI智能索引,全网链接索引,智能导航,网页索引
- The Badge component generates a small label that is attached to its child element.