@synerise/ds-tags NPM

id: tags

title: Tags

Tags UI Component

Demo

Tag API

Property	Description	Type	Default
className	tag container class	string	-
color	primary color (background/border) of tag	string	-
disabled	whether tag should be disabled	boolean	-
id	id of tag (necessary if using Tags)	string / number	-
name	title of tag	string	-
onClick	onClick event on tag body	() => void	-
onRemove	callback when tag is removed	(tagKey: string / number) => void	-
removable	show remove button	boolean	-
shape	shape of the tag	TagShape	TagShape.DEFAULT_ROUND
textColor	color of tag name label	string	-

Tags API (Group of )

Property	Description	Type	Default
addable	Allow adding tags from `data` (which are not present in `selected`)	boolean	-
className	Tag Group container class	string	-
creatable	Allow creating new tags	boolean	-
data	All available tags	Tag[]	[]
disabled	Disable entire group (all tags)	boolean	-
manageLink	optional link visible in add tag dropdown	string	-
onCreate	fired whenever a new tag has been created	(tagName: string) => void	-
onSelectedChange	fired whenever the list of selected tags changes	(tags: Tag[], actionTaken: ActionTaken) => void	-
removable	Allow removing tags from `selected`	boolean	-
style	Tag Group container styles	React.CSSProperties	-
selected	Selected tags	Tag[]	[]
tagShape	Shape of tags	TagShape	-
texts	necessary texts to render tags group	TagsTexts	{}

ActionTaken

Property	Description	Type
tag	Affected tag	Tag
type	Type of action taken that caused onSelectedChange to be called	'ADD' / 'REMOVE'

TagsTexts

Property	Description	Type	Default
addButtonLabel	Label for add tag button	string / React.ReactNode
clearTooltip	Tooltip text displayed on search clear icon hover	string / React.ReactNode
deleteTooltip	Tooltip text displayed on remove icon hover	string / React.ReactNode	`Delete`
searchPlaceholder	Search input placeholder for add tag dropdown	string
manageLinkLabel	Label for manage link for add tag dropdown	string / React.ReactNode
createTagButtonLabel	Label for create tag button for add tag dropdown	string / React.ReactNode
noResultsLabel	Label displayed when filtering tags returns an empty array	string / React.ReactNode	`No results`
dropdownNoTags	Text for a label displayed when no tags are found to be added	string / React.ReactNode

TagShape Enum

Property
TagShape.SINGLE_CHARACTER_ROUND
TagShape.SINGLE_CHARACTER_SQUARE
TagShape.DEFAULT_ROUND
TagShape.DEFAULT_SQUARE
TagShape.SMALL_ROUND
TagShape.SMALL_SQUARE
TagShape.STATUS_NEUTRAL
TagShape.STATUS_SUCCESS
TagShape.STATUS_ERROR
TagShape.STATUS_WARNING

@synerise/ds-button @synerise/ds-dropdown @synerise/ds-icon @synerise/ds-result @synerise/ds-scrollbar @synerise/ds-search-bar @synerise/ds-tooltip

@infinitebrahmanuniverse/nolb-_syn @everything-registry/sub-chunk-890 @synerise/ds-manageable-list @synerise/ds-status @synerise/ds-table @synerise/ds-date-range-picker @synerise/ds-card @synerise/ds-color-picker @zalastax/nolb-_syn

1 day ago

1 day ago

10 days ago

25 days ago

1 month ago

1 month ago

1 month ago

2 months ago

2 months ago

2 months ago

3 months ago

3 months ago

3 months ago

3 months ago

4 months ago

4 months ago

4 months ago

5 months ago

5 months ago

5 months ago

8 months ago

9 months ago

10 months ago

10 months ago

9 months ago

9 months ago

10 months ago

10 months ago

10 months ago

6 months ago

6 months ago

6 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

11 months ago

11 months ago

12 months ago

12 months ago

12 months ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago