Tag
A tag labels UI objects for quick recognition and navigation.
Default
The default form of a tag, where text is required. Tags with static text can be used as a flag or as a reference to an object or attribute.
1
2
3
4
5
6
7
8
9
10
import React from 'react';
import { Tag } from '@neoKit/tag';
const TagExample = () => {
return (
<Tag> Tag </Tag>
);
};
export default TagExample;Tag link
A tag with an href can link to more information on the tagged item.
1
2
3
4
5
6
7
8
9
import React from 'react';
import { Tag } from '@neoKit/tag';
const TagLinkExample = () => {
return (
<Tag href="/home"> Tag link</Tag>
);
};
export default TagLinkExample;Removable
Once a tag has been removed, it cannot be re-rendered. Removable tags are visible in "edit" mode or in multi-select controls.
1
2
3
4
5
6
7
8
9
import React from 'react';
import { Tag } from '@neoKit/tag';
const RemovableTagExample = () => {
return (
<Tag removable> Removable tag </Tag>
);
};
export default RemovableTagExample;Removable link
A removable tag with an href can link to more information.
1
2
3
4
5
6
7
8
9
import React from 'react';
import { Tag } from '@neoKit/tag';
const removableTagLinkLnkExample = () => {
return (
<Tag removable href="/"> Removable tag </Tag>
);
};
export default removableTagLinkLnkExample;Rounded
Rounded tags with an avatar are used to add or remove people in multi-select controls.
1
2
3
4
5
6
7
8
9
10
11
12
import React from 'react';
import { Tag } from '@neoKit/tag';
import { Avatar } from '@neoKit/avatar';
const removableRoundedTagExample = () => {
return (
<Tags removable position="after" rounded >
<Avatars width={20} height={20} path={"assets/avatar.svg"} />
Removable tag link</Tags>
);
};
export default removableRoundedTagExample;Rounded link
A rounded tag with an avatar can link to more information.
1
2
3
4
5
6
7
8
9
10
11
12
import React from 'react';
import { Tag } from '@neoKit/tag';
import { Avatar } from '@neoKit/avatar';
const removableRoundedTagExample = () => {
return (
<Tags removable position="after" rounded >
<Avatars width={20} height={20} path={"assets/avatar.svg"} href="/" />
Removable tag link</Tags>
);
};
export default removableRoundedTagExample;Color
The color theme for background and text.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
import React from 'react';
import { Tag } from '@neoKit/tag';
const colorsTagLinkExample = () => {
return (
<div>
<Tags color='standard'> standard Tag</Tags>
<Tags color='green' href="/"> Green Tag</Tags>
<Tags color='teal' > Teal Tag</Tags>
<Tags color='black'> Black Tag</Tags>
</div>
);
};
export default colorsTagLinkExample;Text max length
Once the text reaches 200px, it is truncated with an ellipsis.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
import React from 'react';
import { Tag } from '@neoKit/tag';
const colorsTagLinkExample = () => {
return (
<div>
<Tags color='standard'> standard Tag</Tags>
<Tags color='green' href="/"> Green Tag</Tags>
<Tags color='teal' > Teal Tag</Tags>
<Tags color='black'> Black Tag</Tags>
</div>
);
};
export default colorsTagLinkExample;