Badge

绝对定位的红色徽章,固定显示在父元素右上角。

基本用法

默认

在一个定位容器内使用 Badge 展示数字角标。

3

<script setup lang="ts">
import { Badge, Icon } from '@tripo3d/design';
</script>

<template>
  <div class="relative inline-block p-2">
    <Icon icon="i-tripo:bell" class="size-6" />
    <Badge>3</Badge>
  </div>
</template>

文本角标

自定义文本

徽章内容不限于数字,可为任意短文本。

NEW

<div class="relative inline-block p-2">
  <Icon icon="i-tripo:bell" class="size-6" />
  <Badge>NEW</Badge>
</div>

API

Props

名称	类型	默认值	说明
class	string	—	额外 class,可用于覆写位置或颜色

Slots

插槽	作用域	说明
default	—	徽章内容,通常为数字或极短文本

可访问性

• 徽章通常是装饰性内容,若数字具备业务语义(如未读数),建议在父容器添加 aria-label 以说明含义
• 由于使用绝对定位,请确保父元素有 position: relative 等定位上下文