基础

Badge 状态徽记

用于状态徽记场景的 MoriUI 组件。

资源

导入

import { Badge } from 'moriui'

RTL

徽记继承外围书写方向，图标与文本顺序会随内容流自然排列。

示例

概览

用紧凑标签表达状态。

已发布草稿

<script setup lang="ts">
  import { Badge } from 'moriui'
</script>

<template>
  <div class="flex flex-wrap gap-2">
    <Badge>已发布</Badge><Badge variant="secondary">
      草稿
    </Badge>
  </div>
</template>

变体

不同变体表达信息层级。

默认次要异常描边幽灵

<script setup lang="ts">
  import { Badge } from 'moriui'
</script>

<template>
  <div class="flex flex-wrap gap-2">
    <Badge>默认</Badge><Badge variant="secondary">
      次要
    </Badge><Badge variant="destructive">
      异常
    </Badge><Badge variant="outline">
      描边
    </Badge><Badge variant="ghost">
      幽灵
    </Badge>
  </div>
</template>

带图标

图标与文字共同表达已验证状态。

已验证

<script setup lang="ts">
  import { Badge } from 'moriui'
  import { Check } from '@lucide/vue'
</script>

<template>
  <Badge><Check class="size-3" aria-hidden="true" /> 已验证</Badge>
</template>

加载状态

旋转图标提示同步仍在进行。

同步中

<script setup lang="ts">
  import { Badge } from 'moriui'
  import { LoaderCircle } from '@lucide/vue'
</script>

<template>
  <Badge variant="secondary">
    <LoaderCircle class="size-3 animate-spin" aria-hidden="true" /> 同步中
  </Badge>
</template>

链接

通过 as 渲染为语义链接。

查看版本说明

<script setup lang="ts">
  import { Badge } from 'moriui'
</script>

<template>
  <Badge as="a" href="#badge-api" variant="link">
    查看版本说明
  </Badge>
</template>

自定义颜色

调用方 class 可覆盖局部颜色。

稳定预览

<script setup lang="ts">
  import { Badge } from 'moriui'
</script>

<template>
  <div class="flex flex-wrap gap-2">
    <Badge class="bg-emerald-600 text-white">
      稳定
    </Badge><Badge class="bg-amber-500 text-black">
      预览
    </Badge>
  </div>
</template>

RTL

在 RTL 页面中保持自然的内容顺序。

تم النشر

<script setup lang="ts">
  import { Badge } from 'moriui'
</script>

<template>
  <div dir="rtl">
    <Badge>تم النشر</Badge>
  </div>
</template>

API

属性	类型	默认值	说明
Badge variant	`'default' \| 'secondary' \| 'destructive' \| 'outline' \| 'ghost' \| 'link'`	`'default'`	徽记的视觉层级。
Badge as	`string \| Component`	`'span'`	渲染元素或组件。
Badge asChild	`boolean`	`false`	将样式合并到唯一子元素。

无障碍说明

Badge 默认只是视觉标签；状态更新需要由外围区域提供 role=status 或 aria-live。仅图标徽记必须提供可访问名称，链接变体应渲染为 a。

关联组件

用户头像内容标注