ElyriTag
标签：五种语义配色、两档尺寸，用于状态、分类与计数。
安装
添加组件
pnpm dlx @elyri/cli@latest add tag示例
基础用法
默认的 neutral 标签。
New
import { Tag } from './components/elyri/Tag';
export function Example() {
return <Tag>New</Tag>;
}全部变体
五种语义配色：neutral / accent / success / warning / danger。
NeutralAccentSuccessWarningDanger
import { Tag } from './components/elyri/Tag';
export function Example() {
return (
<div className="demo-ui-row">
<Tag variant="neutral">Neutral</Tag>
<Tag variant="accent">Accent</Tag>
<Tag variant="success">Success</Tag>
<Tag variant="warning">Warning</Tag>
<Tag variant="danger">Danger</Tag>
</div>
);
}尺寸
两档尺寸：sm / md。
SmallMedium
import { Tag } from './components/elyri/Tag';
export function Example() {
return (
<div className="demo-ui-row">
<Tag size="sm">Small</Tag>
<Tag size="md">Medium</Tag>
</div>
);
}描边
默认带边框，可关闭得到无边框样式。
BorderedPlain
import { Tag } from './components/elyri/Tag';
export function Example() {
return (
<div className="demo-ui-row">
<Tag bordered>Bordered</Tag>
<Tag bordered={false}>Plain</Tag>
</div>
);
}属性
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
variant | 'neutral' | 'accent' | 'success' | 'warning' | 'danger' | 'neutral' | 语义配色：neutral / accent / success / warning / danger |
size | 'sm' | 'md' | 'md' | 控件尺寸：sm / md |
bordered | boolean | true | 是否显示边框，默认 true |
children | ReactNode | — | 标签内容 |
...rest | HTMLAttributes | — | 其余属性透传给原生 span |