@rio-cloud/uikit-mcp 1.0.0

package/data/pages/Components/components/tagmanager.json

@@ -0,0 +1,86 @@
+{
+  "metadata": {
+    "captured_at": "2025-11-21T12:08:00.090Z",
+    "source": "https://uikit.developers.rio.cloud/#components/tagManager",
+    "category": "Components",
+    "section": "Misc",
+    "slug": "components/tagmanager",
+    "version": "v1.13.2",
+    "hash_algorithm": "sha256",
+    "hash": "6201b6eaaa4ab814e2b6baf407202f1fee2d6ea9449165d1fc73b95c50e56cf9"
+  },
+  "title": "TagManager",
+  "lead": "The TagManager allows to select and filter for existing tags as well as adding and removing them from a list of tags.",
+  "content": [
+    {
+      "heading": "TagManager",
+      "body": "Without adding custom tag option\n\nIn Combination with state component",
+      "examples": [
+        {
+          "caption": "Example 1",
+          "rendered_html": "<div class=\"playground-content  bg-white padding-20 padding-bottom-25\" style=\"width: 100%;\"><div class=\"row\"><div class=\"col-ls-6 col-lg-4\"><div class=\"TagManager\"><div class=\"AutoSuggest dropdown margin-bottom-10\"><div class=\"ClearableInput input-group\"><input placeholder=\"Search fleet group or create new\" class=\"form-control\" autocomplete=\"off\" type=\"text\" tabindex=\"1\" value=\"\"><span class=\"clearButton hide\"><span class=\"clearButtonIcon rioglyph rioglyph-remove-sign\"></span></span></div><ul role=\"menu\" class=\"dropdown-menu\"><li role=\"presentation\" class=\"disabled\" data-item-index=\"0\"><a role=\"menuitem\"><span class=\"display-flex align-items-center padding-top-5 padding-bottom-5 text-color-gray\"><span class=\"margin-left--5 margin-right-5 margin-top--1 rioglyph rioglyph-arrow-up\"></span><span class=\"text-italic\">Type in new fleet group name above</span></span></a></li><li class=\"dropdown-header center \"><span class=\"dropdown-header-text\">Choose existing fleet group</span></li><li role=\"presentation\" class=\"\" data-item-index=\"2\"><a role=\"menuitem\">Lorem</a></li><li role=\"presentation\" class=\"\" data-item-index=\"3\"><a role=\"menuitem\">Ipsum</a></li><li role=\"presentation\" class=\"\" data-item-index=\"4\"><a role=\"menuitem\">Dolor sit amet</a></li><li role=\"presentation\" class=\"\" data-item-index=\"5\"><a role=\"menuitem\">Connectivity Test</a></li></ul></div><div class=\"taglist taglist-autowidth taglist-vertical\"><div class=\"tag deletable clickable rioglyph rioglyph-remove rounded\"><div class=\"tag-inner\">Foo</div></div><div class=\"tag deletable clickable rioglyph rioglyph-remove rounded\"><div class=\"tag-inner\">Bar</div></div></div></div><button type=\"button\" class=\"btn btn-default btn-component margin-top-15 disabled\" tabindex=\"0\">Save</button></div></div></div>",
+          "tabs": [
+            {
+              "label": "React",
+              "language": "tsx",
+              "code": "import React, { useState } from 'react';\nimport isEmpty from 'lodash/fp/isEmpty';\n\nimport TagManager from '@rio-cloud/rio-uikit/TagManager';\nimport Button from '@rio-cloud/rio-uikit/Button';\nimport type { TagManagerTag } from '@rio-cloud/rio-uikit';\n\nconst tagListSuggestions: TagManagerTag[] = [\n    { label: 'Lorem' },\n    { label: 'Ipsum' },\n    { label: 'Dolor sit amet' },\n    { label: 'Connectivity Test' },\n];\n\nconst existingTags: TagManagerTag[] = [{ label: 'Foo' }, { label: 'Bar' }];\n\nexport default () => {\n    const [tagList, setTagList] = useState(existingTags);\n    const [unsavedTags, setUnsavedTags] = useState([] as TagManagerTag[]);\n\n    const handleTagListChange = (tags: TagManagerTag[]) => setUnsavedTags(tags);\n\n    const handleSave = () => {\n        const updatedTagList = unsavedTags\n            .filter(tag => !tag.toRemove)\n            .map(tag => {\n                delete tag.toAdd;\n                return tag;\n            });\n\n        setTagList(updatedTagList);\n        setUnsavedTags([]);\n    };\n\n    return (\n        <div className='row'>\n            <div className='col-ls-6 col-lg-4'>\n                <TagManager\n                    tagList={tagList}\n                    onTagListChange={handleTagListChange}\n                    tagSuggestions={tagListSuggestions}\n                    placeholder='Search fleet group or create new'\n                    customTagPlaceholder='Type in new fleet group name above'\n                    dropdownSeparatorText='Choose existing fleet group'\n                />\n                <Button className={`margin-top-15 ${isEmpty(unsavedTags) ? 'disabled' : ''}`} onClick={handleSave}>\n                    Save\n                </Button>\n            </div>\n        </div>\n    );\n};"
+            },
+            {
+              "label": "HTML",
+              "language": "html",
+              "code": "<div class=\"row\">\n    <div class=\"col-ls-6 col-lg-4\">\n        <div class=\"TagManager\">\n            <div class=\"AutoSuggest dropdown margin-bottom-10\">\n                <div class=\"ClearableInput input-group\">\n                    <input placeholder=\"Search fleet group or create new\" class=\"form-control\" autocomplete=\"off\" type=\"text\" tabindex=\"1\" value=\"\">\n                    <span class=\"clearButton hide\">\n                        <span class=\"clearButtonIcon rioglyph rioglyph-remove-sign\">\n                        </span>\n                    </span>\n                </div>\n                <ul role=\"menu\" class=\"dropdown-menu\">\n                    <li role=\"presentation\" class=\"disabled\" data-item-index=\"0\">\n                        <a role=\"menuitem\">\n                            <span class=\"display-flex align-items-center padding-top-5 padding-bottom-5 text-color-gray\">\n                                <span class=\"margin-left--5 margin-right-5 margin-top--1 rioglyph rioglyph-arrow-up\">\n                                </span>\n                                <span class=\"text-italic\">Type in new fleet group name above</span>\n                            </span>\n                        </a>\n                    </li>\n                    <li class=\"dropdown-header center \">\n                        <span class=\"dropdown-header-text\">Choose existing fleet group</span>\n                    </li>\n                    <li role=\"presentation\" class=\"\" data-item-index=\"2\">\n                        <a role=\"menuitem\">Lorem</a>\n                    </li>\n                    <li role=\"presentation\" class=\"\" data-item-index=\"3\">\n                        <a role=\"menuitem\">Ipsum</a>\n                    </li>\n                    <li role=\"presentation\" class=\"\" data-item-index=\"4\">\n                        <a role=\"menuitem\">Dolor sit amet</a>\n                    </li>\n                    <li role=\"presentation\" class=\"\" data-item-index=\"5\">\n                        <a role=\"menuitem\">Connectivity Test</a>\n                    </li>\n                </ul>\n            </div>\n            <div class=\"taglist taglist-autowidth taglist-vertical\">\n                <div class=\"tag deletable clickable rioglyph rioglyph-remove rounded\">\n                    <div class=\"tag-inner\">Foo</div>\n                </div>\n                <div class=\"tag deletable clickable rioglyph rioglyph-remove rounded\">\n                    <div class=\"tag-inner\">Bar</div>\n                </div>\n            </div>\n        </div>\n        <button type=\"button\" class=\"btn btn-default btn-component margin-top-15 disabled\" tabindex=\"0\">Save</button>\n    </div>\n</div>"
+            },
+            {
+              "label": "Props",
+              "language": "json",
+              "code": "[\n        {\n            label: 'Foo',\n        },\n        {\n            label: 'Bar',\n            toAdd: true,\n        },\n        {\n            label: 'Lorem ipsum',\n            toRemove: true,\n        }\n    ]"
+            }
+          ]
+        },
+        {
+          "caption": "Example 2",
+          "rendered_html": "<div class=\"playground-content  bg-white padding-20 padding-bottom-25\" style=\"width: 100%;\"><div class=\"row\"><div class=\"col-ls-6 col-lg-4\"><div class=\"TagManager\"><div class=\"AutoSuggest dropdown dropup\"><div class=\"ClearableInput input-group\"><input placeholder=\"Search fleet group\" class=\"form-control\" autocomplete=\"off\" type=\"text\" tabindex=\"1\" value=\"\"><span class=\"clearButton hide\"><span class=\"clearButtonIcon rioglyph rioglyph-remove-sign\"></span></span></div><ul role=\"menu\" class=\"dropdown-menu\"><li role=\"presentation\" class=\"\" data-item-index=\"0\"><a role=\"menuitem\">Lorem</a></li><li role=\"presentation\" class=\"\" data-item-index=\"1\"><a role=\"menuitem\">Ipsum</a></li><li role=\"presentation\" class=\"\" data-item-index=\"2\"><a role=\"menuitem\">Dolor sit amet</a></li></ul></div><div class=\"taglist taglist-autowidth taglist-vertical\"></div></div><button type=\"button\" class=\"btn btn-default btn-component margin-top-15 disabled\" tabindex=\"0\">Save</button></div></div></div>",
+          "tabs": [
+            {
+              "label": "React",
+              "language": "tsx",
+              "code": "import React, { useState } from 'react';\nimport isEmpty from 'lodash/fp/isEmpty';\n\nimport TagManager from '@rio-cloud/rio-uikit/TagManager';\nimport Button from '@rio-cloud/rio-uikit/Button';\nimport type { TagManagerTag } from '@rio-cloud/rio-uikit';\n\nconst tagListSuggestions: TagManagerTag[] = [{ label: 'Lorem' }, { label: 'Ipsum' }, { label: 'Dolor sit amet' }];\nconst existingTags: TagManagerTag[] = [];\n\nexport default () => {\n    const [tagList, setTagList] = useState(existingTags);\n    const [unsavedTags, setUnsavedTags] = useState([] as TagManagerTag[]);\n\n    const handleTagListChange = (tags: TagManagerTag[]) => setUnsavedTags(tags);\n\n    const handleSave = () => {\n        const updatedTagList = unsavedTags\n            .filter(tag => !tag.toRemove)\n            .map(tag => {\n                delete tag.toAdd;\n                return tag;\n            });\n\n        setTagList(updatedTagList);\n        setUnsavedTags([]);\n    };\n\n    return (\n        <div className='row'>\n            <div className='col-ls-6 col-lg-4'>\n                <TagManager\n                    tagList={tagList}\n                    onTagListChange={handleTagListChange}\n                    tagSuggestions={tagListSuggestions}\n                    placeholder='Search fleet group'\n                    dropdownSeparatorText='Choose existing fleet group'\n                    noItemMessage='No group found with this name.'\n                    useCustomTags={false}\n                />\n                <Button className={`margin-top-15 ${isEmpty(unsavedTags) ? 'disabled' : ''}`} onClick={handleSave}>\n                    Save\n                </Button>\n            </div>\n        </div>\n    );\n};"
+            },
+            {
+              "label": "HTML",
+              "language": "html",
+              "code": "<div class=\"row\">\n    <div class=\"col-ls-6 col-lg-4\">\n        <div class=\"TagManager\">\n            <div class=\"AutoSuggest dropdown dropup\">\n                <div class=\"ClearableInput input-group\">\n                    <input placeholder=\"Search fleet group\" class=\"form-control\" autocomplete=\"off\" type=\"text\" tabindex=\"1\" value=\"\">\n                    <span class=\"clearButton hide\">\n                        <span class=\"clearButtonIcon rioglyph rioglyph-remove-sign\">\n                        </span>\n                    </span>\n                </div>\n                <ul role=\"menu\" class=\"dropdown-menu\">\n                    <li role=\"presentation\" class=\"\" data-item-index=\"0\">\n                        <a role=\"menuitem\">Lorem</a>\n                    </li>\n                    <li role=\"presentation\" class=\"\" data-item-index=\"1\">\n                        <a role=\"menuitem\">Ipsum</a>\n                    </li>\n                    <li role=\"presentation\" class=\"\" data-item-index=\"2\">\n                        <a role=\"menuitem\">Dolor sit amet</a>\n                    </li>\n                </ul>\n            </div>\n            <div class=\"taglist taglist-autowidth taglist-vertical\">\n            </div>\n        </div>\n        <button type=\"button\" class=\"btn btn-default btn-component margin-top-15 disabled\" tabindex=\"0\">Save</button>\n    </div>\n</div>"
+            },
+            {
+              "label": "Props",
+              "language": "json",
+              "code": "[\n        {\n            label: 'Foo',\n        },\n        {\n            label: 'Bar',\n            toAdd: true,\n        },\n        {\n            label: 'Lorem ipsum',\n            toRemove: true,\n        }\n    ]"
+            }
+          ]
+        },
+        {
+          "caption": "Fleet groups",
+          "rendered_html": "<div class=\"playground-content  bg-white padding-20 padding-bottom-25\" style=\"width: 100%;\"><div class=\"max-width-300\"><div class=\"display-flex justify-content-center max-width-100pct\"><div class=\"margin-0 width-100pct max-width-600 panel-default panel padding-10 margin-bottom-15\"><div class=\"display-flex flex-column align-items-center text-center padding-15\"><div class=\"text-size-16 margin-bottom-10\"><span class=\"rioglyph rioglyph-group text-color-light text-size-300pct\"></span></div><div class=\"text-size-h4 line-height-125rel text-color-dark text-medium width-500 max-width-100pct text-wrap-balance\">Fleet groups</div><div class=\"text-color-dark margin-top-15 width-500 max-width-100pct text-wrap-balance\"><div><div class=\"margin-bottom-20\">Select an already created fleet group or create a new one and save it immediately.</div><div class=\"TagManager\"><div class=\"AutoSuggest dropdown dropup margin-bottom-10\"><div class=\"ClearableInput input-group\"><input placeholder=\"Search fleet group or create new\" class=\"form-control\" autocomplete=\"off\" type=\"text\" tabindex=\"1\" value=\"\"><span class=\"clearButton hide\"><span class=\"clearButtonIcon rioglyph rioglyph-remove-sign\"></span></span></div><ul role=\"menu\" class=\"dropdown-menu\"><li role=\"presentation\" class=\"disabled\" data-item-index=\"0\"><a role=\"menuitem\"><span class=\"display-flex align-items-center padding-top-5 padding-bottom-5 text-color-gray\"><span class=\"margin-left--5 margin-right-5 margin-top--1 rioglyph rioglyph-arrow-up\"></span><span class=\"text-italic\">Type in new fleet group name above</span></span></a></li><li class=\"dropdown-header center \"><span class=\"dropdown-header-text\">Choose existing fleet group</span></li><li role=\"presentation\" class=\"\" data-item-index=\"2\"><a role=\"menuitem\">Lorem</a></li><li role=\"presentation\" class=\"\" data-item-index=\"3\"><a role=\"menuitem\">Ipsum</a></li><li role=\"presentation\" class=\"\" data-item-index=\"4\"><a role=\"menuitem\">Dolor sit amet</a></li></ul></div><div class=\"taglist taglist-autowidth taglist-vertical\"><div class=\"tag deletable clickable rioglyph rioglyph-remove rounded\"><div class=\"tag-inner\">Foo</div></div><div class=\"tag deletable clickable rioglyph rioglyph-remove rounded\"><div class=\"tag-inner\">Bar</div></div></div></div></div></div></div></div></div><button type=\"button\" class=\"btn btn-default btn-component margin-top-15 disabled\" tabindex=\"0\">Save</button></div></div>",
+          "tabs": [
+            {
+              "label": "React",
+              "language": "tsx",
+              "code": "import { useState } from 'react';\nimport isEmpty from 'lodash/fp/isEmpty';\n\nimport TagManager from '@rio-cloud/rio-uikit/TagManager';\nimport CustomState from '@rio-cloud/rio-uikit/CustomState';\nimport Button from '@rio-cloud/rio-uikit/Button';\nimport type { TagManagerTag } from '@rio-cloud/rio-uikit';\n\nconst tagListSuggestions: TagManagerTag[] = [{ label: 'Lorem' }, { label: 'Ipsum' }, { label: 'Dolor sit amet' }];\nconst existingTags: TagManagerTag[] = [{ label: 'Foo' }, { label: 'Bar' }];\n\nexport default () => {\n    const [tagList, setTagList] = useState(existingTags);\n    const [unsavedTags, setUnsavedTags] = useState([] as TagManagerTag[]);\n\n    const handleTagListChange = (tags: TagManagerTag[]) => setUnsavedTags(tags);\n\n    const handleSave = () => {\n        const updatedTagList = unsavedTags\n            .filter(tag => !tag.toRemove)\n            .map(tag => {\n                delete tag.toAdd;\n                return tag;\n            });\n\n        setTagList(updatedTagList);\n        setUnsavedTags([]);\n    };\n\n    return (\n        <div className='max-width-300'>\n            <CustomState\n                headline='Fleet groups'\n                message={\n                    <div>\n                        <div className='margin-bottom-20'>\n                            Select an already created fleet group or create a new one and save it immediately.\n                        </div>\n                        <TagManager\n                            tagList={tagList}\n                            onTagListChange={handleTagListChange}\n                            tagSuggestions={tagListSuggestions}\n                            placeholder='Search fleet group or create new'\n                            customTagPlaceholder='Type in new fleet group name above'\n                            dropdownSeparatorText='Choose existing fleet group'\n                            noItemMessage='No group found with this name.'\n                        />\n                    </div>\n                }\n                icon='rioglyph-group'\n                outerClassName='margin-bottom-15'\n                condensed\n            />\n            <Button className={`margin-top-15 ${isEmpty(unsavedTags) ? 'disabled' : ''}`} onClick={handleSave}>\n                Save\n            </Button>\n        </div>\n    );\n};"
+            },
+            {
+              "label": "HTML",
+              "language": "html",
+              "code": "<div class=\"max-width-300\">\n    <div class=\"display-flex justify-content-center max-width-100pct\">\n        <div class=\"margin-0 width-100pct max-width-600 panel-default panel padding-10 margin-bottom-15\">\n            <div class=\"display-flex flex-column align-items-center text-center padding-15\">\n                <div class=\"text-size-16 margin-bottom-10\">\n                    <span class=\"rioglyph rioglyph-group text-color-light text-size-300pct\">\n                    </span>\n                </div>\n                <div class=\"text-size-h4 line-height-125rel text-color-dark text-medium width-500 max-width-100pct text-wrap-balance\">Fleet groups</div>\n                <div class=\"text-color-dark margin-top-15 width-500 max-width-100pct text-wrap-balance\">\n                    <div>\n                        <div class=\"margin-bottom-20\">Select an already created fleet group or create a new one and save it immediately.</div>\n                        <div class=\"TagManager\">\n                            <div class=\"AutoSuggest dropdown dropup margin-bottom-10\">\n                                <div class=\"ClearableInput input-group\">\n                                    <input placeholder=\"Search fleet group or create new\" class=\"form-control\" autocomplete=\"off\" type=\"text\" tabindex=\"1\" value=\"\">\n                                    <span class=\"clearButton hide\">\n                                        <span class=\"clearButtonIcon rioglyph rioglyph-remove-sign\">\n                                        </span>\n                                    </span>\n                                </div>\n                                <ul role=\"menu\" class=\"dropdown-menu\">\n                                    <li role=\"presentation\" class=\"disabled\" data-item-index=\"0\">\n                                        <a role=\"menuitem\">\n                                            <span class=\"display-flex align-items-center padding-top-5 padding-bottom-5 text-color-gray\">\n                                                <span class=\"margin-left--5 margin-right-5 margin-top--1 rioglyph rioglyph-arrow-up\">\n                                                </span>\n                                                <span class=\"text-italic\">Type in new fleet group name above</span>\n                                            </span>\n                                        </a>\n                                    </li>\n                                    <li class=\"dropdown-header center \">\n                                        <span class=\"dropdown-header-text\">Choose existing fleet group</span>\n                                    </li>\n                                    <li role=\"presentation\" class=\"\" data-item-index=\"2\">\n                                        <a role=\"menuitem\">Lorem</a>\n                                    </li>\n                                    <li role=\"presentation\" class=\"\" data-item-index=\"3\">\n                                        <a role=\"menuitem\">Ipsum</a>\n                                    </li>\n                                    <li role=\"presentation\" class=\"\" data-item-index=\"4\">\n                                        <a role=\"menuitem\">Dolor sit amet</a>\n                                    </li>\n                                </ul>\n                            </div>\n                            <div class=\"taglist taglist-autowidth taglist-vertical\">\n                                <div class=\"tag deletable clickable rioglyph rioglyph-remove rounded\">\n                                    <div class=\"tag-inner\">Foo</div>\n                                </div>\n                                <div class=\"tag deletable clickable rioglyph rioglyph-remove rounded\">\n                                    <div class=\"tag-inner\">Bar</div>\n                                </div>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n        </div>\n    </div>\n    <button type=\"button\" class=\"btn btn-default btn-component margin-top-15 disabled\" tabindex=\"0\">Save</button>\n</div>"
+            },
+            {
+              "label": "Props",
+              "language": "json",
+              "code": "[\n        {\n            label: 'Foo',\n        },\n        {\n            label: 'Bar',\n            toAdd: true,\n        },\n        {\n            label: 'Lorem ipsum',\n            toRemove: true,\n        }\n    ]"
+            }
+          ]
+        }
+      ]
+    }
+  ],
+  "see_also": []
+}

