import React from 'react'; import { Tag, Space } from '@douyinfe/semi-ui'; () => ( <div> <Space> <Tag> default tag </Tag> <Tag closable> Closable Tag </Tag> <Tag closable onClose={(value, e) => e.preventDefault()}> Closable Tag, Prevent Default </Tag> </Space> </div> );

import React from 'react'; import { Tag, Space } from '@douyinfe/semi-ui'; () => ( <Space> <Tag size="small" color='light-blue'> small tag </Tag> <Tag size="large" color='cyan'> large tag </Tag> </Space> );

import React from 'react'; import { Tag, Space } from '@douyinfe/semi-ui'; () => ( <Space> <Tag size="small" shape='circle' color='amber'> small circle tag </Tag> <Tag size="large" shape='circle' color='violet'> large circle tag </Tag> </Space> );

import React from 'react'; import { Tag, Space } from '@douyinfe/semi-ui'; import { IconGithubLogo, IconSemiLogo } from '@douyinfe/semi-icons'; () => ( <Space> <Tag color='light-blue' prefixIcon={<IconGithubLogo />} size='large' shape='circle' > Semi Design </Tag> <Tag color='cyan' size='large' shape='circle' suffixIcon={<IconSemiLogo />} > D2C: figma to code in one click</Tag> </Space> );

import React from 'react'; import { Tag, Space } from '@douyinfe/semi-ui'; () => ( <Space wrap> { ['amber', 'blue', 'cyan', 'green', 'grey', 'indigo', 'light-blue', 'light-green', 'lime', 'orange', 'pink', 'purple', 'red', 'teal', 'violet', 'yellow', 'white' ].map(item => (<Tag color={item} key={item}> {item} </Tag>)) } </Space> );

import React from 'react'; import { Tag } from '@douyinfe/semi-ui'; import { IconAIFilledLevel1, IconAIFilledLevel3 } from '@douyin/semi-icons'; () => ( <div style={{ display: 'flex', flexDirection: 'column', rowGap: 30 }}> <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gridGap: '10px', width: 'fit-content' }}> <Tag colorful prefixIcon={<IconAIFilledLevel1 size="small"/>} type="solid" shape='circle' gradient>AI</Tag> <Tag colorful prefixIcon={<IconAIFilledLevel3 size="small" />} type="light" shape='circle' gradient>AI</Tag> <Tag colorful prefixIcon={<IconAIFilledLevel3 size="small"/>} type="ghost" shape='circle' gradient >AI</Tag> <Tag colorful prefixIcon={<IconAIFilledLevel1 size="small"/>} type="solid" shape='circle' >AI</Tag> <Tag colorful prefixIcon={<IconAIFilledLevel1 size="small" />} type="light" shape='circle'>AI</Tag> <Tag colorful prefixIcon={<IconAIFilledLevel1 size="small"/>} type="ghost" shape='circle'>AI</Tag> </div> <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gridGap: '10px', width: 'fit-content' }}> <Tag colorful prefixIcon={<IconAIFilledLevel1 size="small"/>} type="solid" gradient>AI</Tag> <Tag colorful prefixIcon={<IconAIFilledLevel3 size="small" />} type="light" gradient>AI</Tag> <Tag colorful prefixIcon={<IconAIFilledLevel3 size="small"/>} type="ghost" gradient >AI</Tag> <Tag colorful prefixIcon={<IconAIFilledLevel1 size="small"/>} type="solid" >AI</Tag> <Tag colorful prefixIcon={<IconAIFilledLevel1 size="small" />} type="light" >AI</Tag> <Tag colorful prefixIcon={<IconAIFilledLevel1 size="small"/>} type="ghost" >AI</Tag> </div> </div> );

import React from 'react'; import { Tag, Space } from '@douyinfe/semi-ui'; import { IconGithubLogo, IconSemiLogo } from '@douyinfe/semi-icons'; () => ( <Space wrap> <Tag color='light-blue' prefixIcon={<IconGithubLogo />} size='large' shape='circle' type='light' > Semi Design Light Tag </Tag> <Tag color='cyan' size='large' shape='circle' suffixIcon={<IconSemiLogo />} type='light' > D2C: figma to code in one click</Tag> <Tag color='light-blue' prefixIcon={<IconGithubLogo />} size='large' shape='circle' type='ghost' > Semi Design Ghost Tag </Tag> <Tag color='cyan' size='large' shape='circle' type='ghost' suffixIcon={<IconSemiLogo />} > D2C: figma to code in one click</Tag> <Tag color='light-blue' prefixIcon={<IconGithubLogo />} size='large' shape='circle' type='solid' > Semi Design Solid Tag </Tag> <Tag color='cyan' size='large' shape='circle' type='solid' suffixIcon={<IconSemiLogo />} > D2C: figma to code in one click</Tag> </Space> );

