ElyriTag
Tags with five semantic colours and two sizes, for statuses, categories and counts.
Installation
Add component
pnpm dlx @elyri/cli@latest add tagExamples
Basic
The default neutral tag.
New
import { Tag } from './components/elyri/Tag';
export function Example() {
return <Tag>New</Tag>;
}Variants
Five semantic colours: 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>
);
}Sizes
Two sizes: 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>
);
}Bordered
Bordered by default; turn it off for a plain tag.
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>
);
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
variant | 'neutral' | 'accent' | 'success' | 'warning' | 'danger' | 'neutral' | Semantic colour: neutral / accent / success / warning / danger |
size | 'sm' | 'md' | 'md' | Control size: sm / md |
bordered | boolean | true | Whether the border shows, defaults to true |
children | ReactNode | — | Tag content |
...rest | HTMLAttributes | — | Remaining props are forwarded to the native span |