import { MtBadge } from '@/components/feedback-indicator/mt-badge/mt-badge.vue';
The visual style variant of the badge.Options: neutral, info, attention, critical, positive
Optional icon name to display inside the badge. Uses the icon component system.
The size of the badge.Options: s, m, l
When enabled, displays a colored dot indicator inside the badge for status visualization.
The main content area for badge text or custom content.
Usage Examples
Basic Badge
<template>
<mt-badge>Default</mt-badge>
<mt-badge variant="info">Info</mt-badge>
<mt-badge variant="positive">Success</mt-badge>
<mt-badge variant="attention">Warning</mt-badge>
<mt-badge variant="critical">Error</mt-badge>
</template>
Badge with Icon
<template>
<mt-badge variant="info" icon="solid-info-circle">
Information
</mt-badge>
<mt-badge variant="positive" icon="solid-check-circle">
Completed
</mt-badge>
</template>
Badge with Status Indicator
<template>
<mt-badge variant="positive" :status-indicator="true">
Active
</mt-badge>
<mt-badge variant="critical" :status-indicator="true">
Offline
</mt-badge>
</template>
Different Sizes
<template>
<mt-badge size="s">Small</mt-badge>
<mt-badge size="m">Medium</mt-badge>
<mt-badge size="l">Large</mt-badge>
</template>
Count Badge
<template>
<mt-badge variant="critical" size="s">99+</mt-badge>
<mt-badge variant="info" size="m">12</mt-badge>
</template>