@synerise/ds-tags
v0.10.18
Published
Tags UI Component for the Synerise Design System
Downloads
2,563
Readme
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 | - | | dashed | make border dashed | boolean | - |
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 |