Skip to content

Badge

A small emblem to attach to avatars, icons, and other elements togenerate notifications.

Usage

import { Badge } from 'matterial'

function App() {
  return (
    <Badge content={99}>
      <Icon icon="Notification" />
    </Badge>
  )
}

Basic Badge

1 
<Badge content={1}>
  <Icon icon="Notification" />
</Badge>

Colored Badge

9999999999999999999999999999

Dot Badge

The dot variant changes a badge into a small dot. This can be used as a notification that something has changed without giving a count.

<Badge variant="dot" color="secondary">
  <Icon icon="Notification" />
</Badge>

Maximum Content

Use the max prop to specify the maximum number in the badge.

99+ 
<Badge color="red" max={99} content={100}>
  <Icon icon="Notification" />
</Badge>

Badge Visibility

The badge automatically hides when content is zero. You can override this with the showZero prop.

0
<Badge color="red" content={0}><Icon icon="Notification" /></Badge>
<Badge color="red" content={0} showZero><Icon icon="Notification" /></Badge>