Tag

A tag component is a small, interactive element typically used in user interfaces to display keywords, labels, or categories, often with the ability to be added, removed, or filtered.

Info tag

Expand code


<Tag variant={'filled'} label={'Info tag'} color={'info'}/>

Content

You can either use React children or the label prop to set the content.

Label prop

React Children

Expand code


<Tag label={'Label prop'} variant={'filled'} color={'info'}/>
 
<Tag variant={'filled'} color={'info'}>
  <span>React Children</span>
</Tag>

Variants

The input component offers two distinct variants: filled and outlined.

Filled tag

Outlined tag

Expand code


<Tag variant={'filled'} label={'Filled tag'} color={'info'}/>
 
<Tag variant={'outlined'} label={'Outlined tag'} color={'info'}/>

Elevation

The elevation prop enables or disables box-shadow styling.

Elevated

Expand code


<Tag variant={'filled'} label={'Elevated'} color={'info'} elevated/>
 
<Tag variant={'outlined'} label={'Elevated'} color={'info'} elevated/>

Size

The tag component comes in three different sizes: small, medium and large.

Small tag

Medium tag

Large tag

Small tag

Medium tag

Large tag

Expand code


<Tag variant={'filled'} label={'Small tag'} color={'info'} size={'small'}/>
<Tag variant={'filled'} label={'Medium tag'} color={'info'} size={'medium'}/>
<Tag variant={'filled'} label={'Large tag'} color={'info'} size={'large'}/>
 
<Tag variant={'outlined'} label={'Small tag'} color={'info'} size={'small'}/>
<Tag variant={'outlined'} label={'Medium tag'} color={'info'} size={'medium'}/>
<Tag variant={'outlined'} label={'Large tag'} color={'info'} size={'large'}/>

Color

Each button variant offers predefined color options, along with the ability to set a custom color. Below are the available options:

Info

Success

Warning

Error

Custom

Expand code


<Tag label={'Info'} variant={'filled'} color={'info'}/>
<Tag label={'Info'} variant={'outlined'} color={'info'}/>
 
<Tag label={'Success'} variant={'filled'} color={'success'}/>
<Tag label={'Success'} variant={'outlined'} color={'success'}/>
 
<Tag label={'Warning'} variant={'filled'} color={'warning'}/>
<Tag label={'Warning'} variant={'outlined'} color={'warning'}/>
 
<Tag label={'Error'} variant={'filled'} color={'error'}/>
<Tag label={'Error'} variant={'outlined'} color={'error'}/>
 
<Tag label={'Custom'} variant={'filled'} color={'#c322a7'}/>
<Tag label={'Custom'} variant={'outlined'} color={'#c322a7'}/>
 
<Tag label={'Custom'} variant={'filled'} color={'#63d5c5'}/>
<Tag label={'Custom'} variant={'outlined'} color={'#63d5c5'}/>

OnClick

Add interactivity by providing an onClick function.

Tags are not intended to function as fully interactive buttons. The onClick property should be reserved for simple actions, such as applying filters.

Clickable tag

Expand code


<Tag label={'Clickable tag'} variant={'filled'} color={'info'} onClick={() => {alert('tag clicked')}}/>
<Tag label={'Clickable tag'} variant={'outlined'} color={'info'} onClick={() => {alert('tag clicked')}}/>

OnDelete

Use the onDelete prop to clear filter options or remove the tag from a selection of tags.

Deletable tag

Expand code


<Tag label={'Deletable tag'} variant={'filled'} color={'info'} onDelete={() => {alert('delete clicked')}}/>
<Tag label={'Deletable tag'} variant={'outlined'} color={'info'} onDelete={() => {alert('delete clicked')}}/>

By default, if the onDelete prop is provided, a fallback icon will be rendered.
The icon is designed by the fontawesome team .

To customize the icon, use the deleteIcon prop.

Link

Use the href prop to convert the tag into a link-tag.

Link tag Link tag

Expand code


<Tag label={'Link tag'} variant={'filled'} color={'info'} href={'#link'}/>
<Tag label={'Link tag'} variant={'outlined'} color={'info'} href={'#link'}/>

Props

Name	Type	Default	Description
children	`node`	-	Content of the component
color	`info` \| `success` \| `warning` \| `error` \| `string`	-	Color of the tag ⚠️ If you use a custom color make sure it is a valid HEX value.
dark	`boolean`	false	Use the darkmode style
deleteIcon	`Node`		Sets a custom delete icon
elevated	`boolean`	false	Use the elevated style
href	`string`	-	Set the link target Transforms the tag to a link-tag.
label	`string`	-	Content of the component ⚠️ This is mutually exclusive with the `children` prop.
onClick	`function`	-	Set the onClick handler function.
onDelete	`function`	-	Set the onDelete handler function.
size	`small` \| `medium` \| `large`	medium	Set the size of the component
target	`_self` \| `_blank` \| `_parent` \| `_top` \| `_unfencedTop`	-	Set the link target ⚠️ This is only available if the `href` prop is set.
variant	`filled` \| `outlined`	-	The variant to use