Badges are small status indicators that can be used to highlight information or categorize content.
<Badge text="Status" color="green" />| Prop | Type | Required | Description |
|---|---|---|---|
| text | String | Yes | The text content to display in the badge |
| color | String | Yes | The color variant of the badge |
The Badge component supports 6 different color variants:
color="bunker"color="red"color="yellow"color="green"color="blue"color="violet"Common use cases for badges in the application:
<template>
<div>
<Badge text="New" color="green" />
<Badge text="Updated" color="blue" />
<Badge text="Deprecated" color="red" />
</div>
</template><template>
<div v-for="item in items" :key="item.id">
<Badge :text="item.status" :color="getStatusColor(item.status)" />
</div>
</template>
<script>
export default {
methods: {
getStatusColor(status) {
const colors = {
'active': 'green',
'pending': 'yellow',
'inactive': 'bunker',
'error': 'red'
}
return colors[status] || 'bunker'
}
}
}
</script>