Badge

0.6.0-alpha.7

Badge variants can be defined in

theme.badges

. The Badge component uses

theme.badges.primary

as its default variant.

import { Badge } from 'theme-ui';

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>>>	-

	Name	Description	Default
BoxOwnProps (4 properties)

	as	ElementType<any>	-
	variant	string	-
	css	Interpolation<any>	-
	sx	ThemeUIStyleObject	-
SpaceProps (28 properties)
HTMLAttributes (44 properties)
OpacityProps (1 properties)
AriaAttributes (48 properties)
DOMAttributes (161 properties)
Attributes (1 properties)
BackgroundColorProps (2 properties)
RefAttributes (1 properties)