Tags View Source



The Tag component is used to categorize items.



Imports



Import React and the AvatarGroup Component.

1
import * as React from "react";
2
import { Tag } from "slate-react-system";


Usage



Create an array of tags.

1
const tags = [
2
"nature",
3
"scenes",
4
"water",
5
"earth",
6
"fire",
7
"mauritania",
8
"sahara"
9
];


Declare the Tag component and add the array of tags as a prop to the component.

1
<Tag placeholder="Add your tags" tags={tags} />


Output



  • nature
  • scenes
  • water
  • earth
  • fire
  • mauritania
  • sahara



The Tag component also has a suggestions prop which accepts an array of strings.

1
const tags = [
2
"nature",
3
"scenes",
4
"water",
5
"earth",
6
"fire",
7
"mauritania",
8
"sahara"
9
];
10
11
const suggestions = [
12
"nature",
13
"africa",
14
"scenes",
15
"water",
16
"mountains",
17
"mauritania",
18
"sahara"
19
]


Declare the Tag component and add the array of tags and suggestions as a props to the component.

1
<Tag
2
tags={tags}
3
suggestions={suggestions}
4
/>


Output



  • nature
  • scenes
  • water
  • earth
  • fire
  • mauritania
  • sahara



Accepted React Properties



AvatarGroup
NameTypeDefaultDescription
type
string
null
If set to "dark", the dark theme of the component will used
placeholder
string
null
Placeholder text
tags
array
[]
An array of strings of added tags to display
suggestions
array
[]
An array of strings to provide suggestions to the user
onChange
function
null
Function called on the onChange event
handleClick
function
null
Function called on the tag onClick event
style
object
null
An object of styles for the tag component container
inputStyles
object
null
An object of styles for the input element
dropdownStyles
object
null
An object of styles for the suggestions dropdown component container


Components
Avatar GroupButtonsCard Tabs3D CardCheckboxesColorsDropdownsHover TileIconsInputsList EditorLoadersNotificationsRadiosSlidersStatsTablesTabsTagsTogglesTooltipsTypography
View source