package/data/pages/Components/components/tags.json

@@ -0,0 +1,146 @@
+{
+  "metadata": {
+    "captured_at": "2025-11-21T12:07:59.792Z",
+    "source": "https://uikit.developers.rio.cloud/#components/tags",
+    "category": "Components",
+    "section": "Misc",
+    "slug": "components/tags",
+    "version": "v1.13.2",
+    "hash_algorithm": "sha256",
+    "hash": "67ce653ea8079ef19cd8a61068cd3d83b314411c7e3c406483db6efaf03ca4c7"
+  },
+  "title": "Tag",
+  "lead": null,
+  "content": [
+    {
+      "heading": "Tag",
+      "body": "",
+      "examples": [
+        {
+          "caption": "Example 1",
+          "rendered_html": "<div class=\"playground-content  bg-white padding-20 padding-bottom-25\" style=\"width: 100%;\"><div><div>Tags</div><div class=\"taglist taglist-autowidth margin-top-10\"><div class=\"tag\"><div class=\"tag-inner\"><a href=\"#\">Link</a></div></div><div class=\"tag\"><div class=\"tag-inner\">Text</div></div><div class=\"tag rioglyph rioglyph-truck\"><div class=\"tag-inner\">Icon</div></div><div class=\"tag clickable\"><div class=\"tag-inner\">Clickable</div></div><div class=\"tag revertable clickable rioglyph rioglyph-revert\"><div class=\"tag-inner\">Revertable</div></div><div class=\"tag active clickable rioglyph rioglyph-ok\"><div class=\"tag-inner\">Active</div></div><div class=\"tag disabled\"><div class=\"tag-inner\">Disabled</div></div><div class=\"tag deletable clickable rioglyph rioglyph-remove\"><div class=\"tag-inner\">Deletable</div></div></div><div class=\"taglist taglist-autowidth margin-top-10\"><div class=\"tag selectable clickable rioglyph rioglyph-checkbox rounded\"><div class=\"tag-inner\">Selectable</div></div><div class=\"tag active clickable rioglyph rioglyph-ok selectable clickable rioglyph rioglyph-checkbox rounded\"><div class=\"tag-inner\">Selectable active</div></div><div class=\"tag rounded\"><div class=\"tag-inner\">Not round</div></div></div><hr><div>Small Tags</div><div class=\"taglist taglist-autowidth margin-top-10\"><div class=\"tag tag-small\"><div class=\"tag-inner\"><a href=\"#\">Link</a></div></div><div class=\"tag tag-small\"><div class=\"tag-inner\">Text</div></div><div class=\"tag tag-small rioglyph rioglyph-truck\"><div class=\"tag-inner\">Icon</div></div><div class=\"tag tag-small clickable\"><div class=\"tag-inner\">Clickable</div></div><div class=\"tag tag-small revertable clickable rioglyph rioglyph-revert\"><div class=\"tag-inner\">Revertable active</div></div><div class=\"tag tag-small active clickable rioglyph rioglyph-ok\"><div class=\"tag-inner\">Active</div></div><div class=\"tag tag-small disabled\"><div class=\"tag-inner\">Disabled</div></div><div class=\"tag tag-small deletable clickable rioglyph rioglyph-remove\"><div class=\"tag-inner\">Deletable</div></div></div><div class=\"taglist taglist-autowidth margin-top-10\"><div class=\"tag tag-small selectable clickable rioglyph rioglyph-checkbox rounded\"><div class=\"tag-inner\">Selectable</div></div><div class=\"tag tag-small active clickable rioglyph rioglyph-ok selectable clickable rioglyph rioglyph-checkbox rounded\"><div class=\"tag-inner\">Selectable</div></div><div class=\"tag tag-small rounded\"><div class=\"tag-inner\">Not round</div></div></div><hr><div class=\"row\"><div class=\"col-md-6\"><div>Multiline Tags</div><div class=\"taglist taglist-autowidth margin-top-10\"><div class=\"tag multiline max-width-150\"><div class=\"tag-inner\">Some long multiline text</div></div><div class=\"tag rioglyph rioglyph-hand-right multiline max-width-150\"><div class=\"tag-inner\">Some long multiline text</div></div></div></div><div class=\"col-md-6\"><div>Small Multiline Tags</div><div class=\"taglist taglist-autowidth margin-top-10\"><div class=\"tag tag-small multiline max-width-100\"><div class=\"tag-inner\">Some long multiline text</div></div><div class=\"tag tag-small rioglyph rioglyph-hand-right multiline max-width-100\"><div class=\"tag-inner\">Some long multiline text</div></div></div></div></div><hr><div class=\"row\"><div class=\"col-md-6\"><div>Muted Tags</div><div class=\"taglist taglist-autowidth margin-top-10\"><div class=\"tag tag-muted\"><div class=\"tag-inner\">Text Tag</div></div><div class=\"tag tag-small rioglyph rioglyph-truck tag-muted\"><div class=\"tag-inner\">Icon Tag</div></div><div class=\"tag tag-small selectable clickable rioglyph rioglyph-checkbox tag-muted rounded\"><div class=\"tag-inner\">Selectable Tag</div></div></div></div><div class=\"col-md-6\"><div>Muted Tags with context links</div><div class=\"taglist taglist-autowidth margin-top-10\"><div class=\"tag tag-muted\"><div class=\"tag-inner\"><a href=\"#\">Link Tag</a></div></div><div class=\"tag tag-muted\"><div class=\"tag-inner\"><a href=\"#\" class=\"text-color-danger\">Link Tag</a></div></div><div class=\"tag tag-muted\"><div class=\"tag-inner\"><a href=\"#\" class=\"text-color-warning\">Link Tag</a></div></div><div class=\"tag tag-muted\"><div class=\"tag-inner\"><a href=\"#\" class=\"text-color-success\">Link Tag</a></div></div><div class=\"tag tag-muted\"><div class=\"tag-inner\"><a href=\"#\" class=\"text-color-info\">Link Tag</a></div></div></div></div></div><hr><div class=\"row\"><div class=\"col-xs-4\"><div>Vertical TagList</div><div class=\"taglist taglist-autowidth taglist-vertical margin-top-10\"><div class=\"tag\"><div class=\"tag-inner\"><a href=\"#\">Link</a></div></div><div class=\"tag\"><div class=\"tag-inner\">Text</div></div><div class=\"tag rioglyph rioglyph-truck\"><div class=\"tag-inner\">Icon</div></div><div class=\"tag clickable\"><div class=\"tag-inner\">Clickable</div></div><div class=\"tag revertable clickable rioglyph rioglyph-revert\"><div class=\"tag-inner\">Revertable</div></div><div class=\"tag active clickable rioglyph rioglyph-ok\"><div class=\"tag-inner\">Active</div></div><div class=\"tag disabled\"><div class=\"tag-inner\">Disabled</div></div><div class=\"tag deletable clickable rioglyph rioglyph-remove\"><div class=\"tag-inner\">Deletable</div></div><div class=\"Divider position-relative width-100pct\" style=\"padding-top: 15px; padding-bottom: 15px;\"></div><div class=\"tag selectable clickable rioglyph rioglyph-checkbox rounded\"><div class=\"tag-inner\">Selectable</div></div><div class=\"tag active clickable rioglyph rioglyph-ok selectable clickable rioglyph rioglyph-checkbox rounded\"><div class=\"tag-inner\">Selectable active</div></div><div class=\"tag rounded\"><div class=\"tag-inner\">Not round</div></div></div></div><div class=\"col-xs-4\"><div>Vertical TagList (autoTagWidth)</div><div class=\"taglist taglist-vertical margin-top-10\"><div class=\"tag\"><div class=\"tag-inner\"><a href=\"#\">Link</a></div></div><div class=\"tag\"><div class=\"tag-inner\">Text</div></div><div class=\"tag rioglyph rioglyph-truck\"><div class=\"tag-inner\">Icon</div></div><div class=\"tag clickable\"><div class=\"tag-inner\">Clickable</div></div><div class=\"tag revertable clickable rioglyph rioglyph-revert\"><div class=\"tag-inner\">Revertable</div></div><div class=\"tag active clickable rioglyph rioglyph-ok\"><div class=\"tag-inner\">Active</div></div><div class=\"tag disabled\"><div class=\"tag-inner\">Disabled</div></div><div class=\"tag deletable clickable rioglyph rioglyph-remove\"><div class=\"tag-inner\">Deletable</div></div><div class=\"Divider position-relative width-100pct\" style=\"padding-top: 15px; padding-bottom: 15px;\"></div><div class=\"tag selectable clickable rioglyph rioglyph-checkbox rounded\"><div class=\"tag-inner\">Selectable</div></div><div class=\"tag active clickable rioglyph rioglyph-ok selectable clickable rioglyph rioglyph-checkbox rounded\"><div class=\"tag-inner\">Selectable active</div></div><div class=\"tag rounded\"><div class=\"tag-inner\">Not round</div></div></div></div></div><hr><div>Column TagList</div><div class=\"taglist taglist-autowidth row display-flex-sm flex-wrap-sm\"><div class=\"tags-per-row-3\"><div class=\"tag rioglyph rioglyph-truck\"><div class=\"tag-inner\">Truck A</div></div><div class=\"tag rioglyph rioglyph-truck\"><div class=\"tag-inner\">Truck B</div></div><div class=\"tag rioglyph rioglyph-truck\"><div class=\"tag-inner\">Truck C</div></div><div class=\"tag rioglyph rioglyph-truck\"><div class=\"tag-inner\">Truck D</div></div><div class=\"tag rioglyph rioglyph-truck\"><div class=\"tag-inner\">Truck E</div></div><div class=\"tag rioglyph rioglyph-truck\"><div class=\"tag-inner\">Truck F</div></div><div class=\"tag rioglyph rioglyph-truck\"><div class=\"tag-inner\">Truck G</div></div></div></div></div></div>",
+          "tabs": [
+            {
+              "label": "React",
+              "language": "tsx",
+              "code": "import Tag from '@rio-cloud/rio-uikit/Tag';\nimport TagList from '@rio-cloud/rio-uikit/TagList';\nimport Divider from '@rio-cloud/rio-uikit/Divider';\n\nexport default () => (\n    <div>\n        <div>Tags</div>\n        <TagList className='margin-top-10'>\n            <Tag>\n                <a href='#'>Link</a>\n            </Tag>\n            <Tag>Text</Tag>\n            <Tag icon='rioglyph-truck'>Icon</Tag>\n            <Tag clickable>Clickable</Tag>\n            <Tag revertable>Revertable</Tag>\n            <Tag active>Active</Tag>\n            <Tag disabled>Disabled</Tag>\n            <Tag deletable>Deletable</Tag>\n        </TagList>\n        <TagList className='margin-top-10'>\n            <Tag selectable round={false}>\n                Selectable\n            </Tag>\n            <Tag selectable active round={false}>\n                Selectable active\n            </Tag>\n            <Tag round={false}>Not round</Tag>\n        </TagList>\n        <hr />\n        <div>Small Tags</div>\n        <TagList className='margin-top-10'>\n            <Tag size='small'>\n                <a href='#'>Link</a>\n            </Tag>\n            <Tag size='small'>Text</Tag>\n            <Tag size='small' icon='rioglyph-truck'>\n                Icon\n            </Tag>\n            <Tag size='small' clickable>\n                Clickable\n            </Tag>\n            <Tag size='small' revertable>\n                Revertable active\n            </Tag>\n            <Tag size='small' active>\n                Active\n            </Tag>\n            <Tag size='small' disabled>\n                Disabled\n            </Tag>\n            <Tag size='small' deletable>\n                Deletable\n            </Tag>\n        </TagList>\n        <TagList className='margin-top-10'>\n            <Tag size='small' selectable round={false}>\n                Selectable\n            </Tag>\n            <Tag size='small' selectable active round={false}>\n                Selectable\n            </Tag>\n            <Tag size='small' round={false}>\n                Not round\n            </Tag>\n        </TagList>\n        <hr />\n        <div className='row'>\n            <div className='col-md-6'>\n                <div>Multiline Tags</div>\n                <TagList className='margin-top-10'>\n                    <Tag className='max-width-150' multiline>\n                        Some long multiline text\n                    </Tag>\n                    <Tag className='max-width-150' multiline icon='rioglyph-hand-right'>\n                        Some long multiline text\n                    </Tag>\n                </TagList>\n            </div>\n            <div className='col-md-6'>\n                <div>Small Multiline Tags</div>\n                <TagList className='margin-top-10'>\n                    <Tag className='max-width-100' multiline size='small'>\n                        Some long multiline text\n                    </Tag>\n                    <Tag className='max-width-100' multiline size='small' icon='rioglyph-hand-right'>\n                        Some long multiline text\n                    </Tag>\n                </TagList>\n            </div>\n        </div>\n        <hr />\n        <div className='row'>\n            <div className='col-md-6'>\n                <div>Muted Tags</div>\n                <TagList className='margin-top-10'>\n                    <Tag muted>Text Tag</Tag>\n                    <Tag size='small' icon='rioglyph-truck' muted>\n                        Icon Tag\n                    </Tag>\n                    <Tag size='small' muted selectable round={false}>\n                        Selectable Tag\n                    </Tag>\n                </TagList>\n            </div>\n            <div className='col-md-6'>\n                <div>Muted Tags with context links</div>\n                <TagList className='margin-top-10'>\n                    <Tag muted>\n                        <a href='#'>Link Tag</a>\n                    </Tag>\n                    <Tag muted>\n                        <a href='#' className='text-color-danger'>\n                            Link Tag\n                        </a>\n                    </Tag>\n                    <Tag muted>\n                        <a href='#' className='text-color-warning'>\n                            Link Tag\n                        </a>\n                    </Tag>\n                    <Tag muted>\n                        <a href='#' className='text-color-success'>\n                            Link Tag\n                        </a>\n                    </Tag>\n                    <Tag muted>\n                        <a href='#' className='text-color-info'>\n                            Link Tag\n                        </a>\n                    </Tag>\n                </TagList>\n            </div>\n        </div>\n        <hr />\n        <div className='row'>\n            <div className='col-xs-4'>\n                <div>Vertical TagList</div>\n                <TagList inline={false} className='margin-top-10'>\n                    <Tag>\n                        <a href='#'>Link</a>\n                    </Tag>\n                    <Tag>Text</Tag>\n                    <Tag icon='rioglyph-truck'>Icon</Tag>\n                    <Tag clickable>Clickable</Tag>\n                    <Tag revertable>Revertable</Tag>\n                    <Tag active>Active</Tag>\n                    <Tag disabled>Disabled</Tag>\n                    <Tag deletable>Deletable</Tag>\n                    <Divider asSpacer />\n                    <Tag selectable round={false}>\n                        Selectable\n                    </Tag>\n                    <Tag selectable active round={false}>\n                        Selectable active\n                    </Tag>\n                    <Tag round={false}>Not round</Tag>\n                </TagList>\n            </div>\n            <div className='col-xs-4'>\n                <div>Vertical TagList (autoTagWidth)</div>\n                <TagList inline={false} autoTagWidth className='margin-top-10'>\n                    <Tag>\n                        <a href='#'>Link</a>\n                    </Tag>\n                    <Tag>Text</Tag>\n                    <Tag icon='rioglyph-truck'>Icon</Tag>\n                    <Tag clickable>Clickable</Tag>\n                    <Tag revertable>Revertable</Tag>\n                    <Tag active>Active</Tag>\n                    <Tag disabled>Disabled</Tag>\n                    <Tag deletable>Deletable</Tag>\n                    <Divider asSpacer />\n                    <Tag selectable round={false}>\n                        Selectable\n                    </Tag>\n                    <Tag selectable active round={false}>\n                        Selectable active\n                    </Tag>\n                    <Tag round={false}>Not round</Tag>\n                </TagList>\n            </div>\n        </div>\n        <hr />\n        <div>Column TagList</div>\n        <TagList tagsPerRow={3}>\n            <Tag icon='rioglyph-truck'>Truck A</Tag>\n            <Tag icon='rioglyph-truck'>Truck B</Tag>\n            <Tag icon='rioglyph-truck'>Truck C</Tag>\n            <Tag icon='rioglyph-truck'>Truck D</Tag>\n            <Tag icon='rioglyph-truck'>Truck E</Tag>\n            <Tag icon='rioglyph-truck'>Truck F</Tag>\n            <Tag icon='rioglyph-truck'>Truck G</Tag>\n        </TagList>\n    </div>\n);"
+            },
+            {
+              "label": "HTML",
+              "language": "html",
+              "code": "<div>\n    <div>Tags</div>\n    <div class=\"taglist taglist-autowidth margin-top-10\">\n        <div class=\"tag\">\n            <div class=\"tag-inner\">\n                <a href=\"#\">Link</a>\n            </div>\n        </div>\n        <div class=\"tag\">\n            <div class=\"tag-inner\">Text</div>\n        </div>\n        <div class=\"tag rioglyph rioglyph-truck\">\n            <div class=\"tag-inner\">Icon</div>\n        </div>\n        <div class=\"tag clickable\">\n            <div class=\"tag-inner\">Clickable</div>\n        </div>\n        <div class=\"tag revertable clickable rioglyph rioglyph-revert\">\n            <div class=\"tag-inner\">Revertable</div>\n        </div>\n        <div class=\"tag active clickable rioglyph rioglyph-ok\">\n            <div class=\"tag-inner\">Active</div>\n        </div>\n        <div class=\"tag disabled\">\n            <div class=\"tag-inner\">Disabled</div>\n        </div>\n        <div class=\"tag deletable clickable rioglyph rioglyph-remove\">\n            <div class=\"tag-inner\">Deletable</div>\n        </div>\n    </div>\n    <div class=\"taglist taglist-autowidth margin-top-10\">\n        <div class=\"tag selectable clickable rioglyph rioglyph-checkbox rounded\">\n            <div class=\"tag-inner\">Selectable</div>\n        </div>\n        <div class=\"tag active clickable rioglyph rioglyph-ok selectable clickable rioglyph rioglyph-checkbox rounded\">\n            <div class=\"tag-inner\">Selectable active</div>\n        </div>\n        <div class=\"tag rounded\">\n            <div class=\"tag-inner\">Not round</div>\n        </div>\n    </div>\n    <hr>\n    <div>Small Tags</div>\n    <div class=\"taglist taglist-autowidth margin-top-10\">\n        <div class=\"tag tag-small\">\n            <div class=\"tag-inner\">\n                <a href=\"#\">Link</a>\n            </div>\n        </div>\n        <div class=\"tag tag-small\">\n            <div class=\"tag-inner\">Text</div>\n        </div>\n        <div class=\"tag tag-small rioglyph rioglyph-truck\">\n            <div class=\"tag-inner\">Icon</div>\n        </div>\n        <div class=\"tag tag-small clickable\">\n            <div class=\"tag-inner\">Clickable</div>\n        </div>\n        <div class=\"tag tag-small revertable clickable rioglyph rioglyph-revert\">\n            <div class=\"tag-inner\">Revertable active</div>\n        </div>\n        <div class=\"tag tag-small active clickable rioglyph rioglyph-ok\">\n            <div class=\"tag-inner\">Active</div>\n        </div>\n        <div class=\"tag tag-small disabled\">\n            <div class=\"tag-inner\">Disabled</div>\n        </div>\n        <div class=\"tag tag-small deletable clickable rioglyph rioglyph-remove\">\n            <div class=\"tag-inner\">Deletable</div>\n        </div>\n    </div>\n    <div class=\"taglist taglist-autowidth margin-top-10\">\n        <div class=\"tag tag-small selectable clickable rioglyph rioglyph-checkbox rounded\">\n            <div class=\"tag-inner\">Selectable</div>\n        </div>\n        <div class=\"tag tag-small active clickable rioglyph rioglyph-ok selectable clickable rioglyph rioglyph-checkbox rounded\">\n            <div class=\"tag-inner\">Selectable</div>\n        </div>\n        <div class=\"tag tag-small rounded\">\n            <div class=\"tag-inner\">Not round</div>\n        </div>\n    </div>\n    <hr>\n    <div class=\"row\">\n        <div class=\"col-md-6\">\n            <div>Multiline Tags</div>\n            <div class=\"taglist taglist-autowidth margin-top-10\">\n                <div class=\"tag multiline max-width-150\">\n                    <div class=\"tag-inner\">Some long multiline text</div>\n                </div>\n                <div class=\"tag rioglyph rioglyph-hand-right multiline max-width-150\">\n                    <div class=\"tag-inner\">Some long multiline text</div>\n                </div>\n            </div>\n        </div>\n        <div class=\"col-md-6\">\n            <div>Small Multiline Tags</div>\n            <div class=\"taglist taglist-autowidth margin-top-10\">\n                <div class=\"tag tag-small multiline max-width-100\">\n                    <div class=\"tag-inner\">Some long multiline text</div>\n                </div>\n                <div class=\"tag tag-small rioglyph rioglyph-hand-right multiline max-width-100\">\n                    <div class=\"tag-inner\">Some long multiline text</div>\n                </div>\n            </div>\n        </div>\n    </div>\n    <hr>\n    <div class=\"row\">\n        <div class=\"col-md-6\">\n            <div>Muted Tags</div>\n            <div class=\"taglist taglist-autowidth margin-top-10\">\n                <div class=\"tag tag-muted\">\n                    <div class=\"tag-inner\">Text Tag</div>\n                </div>\n                <div class=\"tag tag-small rioglyph rioglyph-truck tag-muted\">\n                    <div class=\"tag-inner\">Icon Tag</div>\n                </div>\n                <div class=\"tag tag-small selectable clickable rioglyph rioglyph-checkbox tag-muted rounded\">\n                    <div class=\"tag-inner\">Selectable Tag</div>\n                </div>\n            </div>\n        </div>\n        <div class=\"col-md-6\">\n            <div>Muted Tags with context links</div>\n            <div class=\"taglist taglist-autowidth margin-top-10\">\n                <div class=\"tag tag-muted\">\n                    <div class=\"tag-inner\">\n                        <a href=\"#\">Link Tag</a>\n                    </div>\n                </div>\n                <div class=\"tag tag-muted\">\n                    <div class=\"tag-inner\">\n                        <a href=\"#\" class=\"text-color-danger\">Link Tag</a>\n                    </div>\n                </div>\n                <div class=\"tag tag-muted\">\n                    <div class=\"tag-inner\">\n                        <a href=\"#\" class=\"text-color-warning\">Link Tag</a>\n                    </div>\n                </div>\n                <div class=\"tag tag-muted\">\n                    <div class=\"tag-inner\">\n                        <a href=\"#\" class=\"text-color-success\">Link Tag</a>\n                    </div>\n                </div>\n                <div class=\"tag tag-muted\">\n                    <div class=\"tag-inner\">\n                        <a href=\"#\" class=\"text-color-info\">Link Tag</a>\n                    </div>\n                </div>\n            </div>\n        </div>\n    </div>\n    <hr>\n    <div class=\"row\">\n        <div class=\"col-xs-4\">\n            <div>Vertical TagList</div>\n            <div class=\"taglist taglist-autowidth taglist-vertical margin-top-10\">\n                <div class=\"tag\">\n                    <div class=\"tag-inner\">\n                        <a href=\"#\">Link</a>\n                    </div>\n                </div>\n                <div class=\"tag\">\n                    <div class=\"tag-inner\">Text</div>\n                </div>\n                <div class=\"tag rioglyph rioglyph-truck\">\n                    <div class=\"tag-inner\">Icon</div>\n                </div>\n                <div class=\"tag clickable\">\n                    <div class=\"tag-inner\">Clickable</div>\n                </div>\n                <div class=\"tag revertable clickable rioglyph rioglyph-revert\">\n                    <div class=\"tag-inner\">Revertable</div>\n                </div>\n                <div class=\"tag active clickable rioglyph rioglyph-ok\">\n                    <div class=\"tag-inner\">Active</div>\n                </div>\n                <div class=\"tag disabled\">\n                    <div class=\"tag-inner\">Disabled</div>\n                </div>\n                <div class=\"tag deletable clickable rioglyph rioglyph-remove\">\n                    <div class=\"tag-inner\">Deletable</div>\n                </div>\n                <div class=\"Divider position-relative width-100pct\" style=\"padding-top: 15px; padding-bottom: 15px;\">\n                </div>\n                <div class=\"tag selectable clickable rioglyph rioglyph-checkbox rounded\">\n                    <div class=\"tag-inner\">Selectable</div>\n                </div>\n                <div class=\"tag active clickable rioglyph rioglyph-ok selectable clickable rioglyph rioglyph-checkbox rounded\">\n                    <div class=\"tag-inner\">Selectable active</div>\n                </div>\n                <div class=\"tag rounded\">\n                    <div class=\"tag-inner\">Not round</div>\n                </div>\n            </div>\n        </div>\n        <div class=\"col-xs-4\">\n            <div>Vertical TagList (autoTagWidth)</div>\n            <div class=\"taglist taglist-vertical margin-top-10\">\n                <div class=\"tag\">\n                    <div class=\"tag-inner\">\n                        <a href=\"#\">Link</a>\n                    </div>\n                </div>\n                <div class=\"tag\">\n                    <div class=\"tag-inner\">Text</div>\n                </div>\n                <div class=\"tag rioglyph rioglyph-truck\">\n                    <div class=\"tag-inner\">Icon</div>\n                </div>\n                <div class=\"tag clickable\">\n                    <div class=\"tag-inner\">Clickable</div>\n                </div>\n                <div class=\"tag revertable clickable rioglyph rioglyph-revert\">\n                    <div class=\"tag-inner\">Revertable</div>\n                </div>\n                <div class=\"tag active clickable rioglyph rioglyph-ok\">\n                    <div class=\"tag-inner\">Active</div>\n                </div>\n                <div class=\"tag disabled\">\n                    <div class=\"tag-inner\">Disabled</div>\n                </div>\n                <div class=\"tag deletable clickable rioglyph rioglyph-remove\">\n                    <div class=\"tag-inner\">Deletable</div>\n                </div>\n                <div class=\"Divider position-relative width-100pct\" style=\"padding-top: 15px; padding-bottom: 15px;\">\n                </div>\n                <div class=\"tag selectable clickable rioglyph rioglyph-checkbox rounded\">\n                    <div class=\"tag-inner\">Selectable</div>\n                </div>\n                <div class=\"tag active clickable rioglyph rioglyph-ok selectable clickable rioglyph rioglyph-checkbox rounded\">\n                    <div class=\"tag-inner\">Selectable active</div>\n                </div>\n                <div class=\"tag rounded\">\n                    <div class=\"tag-inner\">Not round</div>\n                </div>\n            </div>\n        </div>\n    </div>\n    <hr>\n    <div>Column TagList</div>\n    <div class=\"taglist taglist-autowidth row display-flex-sm flex-wrap-sm\">\n        <div class=\"tags-per-row-3\">\n            <div class=\"tag rioglyph rioglyph-truck\">\n                <div class=\"tag-inner\">Truck A</div>\n            </div>\n            <div class=\"tag rioglyph rioglyph-truck\">\n                <div class=\"tag-inner\">Truck B</div>\n            </div>\n            <div class=\"tag rioglyph rioglyph-truck\">\n                <div class=\"tag-inner\">Truck C</div>\n            </div>\n            <div class=\"tag rioglyph rioglyph-truck\">\n                <div class=\"tag-inner\">Truck D</div>\n            </div>\n            <div class=\"tag rioglyph rioglyph-truck\">\n                <div class=\"tag-inner\">Truck E</div>\n            </div>\n            <div class=\"tag rioglyph rioglyph-truck\">\n                <div class=\"tag-inner\">Truck F</div>\n            </div>\n            <div class=\"tag rioglyph rioglyph-truck\">\n                <div class=\"tag-inner\">Truck G</div>\n            </div>\n        </div>\n    </div>\n</div>"
+            },
+            {
+              "label": "Props",
+              "language": "json",
+              "code": null,
+              "props": [
+                {
+                  "heading": "TagList",
+                  "rows": [
+                    {
+                      "name": "autoTagWidth",
+                      "type": "Boolean",
+                      "default": "false",
+                      "description": "Defines if the tag has the same with as it`s parent container."
+                    },
+                    {
+                      "name": "inline",
+                      "type": "Boolean",
+                      "default": "true",
+                      "description": "Defines if the taglist is rendered inline or vertically."
+                    },
+                    {
+                      "name": "tagsPerRow",
+                      "type": "Number",
+                      "default": "",
+                      "description": "Possible values are: 1, 2, 3, 4, 6"
+                    }
+                  ]
+                },
+                {
+                  "heading": "Tag",
+                  "rows": [
+                    {
+                      "name": "size",
+                      "type": "String",
+                      "default": "",
+                      "description": "Defines if you want to render the tag in a different size. Possible values are: 'small'"
+                    },
+                    {
+                      "name": "icon",
+                      "type": "String",
+                      "default": "",
+                      "description": "Define any rioglyph icon like \"rioglyph-truck\"."
+                    },
+                    {
+                      "name": "active",
+                      "type": "Boolean",
+                      "default": "false",
+                      "description": "Defines if the tag is active."
+                    },
+                    {
+                      "name": "clickable",
+                      "type": "Boolean",
+                      "default": "false",
+                      "description": "Defines if the tag is clickable."
+                    },
+                    {
+                      "name": "selectable",
+                      "type": "Boolean",
+                      "default": "false",
+                      "description": "Defines if the tag is selectable."
+                    },
+                    {
+                      "name": "deletable",
+                      "type": "Boolean",
+                      "default": "false",
+                      "description": "Defines if the tag is deletable."
+                    },
+                    {
+                      "name": "revertable",
+                      "type": "Boolean",
+                      "default": "false",
+                      "description": "Defines if the tag is revertable."
+                    },
+                    {
+                      "name": "disabled",
+                      "type": "Boolean",
+                      "default": "false",
+                      "description": "Defines if the tag is disabled."
+                    },
+                    {
+                      "name": "round",
+                      "type": "Boolean",
+                      "default": "true",
+                      "description": "Defines if the tag is round."
+                    },
+                    {
+                      "name": "muted",
+                      "type": "Boolean",
+                      "default": "false",
+                      "description": "Sets a more subtle style for border and background."
+                    },
+                    {
+                      "name": "className",
+                      "type": "String",
+                      "default": "",
+                      "description": "Additional classes to be set on the wrapper element."
+                    },
+                    {
+                      "name": "children",
+                      "type": "any",
+                      "default": "",
+                      "description": "Any element to be rendered inside the tag."
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    }
+  ],
+  "see_also": []
+}