Badge

Badge variants can be defined in

theme.badges

. The Badge component uses

theme.badges.primary

as its default variant.

badge

({ ml, mt }) => (
  <Box
    style={{
      height: '100%',
    }}
  >
    <Badge sx={{ ml, mt }}>badge</Badge>
  </Box>
)

Name	Description	Default	Controls
mt	Margin on top ResponsiveValue<stringnumbersymbol, Required<Theme<TLengthStyledSystem>>>	-
ml	Margin on left ResponsiveValue<stringnumbersymbol, Required<Theme<TLengthStyledSystem>>>	-

badge

badge

320px

badge

375px

badge

768px

badge

1024px