@rio-cloud/uikit-mcp 1.0.0 → 1.1.0

package/dist/docs/components/tags.md

@@ -0,0 +1,785 @@
+# Tag
+
+*Category:* Components
+*Section:* Misc
+*Source:* https://uikit.developers.rio.cloud/#components/tags
+*Captured:* 2025-12-12T12:39:01.881Z
+
+## Tag
+
+### Example: Example 1
+
+Tags
+Link
+
+Text
+
+Icon
+
+Clickable
+
+Revertable
+
+Active
+
+Disabled
+
+Deletable
+
+Selectable
+
+Selectable active
+
+Not round
+
+Small Tags
+Link
+
+Text
+
+Icon
+
+Clickable
+
+Revertable active
+
+Active
+
+Disabled
+
+Deletable
+
+Selectable
+
+Selectable
+
+Not round
+
+Multiline Tags
+Some long multiline text
+
+Some long multiline text
+
+Small Multiline Tags
+Some long multiline text
+
+Some long multiline text
+
+Muted Tags
+Text Tag
+
+Icon Tag
+
+Selectable Tag
+
+Muted Tags with context links
+Link Tag
+
+Link Tag
+
+Link Tag
+
+Link Tag
+
+Link Tag
+
+Vertical TagList
+Link
+
+Text
+
+Icon
+
+Clickable
+
+Revertable
+
+Active
+
+Disabled
+
+Deletable
+
+Selectable
+
+Selectable active
+
+Not round
+
+Vertical TagList (autoTagWidth)
+Link
+
+Text
+
+Icon
+
+Clickable
+
+Revertable
+
+Active
+
+Disabled
+
+Deletable
+
+Selectable
+
+Selectable active
+
+Not round
+
+Column TagList
+Truck A
+
+Truck B
+
+Truck C
+
+Truck D
+
+Truck E
+
+Truck F
+
+Truck G
+
+#### Summary
+
+Tags
+Link
+
+Text
+
+Icon
+
+Clickable
+
+Revertable
+
+Active
+
+Disabled
+
+Deletable
+
+Selectable
+
+Selectable active
+
+Not round
+
+Small Tags
+Link
+
+Text
+
+Icon
+
+Clickable
+
+Revertable active
+
+Active
+
+Disabled
+
+Deletable
+
+Selectable
+
+Selectable
+
+Not round
+
+Multiline Tags
+Some long multiline text
+
+Some long multiline text
+
+Small Multiline Tags
+Some long multiline text
+
+Some long multiline text
+
+Muted Tags
+Text Tag
+
+Icon Tag
+
+Selectable Tag
+
+Muted Tags with context links
+Link Tag
+
+Link Tag
+
+Link Tag
+
+Link Tag
+
+Link Tag
+
+Vertical TagList
+Link
+
+Text
+
+Icon
+
+Clickable
+
+Revertable
+
+Active
+
+Disabled
+
+Deletable
+
+Selectable
+
+Selectable active
+
+Not round
+
+Vertical TagList (autoTagWidth)
+Link
+
+Text
+
+Icon
+
+Clickable
+
+Revertable
+
+Active
+
+Disabled
+
+Deletable
+
+Selectable
+
+Selectable active
+
+Not round
+
+Column TagList
+Truck A
+
+Truck B
+
+Truck C
+
+Truck D
+
+Truck E
+
+Truck F
+
+Truck G
+
+#### React (tsx)
+
+```tsx
+import Tag from '@rio-cloud/rio-uikit/Tag';
+import TagList from '@rio-cloud/rio-uikit/TagList';
+import Divider from '@rio-cloud/rio-uikit/Divider';
+
+export default () => (
+    <div>
+        <div>Tags</div>
+        <TagList className='margin-top-10'>
+            <Tag>
+                <a href='#'>Link</a>
+            </Tag>
+            <Tag>Text</Tag>
+            <Tag icon='rioglyph-truck'>Icon</Tag>
+            <Tag clickable>Clickable</Tag>
+            <Tag revertable>Revertable</Tag>
+            <Tag active>Active</Tag>
+            <Tag disabled>Disabled</Tag>
+            <Tag deletable>Deletable</Tag>
+        </TagList>
+        <TagList className='margin-top-10'>
+            <Tag selectable round={false}>
+                Selectable
+            </Tag>
+            <Tag selectable active round={false}>
+                Selectable active
+            </Tag>
+            <Tag round={false}>Not round</Tag>
+        </TagList>
+        <hr />
+        <div>Small Tags</div>
+        <TagList className='margin-top-10'>
+            <Tag size='small'>
+                <a href='#'>Link</a>
+            </Tag>
+            <Tag size='small'>Text</Tag>
+            <Tag size='small' icon='rioglyph-truck'>
+                Icon
+            </Tag>
+            <Tag size='small' clickable>
+                Clickable
+            </Tag>
+            <Tag size='small' revertable>
+                Revertable active
+            </Tag>
+            <Tag size='small' active>
+                Active
+            </Tag>
+            <Tag size='small' disabled>
+                Disabled
+            </Tag>
+            <Tag size='small' deletable>
+                Deletable
+            </Tag>
+        </TagList>
+        <TagList className='margin-top-10'>
+            <Tag size='small' selectable round={false}>
+                Selectable
+            </Tag>
+            <Tag size='small' selectable active round={false}>
+                Selectable
+            </Tag>
+            <Tag size='small' round={false}>
+                Not round
+            </Tag>
+        </TagList>
+        <hr />
+        <div className='row'>
+            <div className='col-md-6'>
+                <div>Multiline Tags</div>
+                <TagList className='margin-top-10'>
+                    <Tag className='max-width-150' multiline>
+                        Some long multiline text
+                    </Tag>
+                    <Tag className='max-width-150' multiline icon='rioglyph-hand-right'>
+                        Some long multiline text
+                    </Tag>
+                </TagList>
+            </div>
+            <div className='col-md-6'>
+                <div>Small Multiline Tags</div>
+                <TagList className='margin-top-10'>
+                    <Tag className='max-width-100' multiline size='small'>
+                        Some long multiline text
+                    </Tag>
+                    <Tag className='max-width-100' multiline size='small' icon='rioglyph-hand-right'>
+                        Some long multiline text
+                    </Tag>
+                </TagList>
+            </div>
+        </div>
+        <hr />
+        <div className='row'>
+            <div className='col-md-6'>
+                <div>Muted Tags</div>
+                <TagList className='margin-top-10'>
+                    <Tag muted>Text Tag</Tag>
+                    <Tag size='small' icon='rioglyph-truck' muted>
+                        Icon Tag
+                    </Tag>
+                    <Tag size='small' muted selectable round={false}>
+                        Selectable Tag
+                    </Tag>
+                </TagList>
+            </div>
+            <div className='col-md-6'>
+                <div>Muted Tags with context links</div>
+                <TagList className='margin-top-10'>
+                    <Tag muted>
+                        <a href='#'>Link Tag</a>
+                    </Tag>
+                    <Tag muted>
+                        <a href='#' className='text-color-danger'>
+                            Link Tag
+                        </a>
+                    </Tag>
+                    <Tag muted>
+                        <a href='#' className='text-color-warning'>
+                            Link Tag
+                        </a>
+                    </Tag>
+                    <Tag muted>
+                        <a href='#' className='text-color-success'>
+                            Link Tag
+                        </a>
+                    </Tag>
+                    <Tag muted>
+                        <a href='#' className='text-color-info'>
+                            Link Tag
+                        </a>
+                    </Tag>
+                </TagList>
+            </div>
+        </div>
+        <hr />
+        <div className='row'>
+            <div className='col-xs-4'>
+                <div>Vertical TagList</div>
+                <TagList inline={false} className='margin-top-10'>
+                    <Tag>
+                        <a href='#'>Link</a>
+                    </Tag>
+                    <Tag>Text</Tag>
+                    <Tag icon='rioglyph-truck'>Icon</Tag>
+                    <Tag clickable>Clickable</Tag>
+                    <Tag revertable>Revertable</Tag>
+                    <Tag active>Active</Tag>
+                    <Tag disabled>Disabled</Tag>
+                    <Tag deletable>Deletable</Tag>
+                    <Divider asSpacer />
+                    <Tag selectable round={false}>
+                        Selectable
+                    </Tag>
+                    <Tag selectable active round={false}>
+                        Selectable active
+                    </Tag>
+                    <Tag round={false}>Not round</Tag>
+                </TagList>
+            </div>
+            <div className='col-xs-4'>
+                <div>Vertical TagList (autoTagWidth)</div>
+                <TagList inline={false} autoTagWidth className='margin-top-10'>
+                    <Tag>
+                        <a href='#'>Link</a>
+                    </Tag>
+                    <Tag>Text</Tag>
+                    <Tag icon='rioglyph-truck'>Icon</Tag>
+                    <Tag clickable>Clickable</Tag>
+                    <Tag revertable>Revertable</Tag>
+                    <Tag active>Active</Tag>
+                    <Tag disabled>Disabled</Tag>
+                    <Tag deletable>Deletable</Tag>
+                    <Divider asSpacer />
+                    <Tag selectable round={false}>
+                        Selectable
+                    </Tag>
+                    <Tag selectable active round={false}>
+                        Selectable active
+                    </Tag>
+                    <Tag round={false}>Not round</Tag>
+                </TagList>
+            </div>
+        </div>
+        <hr />
+        <div>Column TagList</div>
+        <TagList tagsPerRow={3}>
+            <Tag icon='rioglyph-truck'>Truck A</Tag>
+            <Tag icon='rioglyph-truck'>Truck B</Tag>
+            <Tag icon='rioglyph-truck'>Truck C</Tag>
+            <Tag icon='rioglyph-truck'>Truck D</Tag>
+            <Tag icon='rioglyph-truck'>Truck E</Tag>
+            <Tag icon='rioglyph-truck'>Truck F</Tag>
+            <Tag icon='rioglyph-truck'>Truck G</Tag>
+        </TagList>
+    </div>
+);
+```
+
+#### HTML (html)
+
+```html
+<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>
+```
+
+#### Props: TagList
+
+### TagList
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| autoTagWidth | Boolean | false | Defines if the tag has the same with as it`s parent container. |
+| inline | Boolean | true | Defines if the taglist is rendered inline or vertically. |
+| tagsPerRow | Number | — | Possible values are: 1, 2, 3, 4, 6 |
+
+#### Props: Tag
+
+### Tag
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| size | String | — | Defines if you want to render the tag in a different size. Possible values are: 'small' |
+| icon | String | — | Define any rioglyph icon like "rioglyph-truck". |
+| active | Boolean | false | Defines if the tag is active. |
+| clickable | Boolean | false | Defines if the tag is clickable. |
+| selectable | Boolean | false | Defines if the tag is selectable. |
+| deletable | Boolean | false | Defines if the tag is deletable. |
+| revertable | Boolean | false | Defines if the tag is revertable. |
+| disabled | Boolean | false | Defines if the tag is disabled. |
+| round | Boolean | true | Defines if the tag is round. |
+| muted | Boolean | false | Sets a more subtle style for border and background. |
+| className | String | — | Additional classes to be set on the wrapper element. |
+| children | any | — | Any element to be rendered inside the tag. |