Badge

1<script setup lang="ts">2import { Badge } from '@vitral/vue';3 4const severities = ['primary', 'secondary', 'success', 'info', 'warn', 'danger', 'help', 'contrast'] as const;5</script>6 7<template>8    <Badge v-for="(s, i) in severities" :key="s" :value="i + 1" :severity="s" />9</template>

1<script setup lang="ts">2import { Badge } from '@vitral/vue';3</script>4 5<template>6    <Badge value="8" size="small" />7    <Badge value="8" />8    <Badge value="8" size="large" />9    <Badge value="8" size="xlarge" />10    <Badge value="99+" severity="danger" />11    <Badge severity="success" />12    <Badge severity="danger" />13</template>

1<script setup lang="ts">2import { Button, OverlayBadge } from '@vitral/vue';3</script>4 5<template>6    <OverlayBadge value="4" severity="danger">7        <template #default="{ badgeId }">8            <Button icon="bell" severity="secondary" aria-label="Notifications" :aria-describedby="badgeId" />9        </template>10    </OverlayBadge>11    <OverlayBadge value="12">12        <template #default="{ badgeId }">13            <Button icon="menu" severity="secondary" variant="outlined" aria-label="Inbox" :aria-describedby="badgeId" />14        </template>15    </OverlayBadge>16    <OverlayBadge severity="success">17        <span class="demo-avatar" role="img" aria-label="Ana Souza, online">AS</span>18    </OverlayBadge>19</template>20 21<style scoped>22.demo-avatar {23    display: inline-flex;24    align-items: center;25    justify-content: center;26    width: 2.5rem;27    height: 2.5rem;28    border-radius: 999px;29    font-weight: 600;30    color: var(--vt-primary-contrast-color);31    background: var(--vt-primary-color);32}33</style>