Components
Badge
import { Badge } from "@eggspot/ui"
Intents
<Badge intent={Badge.intents.primary} />
<Badge intent={Badge.intents.success} />
<Badge intent={Badge.intents.warning} />
<Badge intent={Badge.intents.danger} />
Badge with Value
40
0
99+
9+
<Badge value={40} />
<Badge value={0} intent={Badge.intents.success} />
<Badge value={150} max={99} intent={Badge.intents.warning} />
<Badge value={10} max={9} intent={Badge.intents.danger} />
Badge on Avatar
NA
5
NA
9
<Badge className="mr-16">
<Avatar src="https://via.placeholder.com/600x400" />
</Badge>
<Badge intent={Badge.intents.danger} className="mr-16">
<Avatar name="Nguyen Van A" />
</Badge>
<Badge className="mr-16" value={5}>
<Avatar
src="https://via.placeholder.com/600x400"
size={Avatar.sizes.large}
/>
</Badge>
<Badge intent={Badge.intents.danger} className="mr-16" value={9}>
<Avatar name="Nguyen Van A" size={Avatar.sizes.large} />
</Badge>
Badge on Icon
5
9
<Badge className="mr-16" offsetX="20%" offsetY="20%">
<SvgFilledBellIcon size={20} />
</Badge>
<Badge
intent={Badge.intents.danger}
className="mr-16"
offsetX="20%"
offsetY="20%"
>
<SvgFilledBellIcon size={20} />
</Badge>
<Badge className="mr-16" value={5} offsetX="20%" offsetY="20%">
<SvgFilledBellIcon size={30} />
</Badge>
<Badge
intent={Badge.intents.danger}
className="mr-16"
value={9}
offsetX="20%"
offsetY="20%"
>
<SvgFilledBellIcon size={30} />
</Badge>
Badge on Element
5
9
<Badge>
<Button>Notifications</Button>
</Badge>
<Badge intent={Badge.intents.danger}>
<Button>Notifications</Button>
</Badge>
<Badge value={5}>
<Button>Notifications</Button>
</Badge>
<Badge intent={Badge.intents.danger} value={9}>
<Button>Notifications</Button>
</Badge>
Props
| Attribute | Type | Description | Default |
|---|---|---|---|
| intent | Intents | Change badge color | primary |
| value | number | Number to show in the badge | - |
| max | number | The maximum value of the badge | - |
| hideZero | boolean | Whether to hide badge when the value is zero | false |
| offsetX | string | - | - |
| offsetY | string | - | - |
| ... | 'id', 'className', ... | Native props | - |
Types
Intents type
type Intents = 'primary' | 'success' | 'warning' | 'danger';