The CBadgeStatus component is an organism that extends the BBadge component with predefined styling for common status values. It provides a consistent way to display status indicators across your application.
The label text to display on the badge
The status value that determines the badge style. Options: TODO, IN_PROGRESS, FINISHED, CANCELLED, OTHER
Default slot for custom content within the badge
Predefined Styles
The component comes with built-in styles for common statuses:
- Color:
accent
- Variant:
soft
- Use case: Tasks or items that haven’t been started
IN_PROGRESS
- Color:
secondary
- Variant:
soft
- Use case: Active tasks or items currently being worked on
FINISHED
- Color:
success
- Variant:
soft
- Icon:
material-symbols:check-circle-outline
- Use case: Completed tasks or items
CANCELLED
- Color:
error
- Variant:
soft
- Icon:
material-symbols:info-outline
- Use case: Cancelled or rejected items
- Color:
neutral
- Variant:
soft
- Use case: Default/fallback for undefined statuses
Basic Status Badges
<template>
<div class="flex gap-2">
<CBadgeStatus label="To Do" value="TODO" />
<CBadgeStatus label="In Progress" value="IN_PROGRESS" />
<CBadgeStatus label="Finished" value="FINISHED" />
<CBadgeStatus label="Cancelled" value="CANCELLED" />
</div>
</template>
Dynamic Status
<template>
<CBadgeStatus
:label="task.statusLabel"
:value="task.status"
/>
</template>
<script setup>
const task = ref({
statusLabel: 'In Progress',
status: 'IN_PROGRESS'
})
</script>
Task List Example
<template>
<ul class="space-y-2">
<li v-for="task in tasks" :key="task.id" class="flex items-center justify-between">
<span>{{ task.name }}</span>
<CBadgeStatus :label="task.statusText" :value="task.status" />
</li>
</ul>
</template>
<script setup>
const tasks = [
{ id: 1, name: 'Design wireframes', status: 'FINISHED', statusText: 'Done' },
{ id: 2, name: 'Develop frontend', status: 'IN_PROGRESS', statusText: 'Working' },
{ id: 3, name: 'Write tests', status: 'TODO', statusText: 'Pending' },
{ id: 4, name: 'Deploy to staging', status: 'CANCELLED', statusText: 'Cancelled' }
]
</script>
Project Status Dashboard
<template>
<div class="grid grid-cols-2 gap-4">
<div v-for="project in projects" :key="project.id" class="p-4 border rounded">
<h3 class="font-bold">{{ project.name }}</h3>
<CBadgeStatus :label="project.statusLabel" :value="project.status" />
</div>
</div>
</template>
<script setup>
const projects = [
{ id: 1, name: 'Website Redesign', status: 'IN_PROGRESS', statusLabel: 'Active' },
{ id: 2, name: 'Mobile App', status: 'TODO', statusLabel: 'Planned' },
{ id: 3, name: 'API Integration', status: 'FINISHED', statusLabel: 'Complete' }
]
</script>
Fallback to Default Style
<template>
<!-- Unknown status falls back to OTHER style -->
<CBadgeStatus label="Unknown" value="UNKNOWN_STATUS" />
</template>
Customization
If you need custom status styles, consider using the base BBadge component:
<template>
<BBadge
label="Custom Status"
value="custom"
:styles="customStyles"
/>
</template>
<script setup>
const customStyles = {
custom: {
color: 'purple',
variant: 'solid',
icon: 'i-lucide-star'
}
}
</script>
Implementation Details
The component is a thin wrapper around BBadge with predefined styles:
const styles: BadgeStyles = {
TODO: { color: 'accent', variant: 'soft' },
IN_PROGRESS: { color: 'secondary', variant: 'soft' },
FINISHED: { color: 'success', variant: 'soft', icon: 'material-symbols:check-circle-outline' },
CANCELLED: { color: 'error', variant: 'soft', icon: 'material-symbols:info-outline' },
OTHER: { color: 'neutral', variant: 'soft' }
}
const defaultStyle: DefaultStyle = styles.OTHER
/home/daytona/workspace/source/app/components/c/badge/c-badge-status.vue:59