Creating Dynamic Badges and Status Indicators
Build dynamic status badges, notification indicators, and alert badges for dashboards and applications using URL-based image generation.
Creating Dynamic Badges and Status Indicators
Status badges and indicators are essential for dashboards, applications, and documentation. With DrawByURL, you can create dynamic badges that update based on your data.
Basic Status Badge
A simple status indicator:
/circle-color-green-size-80?width=100&height=100Badge with Text
Add text to your badge:
/circle-color-green-size-80/text-value-ONLINE-color-white-x-50-y-50-size-20?width=100&height=100Status Colors
Use different colors for different statuses:
- **Online**: Green
- **Offline**: Red
- **Away**: Yellow
- **Busy**: Orange
const statusColors = {
online: 'green',
offline: 'red',
away: 'yellow',
busy: 'orange',
};
function getStatusBadge(status) {
return `/circle-color-${statusColors[status]}-size-80?width=100&height=100`;
}
Notification Badge
Create notification badges with counts:
/circle-color-red-size-60/text-value-5-color-white-x-50-y-50-size-24-weight-bold?width=100&height=100Dynamic Notification Count
Generate badges based on notification count:
function getNotificationBadge(count) {
if (count === 0) return null;
if (count > 99) {
return `/circle-color-red-size-60/text-value-99+-color-white-x-50-y-50-size-20-weight-bold?width=100&height=100`;
}
return `/circle-color-red-size-60/text-value-${count}-color-white-x-50-y-50-size-24-weight-bold?width=100&height=100`;
}
Square Badges
Use squares for a different style:
/square-color-blue-size-80/text-value-NEW-color-white-x-50-y-50-size-24-weight-bold?width=100&height=100Version Badges
Create version badges for documentation:
/rectangle-color-blue-width-120-height-40-x-440-y-205/text-value-v1.0.0-color-white-x-500-y-225-size-20-weight-bold?width=1000&height=450Using in HTML
Embed badges directly:
<img src="https://drawbyurl.com/circle-color-green-size-80?width=100&height=100" alt="Online" />
Using in React
function StatusBadge({ status, count }) {
const statusColors = {
online: 'green',
offline: 'red',
away: 'yellow',
};
const color = statusColors[status] || 'gray';
const url = count
? `https://drawbyurl.com/circle-color-${color}-size-60/text-value-${count}-color-white-x-50-y-50-size-24?width=100&height=100`
: `https://drawbyurl.com/circle-color-${color}-size-80?width=100&height=100`;
return <img src={url} alt={status} />;
}
Dashboard Integration
Integrate badges into dashboards:
const services = [
{ name: 'API', status: 'online' },
{ name: 'Database', status: 'online' },
{ name: 'Cache', status: 'offline' },
];
services.forEach(service => {
const badgeUrl = `https://drawbyurl.com/circle-color-${service.status === 'online' ? 'green' : 'red'}-size-80?width=100&height=100`;
// Display in dashboard
});
Alert Badges
Create alert-style badges:
/rectangle-color-red-width-200-height-50-x-300-y-200/text-value-ALERT-color-white-x-400-y-225-size-24-weight-bold?width=800&height=450Success Badges
Success indicators:
/circle-color-green-size-100/text-value-✓-color-white-x-50-y-50-size-48?width=100&height=100Best Practices
1. **Use appropriate sizes** - Match your UI scale
2. **Consistent colors** - Use the same color scheme across your app
3. **Readable text** - Ensure text is large enough
4. **Cache effectively** - Identical URLs are cached automatically
5. **Accessibility** - Include alt text for screen readers
Conclusion
Dynamic badges and status indicators are easy to create with DrawByURL. You can generate them programmatically based on your data, ensuring they're always up-to-date and consistent.
For more examples, check out our [gallery](/gallery) or [use cases](/use-cases).