Badge
The Badge component displays a notification indicator as a small badge positioned relative to its children. It’s commonly used to show notification counts, status indicators, or draw attention to specific elements.
Import
import { Badge } from '@naturacosmeticos/natds-web';
Usage
Basic Badge
import { Badge } from '@naturacosmeticos/natds-web';
import { Icon } from '@naturacosmeticos/natds-web';
function Example() {
return (
<Badge badgeContent={4} color="primary">
<Icon name="outlined-action-filter" size="tiny" />
</Badge>
);
}
Dot Variant
Use the dot variant for a simpler indicator without content:
import { Badge } from '@naturacosmeticos/natds-web';
import { Icon } from '@naturacosmeticos/natds-web';
function Example() {
return (
<Badge variant="dot" color="secondary">
<Icon name="outlined-action-filter" size="tiny" />
</Badge>
);
}
Maximum Value
Control the maximum value displayed in the badge:
import { Badge } from '@naturacosmeticos/natds-web';
import { Icon } from '@naturacosmeticos/natds-web';
function Example() {
return (
<Badge badgeContent={999} max={99} color="error">
<Icon name="outlined-action-filter" size="tiny" />
</Badge>
);
}
Colors
Badge supports several theme colors:
import { Badge } from '@naturacosmeticos/natds-web';
import { Icon } from '@naturacosmeticos/natds-web';
function ColorExamples() {
const icon = <Icon name="outlined-action-filter" size="tiny" />;
return (
<>
<Badge badgeContent={4} color="default">{icon}</Badge>
<Badge badgeContent={4} color="primary">{icon}</Badge>
<Badge badgeContent={4} color="secondary">{icon}</Badge>
<Badge badgeContent={4} color="error">{icon}</Badge>
</>
);
}
default, primary, secondary, error
Anchor Position
Control where the badge appears relative to its children:
import { Badge } from '@naturacosmeticos/natds-web';
import { Icon } from '@naturacosmeticos/natds-web';
function AnchorExamples() {
const icon = <Icon name="outlined-action-filter" size="tiny" />;
return (
<>
<Badge
badgeContent={4}
color="primary"
anchorOrigin={{ vertical: 'top', horizontal: 'right' }}
>
{icon}
</Badge>
<Badge
badgeContent={4}
color="primary"
anchorOrigin={{ vertical: 'top', horizontal: 'left' }}
>
{icon}
</Badge>
<Badge
badgeContent={4}
color="primary"
anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}
>
{icon}
</Badge>
<Badge
badgeContent={4}
color="primary"
anchorOrigin={{ vertical: 'bottom', horizontal: 'left' }}
>
{icon}
</Badge>
</>
);
}
Overlap
Control how the badge overlaps with its children:
import { Badge } from '@naturacosmeticos/natds-web';
import { Avatar } from '@naturacosmeticos/natds-web';
function OverlapExamples() {
return (
<>
<Badge badgeContent={4} color="primary" overlap="circle">
<Avatar src="profile.jpg" />
</Badge>
<Badge badgeContent={4} color="primary" overlap="rectangle">
<div style={{ width: 40, height: 40, background: '#ccc' }} />
</Badge>
</>
);
}
Props
IBadgeProps
The content rendered within the badge.
color
'default' | 'primary' | 'secondary' | 'error'
default:"default"
The color of the badge.
variant
'standard' | 'dot'
default:"standard"
The variant to use. Use dot for a simple indicator without content.
Maximum value to show. If badgeContent exceeds this value, it displays max+.
Controls whether the badge is shown when badgeContent is zero.
If true, the badge is invisible.
anchorOrigin
{ vertical: 'top' | 'bottom', horizontal: 'left' | 'right' }
The anchor of the badge relative to its children.
overlap
'circle' | 'rectangle'
default:"rectangle"
Wrapped shape the badge should overlap.
The content wrapped by the badge.
Accessibility
When using Badge with icons for filters or notifications, include screen-reader-only text:
import { Badge, Icon, Typography } from '@naturacosmeticos/natds-web';
function AccessibleBadge() {
return (
<Badge badgeContent={1} color="secondary">
<Icon name="outlined-action-filter" size="tiny" />
<Typography variant="srOnly">Filters (1 active)</Typography>
</Badge>
);
}
Advanced Usage
For more advanced use cases and additional props, refer to the Material-UI Badge documentation.
