The Badge component is used to highlight an item’s status, label, or category with color-coded visual indicators.
Basic Usage
import { Badge } from 'reshaped';
function App() {
return <Badge>New</Badge>;
}
Variants
Badges come in three visual styles:
<Badge variant="solid">Solid</Badge>
<Badge variant="faded">Faded</Badge>
<Badge variant="outline">Outline</Badge>
Colors
Apply semantic colors to badges:
<Badge color="neutral">Neutral</Badge>
<Badge color="primary">Primary</Badge>
<Badge color="positive">Positive</Badge>
<Badge color="warning">Warning</Badge>
<Badge color="critical">Critical</Badge>
Sizes
<Badge size="small">Small</Badge>
<Badge size="medium">Medium</Badge>
<Badge size="large">Large</Badge>
With Icons
Add icons to badges for additional context:
import { Badge } from 'reshaped';
import IconStar from './icons/Star';
<Badge icon={IconStar}>Favorite</Badge>
<Badge endIcon={IconStar}>End Icon</Badge>
<Badge icon={IconStar} endIcon={IconStar}>Both</Badge>
Rounded Badge
Create fully rounded badges:
<Badge rounded>Rounded</Badge>
<Badge rounded size="small">42</Badge>
Empty Badge
Use for notification indicators:
<Badge color="critical" rounded />
Interactive Badges
Badges can be clickable:
<Badge onClick={() => console.log('clicked')}>Clickable</Badge>
<Badge href="/page">Link Badge</Badge>
Dismissible Badges
Allow users to dismiss badges:
<Badge
onDismiss={() => console.log('dismissed')}
dismissAriaLabel="Dismiss badge"
>
Dismissible
</Badge>
Highlighted State
Highlight active or selected badges:
<Badge highlighted>Active</Badge>
<Badge color="primary" highlighted>Primary Active</Badge>
Hidden State
Transition badges to hidden state:
<Badge hidden>Hidden Badge</Badge>
Complete Example
Here’s a comprehensive example showing badges in a tag list:
import { Badge, View } from 'reshaped';
import IconTag from './icons/Tag';
function TagList() {
const [tags, setTags] = React.useState([
{ id: 1, label: 'Design', color: 'primary' },
{ id: 2, label: 'Development', color: 'positive' },
{ id: 3, label: 'Marketing', color: 'warning' },
]);
const removeTag = (id) => {
setTags(tags.filter(tag => tag.id !== id));
};
return (
<View direction="row" gap={2} wrap>
{tags.map(tag => (
<Badge
key={tag.id}
color={tag.color}
icon={IconTag}
onDismiss={() => removeTag(tag.id)}
dismissAriaLabel={`Remove ${tag.label} tag`}
>
{tag.label}
</Badge>
))}
</View>
);
}
Props
Component color scheme.Options: neutral, critical, warning, positive, primary
Component render variant.Options: solid, faded, outline
Component size.Options: small, medium, large
icon
React.ComponentType
default:"undefined"
SVG component for the icon.
endIcon
React.ComponentType
default:"undefined"
SVG component for the end position icon.
Change border radius to fully rounded corners.
Highlight the component when used for an active state.
Transition the component to hidden state.
onClick
function
default:"undefined"
Callback when the badge is clicked. Makes the badge interactive.
href
string
default:"undefined"
URL to navigate to when clicked. Turns the badge into a link.
onDismiss
function
default:"undefined"
Callback triggered when the dismiss button is pressed. When provided, a dismiss button is shown.
Aria label for the dismiss button.
as
string
default:"undefined"
Custom component tag name.
className
string
default:"undefined"
Additional classname for the root element.
attributes
object
default:"undefined"
Additional attributes for the root element.
children
ReactNode
default:"undefined"
Node for inserting text or other content.