in src/tag/tag.stories.tsx [21:73]
render() {
return (
<div style={{display: 'flex', flexDirection: 'column', gap: 8}}>
{[true, false].flatMap(outline =>
[TagType.DEFAULT, TagType.MAIN, TagType.SUCCESS, TagType.WARNING, TagType.ERROR, TagType.PURPLE].map(
type => (
<div key={`${outline}_${type}`}>
<Tag outline={outline} tagType={type} onRemove={noop}>
Simple
</Tag>
<Tag outline={outline} tagType={type} readOnly>
Read-only
</Tag>
<Tag outline={outline} tagType={type} className='limited-width' onRemove={noop}>
With long truncated text
</Tag>
<Tag
outline={outline}
tagType={type}
rgTagIcon={tagIcon}
rgTagTitle='I am an icon title'
onRemove={noop}
>
With icon title
</Tag>
<Tag outline={outline} tagType={type} avatar={avatarUrl} onRemove={noop}>
With avatar
</Tag>
<Tag
outline={outline}
tagType={type}
onRemove={noop}
render={({children, ...restProps}) => (
<a href='/' {...restProps}>
{children}
</a>
)}
>
With custom render
</Tag>
<Tag outline={outline} tagType={type} disabled readOnly>
Disabled
</Tag>
<Tag outline={outline} tagType={type} readOnly interactive={false}>
Non-interactive
</Tag>
</div>
),
),
)}
</div>
);
}