import React from 'react'; import { Tag, Space } from '@douyinfe/semi-ui'; function Demo() { const src = 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/dy.png'; return ( <Space vertical align="start"> <Tag avatarSrc={src}>焦锐志</Tag> <Tag avatarSrc={src} size="large"> 焦锐志 </Tag> <Tag avatarSrc={src} size="large" closable={true}> 焦锐志 </Tag> <Tag avatarSrc={src} avatarShape="circle"> 焦锐志 </Tag> <Tag avatarSrc={src} avatarShape="circle" size="large"> 焦锐志 </Tag> <Tag avatarSrc={src} avatarShape="circle" size="large" closable={true}> 焦锐志 </Tag> </Space> ); }

import React, { useState } from 'react'; import { Tag, Button, RadioGroup, Radio } from '@douyinfe/semi-ui'; () => { const [visible, setVisible] = useState(false); const toggleVisible = () => { setVisible(!visible); }; return ( <div> <RadioGroup type='button' defaultValue={0} onChange={e => toggleVisible(e.target.value)}> <Radio value={1}>Show</Radio> <Radio value={0}>Hide</Radio> </RadioGroup> <div style={{ marginTop: 10 }}> <Tag visible={visible} size='large' color='light-blue'>Invisible tag </Tag> </div> </div> ); };

import React from 'react'; import { TagGroup } from '@douyinfe/semi-ui'; () => { const tagList = [ { color: 'light-blue', children: '抖音' }, { color: 'cyan', children: '火山' }, { color: 'violet', children: '剪映' }, { color: 'white', children: '醒图' }, ]; const src = 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/dy.png'; const tagList2 = [ { color: 'white', children: 'Douyin', avatarSrc: src }, { color: 'white', children: 'Hotsoon', avatarSrc: src }, { color: 'white', children: 'Capcut', avatarSrc: src }, { color: 'white', children: 'Xingtu', avatarSrc: src }, ]; const divStyle = { backgroundColor: 'var(--semi-color-fill-0)', height: 35, width: 300, display: 'flex', alignItems: 'center', padding: '0 10px', marginBottom: 30, }; const tagGroupStyle = { display: 'flex', alignItems: 'center', width: 350, }; return ( <> <div style={divStyle}> <TagGroup maxTagCount={3} style={tagGroupStyle} tagList={tagList} size="large" /> </div> <div style={divStyle}> <TagGroup maxTagCount={2} style={tagGroupStyle} tagList={tagList2} size="large" avatarShape="circle" showPopover /> </div> </> ); };

import React, { useState } from 'react'; import { TagGroup } from '@douyinfe/semi-ui'; () => { const defaultList = [ { tagKey: '1', color: 'light-blue', children: '抖音', closable: true, }, { tagKey: '3', color: 'cyan', children: '剪映', closable: true, }, { tagKey: '2', color: 'violet', children: '醒图', closable: true, }, { tagKey: '4', color: 'teal', children: '轻颜相机', closable: true, }, { tagKey: '5', color: 'white', children: '飞书', closable: true, }, ]; const [tagList, setTagList] = useState(defaultList); const tagListClick = (value, e, tagKey) => { const newTagList = [...tagList]; const closeTagIndex = newTagList.findIndex(t => t.tagKey === tagKey); newTagList.splice(closeTagIndex, 1); setTagList(newTagList); }; return ( <div style={ { backgroundColor: 'var(--semi-color-fill-0)', height: 35, width: 300, display: 'flex', alignItems: 'center', padding: '0 10px', marginBottom: 30, }}> <TagGroup maxTagCount={3} showPopover style={ { display: 'flex', alignItems: 'center', width: 350, }} tagList={tagList} size='large' onTagClose={tagListClick} /> </div> ); };