Documentation and examples for Material-ui badges, our small count
and labelling component.
Examples
Badges can be used as part of links or buttons to provide a counter.
Unread messages
24
Notifications
4
import React from " react " ;
// @material-ui/core components
import { makeStyles } from " @material-ui/core/styles " ;
import Badge from " @material-ui/core/Badge " ;
import Box from " @material-ui/core/Box " ;
import Button from " @material-ui/core/Button " ;
// @material-ui/icons components
// core components
import componentStyles from " assets/theme/components/badge.js " ;
const useStyles = makeStyles ( componentStyles );
function Example () {
const classes = useStyles ();
const primaryBadgeClasses = {
badge : classes . badgePositionRelative ,
};
const errorBadgeClasses = {
badge :
classes . badgeCircle +
" " +
classes . badgeBorderWhite +
" " +
classes . badgeSizeMd ,
};
return (
<>
< Box component = { Button } color = " default " marginRight = " 1rem!important " >
Unread messages { " " }
< Badge
badgeContent = { 24 }
color = " primary "
classes = { primaryBadgeClasses }
>< /Badge >
< /Box >
< Badge badgeContent = { 4 } color = " error " classes = { errorBadgeClasses } >
< Button color = " primary " variant = " contained " >
Notifications
< /Button >
< /Badge >
< / >
);
}
export default Example ;
Contextual variations
Add any of the below mentioned modifier classes to change the
appearance of a badge.
Default
Primary
Secondary
Info
Success
Danger
Warning
import React from " react " ;
// @material-ui/core components
import { makeStyles } from " @material-ui/core/styles " ;
import Badge from " @material-ui/core/Badge " ;
import Box from " @material-ui/core/Box " ;
// @material-ui/icons components
// core components
import componentStyles from " assets/theme/components/badge.js " ;
const useStyles = makeStyles ( componentStyles );
function Example () {
const classes = useStyles ();
const badgePositionRelative = {
badge : classes . badgePositionRelative ,
};
const badgeInfo = {
badge : classes . badgePositionRelative + " " + classes . badgeInfo ,
};
const badgeSuccess = {
badge : classes . badgePositionRelative + " " + classes . badgeSuccess ,
};
const badgeWarning = {
badge : classes . badgePositionRelative + " " + classes . badgeWarning ,
};
return (
<>
< Box marginRight = " .25rem " component = " span " >
< Badge badgeContent = { " default " } classes = { badgePositionRelative } >< /Badge >
< /Box >
< Box marginRight = " .25rem " component = " span " >
< Badge
color = " primary "
badgeContent = { " primary " }
classes = { badgePositionRelative }
>< /Badge >
< /Box >
< Box marginRight = " .25rem " component = " span " >
< Badge
color = " secondary "
badgeContent = { " secondary " }
classes = { badgePositionRelative }
>< /Badge >
< /Box >
< Box marginRight = " .25rem " component = " span " >
< Badge badgeContent = { " info " } classes = { badgeInfo } >< /Badge >
< /Box >
< Box marginRight = " .25rem " component = " span " >
< Badge badgeContent = { " success " } classes = { badgeSuccess } >< /Badge >
< /Box >
< Box marginRight = " .25rem " component = " span " >
< Badge
color = " error "
badgeContent = { " error " }
classes = { badgePositionRelative }
>< /Badge >
< /Box >
< Box marginRight = " .25rem " component = " span " >
< Badge badgeContent = { " warning " } classes = { badgeWarning } >< /Badge >
< /Box >
< / >
);
}
export default Example ;
Pill badges
Use the
badgeRound
modifier prop class to make badges more rounded (with a larger
border-radius
and additional horizontal
padding
).
Default
Primary
Secondary
Info
Success
Danger
Warning
import React from " react " ;
// @material-ui/core components
import { makeStyles } from " @material-ui/core/styles " ;
import Badge from " @material-ui/core/Badge " ;
import Box from " @material-ui/core/Box " ;
// @material-ui/icons components
// core components
import componentStyles from " assets/theme/components/badge.js " ;
const useStyles = makeStyles ( componentStyles );
function Example () {
const classes = useStyles ();
const badgePositionRelative = {
badge : classes . badgePositionRelative + " " + classes . badgeRound ,
};
const badgeInfo = {
badge :
classes . badgePositionRelative +
" " +
classes . badgeInfo +
" " +
classes . badgeRound ,
};
const badgeSuccess = {
badge :
classes . badgePositionRelative +
" " +
classes . badgeSuccess +
" " +
classes . badgeRound ,
};
const badgeWarning = {
badge :
classes . badgePositionRelative +
" " +
classes . badgeWarning +
" " +
classes . badgeRound ,
};
return (
<>
< Box marginRight = " .25rem " component = " span " >
< Badge badgeContent = { " default " } classes = { badgePositionRelative } >< /Badge >
< /Box >
< Box marginRight = " .25rem " component = " span " >
< Badge
color = " primary "
badgeContent = { " primary " }
classes = { badgePositionRelative }
>< /Badge >
< /Box >
< Box marginRight = " .25rem " component = " span " >
< Badge
color = " secondary "
badgeContent = { " secondary " }
classes = { badgePositionRelative }
>< /Badge >
< /Box >
< Box marginRight = " .25rem " component = " span " >
< Badge badgeContent = { " info " } classes = { badgeInfo } >< /Badge >
< /Box >
< Box marginRight = " .25rem " component = " span " >
< Badge badgeContent = { " success " } classes = { badgeSuccess } >< /Badge >
< /Box >
< Box marginRight = " .25rem " component = " span " >
< Badge
color = " error "
badgeContent = { " error " }
classes = { badgePositionRelative }
>< /Badge >
< /Box >
< Box marginRight = " .25rem " component = " span " >
< Badge badgeContent = { " warning " } classes = { badgeWarning } >< /Badge >
< /Box >
< / >
);
}
export default Example ;
Links
If you want to render the
Badge
component as an anchor element, you just need to set a
href
attribute on them and
component="a"
prop. You should also add the
badgeLink
class on the
Badge
’s
root
class
object (inside the
classes
prop).
Default
Primary
Secondary
Info
Success
Danger
Warning
import React from " react " ;
// @material-ui/core components
import { makeStyles } from " @material-ui/core/styles " ;
import Badge from " @material-ui/core/Badge " ;
import Box from " @material-ui/core/Box " ;
// @material-ui/icons components
// core components
import componentStyles from " assets/theme/components/badge.js " ;
const useStyles = makeStyles ( componentStyles );
function Example () {
const classes = useStyles ();
const badgePositionRelative = {
badge : classes . badgePositionRelative + " " + classes . badgeRound ,
};
const badgeInfo = {
root : classes . badgeLink ,
badge :
classes . badgePositionRelative +
" " +
classes . badgeInfo +
" " +
classes . badgeRound ,
};
const badgeSuccess = {
root : classes . badgeLink ,
badge :
classes . badgePositionRelative +
" " +
classes . badgeSuccess +
" " +
classes . badgeRound ,
};
const badgeWarning = {
root : classes . badgeLink ,
badge :
classes . badgePositionRelative +
" " +
classes . badgeWarning +
" " +
classes . badgeRound ,
};
return (
<>
< Box marginRight = " .25rem " component = " span " >
< Badge
href = " #mui "
component = " a "
onClick = {( e ) => e . preventDefault ()}
badgeContent = { " default " }
classes = { badgePositionRelative }
>< /Badge >
< /Box >
< Box marginRight = " .25rem " component = " span " >
< Badge
href = " #mui "
component = " a "
onClick = {( e ) => e . preventDefault ()}
color = " primary "
badgeContent = { " primary " }
classes = { badgePositionRelative }
>< /Badge >
< /Box >
< Box marginRight = " .25rem " component = " span " >
< Badge
href = " #mui "
component = " a "
onClick = {( e ) => e . preventDefault ()}
color = " secondary "
badgeContent = { " secondary " }
classes = { badgePositionRelative }
>< /Badge >
< /Box >
< Box marginRight = " .25rem " component = " span " >
< Badge
href = " #mui "
component = " a "
onClick = {( e ) => e . preventDefault ()}
badgeContent = { " info " }
classes = { badgeInfo }
>< /Badge >
< /Box >
< Box marginRight = " .25rem " component = " span " >
< Badge
href = " #mui "
component = " a "
onClick = {( e ) => e . preventDefault ()}
badgeContent = { " success " }
classes = { badgeSuccess }
>< /Badge >
< /Box >
< Box marginRight = " .25rem " component = " span " >
< Badge
href = " #mui "
component = " a "
onClick = {( e ) => e . preventDefault ()}
color = " error "
badgeContent = { " error " }
classes = { badgePositionRelative }
>< /Badge >
< /Box >
< Box marginRight = " .25rem " component = " span " >
< Badge
href = " #mui "
component = " a "
onClick = {( e ) => e . preventDefault ()}
badgeContent = { " warning " }
classes = { badgeWarning }
>< /Badge >
< /Box >
< / >
);
}
export default Example ;
Sizes
Use the
badgeSizeMd
or
badgeSizeLg
modifier classes to adjust badge sizes.
Default
Medium
Large badge
import React from " react " ;
// @material-ui/core components
import { makeStyles } from " @material-ui/core/styles " ;
import Badge from " @material-ui/core/Badge " ;
import Box from " @material-ui/core/Box " ;
// @material-ui/icons components
// core components
import componentStyles from " assets/theme/components/badge.js " ;
const useStyles = makeStyles ( componentStyles );
function Example () {
const classes = useStyles ();
const badgePositionRelative = {
badge : classes . badgePositionRelative + " " + classes . badgeRound ,
};
const badgeSuccess = {
badge :
classes . badgePositionRelative +
" " +
classes . badgeSuccess +
" " +
classes . badgeRound +
" " +
classes . badgeSizeMd ,
};
const badgeWarning = {
badge :
classes . badgePositionRelative +
" " +
classes . badgeWarning +
" " +
classes . badgeRound +
" " +
classes . badgeSizeLg ,
};
return (
<>
< Box marginRight = " .25rem " component = " span " >
< Badge
color = " primary "
badgeContent = { " default " }
classes = { badgePositionRelative }
>< /Badge >
< /Box >
< Box marginRight = " .25rem " component = " span " >
< Badge badgeContent = { " medium " } classes = { badgeSuccess } >< /Badge >
< /Box >
< Box marginRight = " .25rem " component = " span " >
< Badge badgeContent = { " large " } classes = { badgeWarning } >< /Badge >
< /Box >
< / >
);
}
export default Example ;
Props
If you want to see more examples and properties please check the
official
Material-UI Documentation .