Badge

Usage

Example

Two types of sizes: small and large.

Badge value is only visible on large size.

import Badge from '@mavvy/m3-ui/Badge';
import Button from '@mavvy/m3-ui/Button';

...

<Badge value={1} size="small" show>
  <Button variant="elevated">Buy</Button>
</Badge>
<Badge value={1} show>
  <Button variant="elevated">Buy</Button>
</Badge>
<Badge value={1} size="large" show>
  <Button variant="elevated">Buy</Button>
</Badge>
<Badge value={100} max={99} size="large" show>
  <Button variant="elevated">Buy</Button>
</Badge>

1

99+

Props

prop	type	description
value	number	value shown on the badge
size	small|large	badge size
max	number	if set, will put a + sign if the value is greater than max
show	boolean	displays the badge value. default is false
containerClasName	string	className of the badge container component
className	string	className of the badge component
children	React.ReactNode	optional children component