# Tag

*Category:* Components
*Section:* Misc
*Source:* https://uikit.developers.rio.cloud/#/components/tags
*Captured:* 2026-04-27T14:58:33.989Z

## 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

#### 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: Tag

### Tag

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| active | boolean | false | Defines if the tag is active. |
| clickable | boolean | false | Defines if the tag is clickable. |
| 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. |
| icon | string | — | Define any rioglyph icon like "rioglyph-truck". |
| muted | boolean | false | Sets a more subtle style for border and background. |
| round | boolean | true | Defines if the tag is round. |
| selectable | boolean | false | Defines if the tag is selectable. |
| size | 'small' \| 'medium' | — | Defines if you want to render the tag in a different size. Possible values are: 'small' and 'medium' |
| multiline | boolean | false | Allows to render text on multiple lines. |
| className | string | — | Additional classes to be set on the wrapper element. |

#### Props: TagList

### TagList

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| inline | boolean | true | Defines if the tag list is rendered inline or vertically. |
| autoTagWidth | boolean | false | Defines if the tag has the same with as it`s parent container. |
| tagsPerRow | 1 \| 2 \| 3 \| 4 \| 6 | — | Possible values are 1-6 |
| className | string | — | Additional classes to be set on the wrapper element. |