徽标

一般出现在图标或文字的右上角。提供及时、重要的信息提示。

导入

import { Badge } from "@resolid/react-ui";

用法

徽标

外观

颜色

外观

徽标有四种不同的外观可供使用。通过传递 variant 属性，可以选择使用 solid、outline、soft、subtle 中的任意一种。

SolidOutlineSoftSubtle

<Badge>Solid</Badge>
<Badge variant={'outline'}>Outline</Badge>
<Badge variant={'soft'}>Soft</Badge>
<Badge variant={'subtle'}>Ghost</Badge>

颜色

通过传递 color 属性来更改徽标的颜色。徽标支持 primary、success、warning、danger 和 neutral 这些颜色。

PrimarySuccessWarningDangerNeutral

<Badge>Primary</Badge>
<Badge color={'success'}>Success</Badge>
<Badge color={'warning'}>Warning</Badge>
<Badge color={'danger'}>Danger</Badge>
<Badge color={'neutral'}>Neutral</Badge>

属性

属性	类型	默认值	必须
属性color	类型"primary" \| "neutral" \| "success" \| "warning" \| "danger"	默认值'primary'	必须false
属性variant	类型"solid" \| "outline" \| "soft" \| "subtle"	默认值'solid'	必须false
属性asChild	类型boolean	默认值false	必须false