徽标
查看源代码一般出现在图标或文字的右上角。提供及时、重要的信息提示。
导入
import { Badge } from "@resolid/react-ui";用法
徽标
颜色
外观
徽标有四种不同的外观可供使用。通过传递 variant 属性，可以选择使用 solid、outline、subtle 和 soft 中的任意一种。
徽标有六种不同的颜色可供使用。通过传递 color 属性，可以选择使用 primary、secondary、success、warning、danger 和 neutral 这些颜色。
import { Badge } from "@resolid/react-ui";
export default function App() {
return (
<div className={"flex flex-col gap-3"}>
{["primary", "secondary", "success", "warning", "danger", "neutral"].map((color) => (
<div key={color} className={"flex flex-row items-center gap-3"}>
{["solid", "outline", "subtle", "soft"].map((variant) => (
<Badge key={`${color}-${variant}`} color={color} variant={variant}>
徽标
</Badge>
))}
</div>
))}
</div>
);
}属性
| 属性 | 类型 | 默认值 | 必须 | |
|---|---|---|---|---|
| 属性variant | 简介 外观 | 类型"solid" | "outline" | "subtle" | "soft" | 默认值"solid" | 必须false |
| 属性color | 简介 颜色 | 类型"primary" | "secondary" | "neutral" | "success" | "warning" | "danger" | 默认值"primary" | 必须false |