Badge - 徽标

Demo

Last Changed

7 minutes ago

badge/demo.vue

缤纷 New 已发布 Beta 已下线 提示

<template>
  <div class="flex flex-wrap items-center gap-3">
    <YlfBadge variant="aurora">
      缤纷
    </YlfBadge>
    <YlfBadge variant="brand">
      New
    </YlfBadge>
    <YlfBadge variant="success">
      已发布
    </YlfBadge>
    <YlfBadge variant="warning">
      Beta
    </YlfBadge>
    <YlfBadge variant="danger">
      已下线
    </YlfBadge>
    <YlfBadge variant="info">
      提示
    </YlfBadge>
  </div>
</template>

缤纷徽标：极光填充或柔色语义，用于标记状态、版本与强调。

Props

属性	说明	类型	默认值
variant	风格	aurora | brand | success | warning | danger | info	brand
round	胶囊圆角	boolean	true

Slots

名称	说明
default	徽标内容