徽标

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

演示

徽标

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

export default function App() {
  return <Badge>徽标</Badge>;
}

用法

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() {
  const colors = ["primary", "secondary", "success", "warning", "danger", "neutral"];
  const variants = ["solid", "outline", "subtle", "soft"];

  return (
    <div className={"flex flex-col gap-3"}>
      {colors.map((color) => (
        <div key={color} className={"flex flex-row items-center gap-3"}>
          {variants.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

建议更改此页面