Simple Tag component with multiple states
Default
Default
1import Tag from '@tempoplatform/tpds/components/tag'
2
3<Tag
4 label='Default'
5 variant='default'
6/>With X Icon
1import Tag from '@tempoplatform/tpds/components/tag'
2
3<Tag
4 label='With X Icon'
5 variant='default'
6 showCloseIcon={true}
7/>With hover effect
1import Tag from '@tempoplatform/tpds/components/tag'
2
3<Tag
4 label='With hover effect'
5 variant='default'
6 addHoverEffect={true}
7/>Uppercase
UPPERCASE
1import Tag from '@tempoplatform/tpds/components/tag'
2
3<Tag
4 isUppercase={true}
5 label='UPPERCASE'
6 variant='default'
7/>Success
Success
1import Tag from '@tempoplatform/tpds/components/tag'
2
3<Tag
4 label='Success'
5 variant='success'
6/>Info
Info
1import Tag from '@tempoplatform/tpds/components/tag'
2
3<Tag
4 label='Info'
5 variant='info'
6/>Warning
Warning
1import Tag from '@tempoplatform/tpds/components/tag'
2
3<Tag
4 label='Warning'
5 variant='warning'
6/>Danger
Danger
1import Tag from '@tempoplatform/tpds/components/tag'
2
3<Tag
4 label='Danger'
5 variant='danger'
6/>Prop Name
Type
Default
Required
Description
label
String
' '
true
The label to be displayed inside the Tag
variant
String
null
no
The variant type, eg. 'info', 'success', 'warning', etc.
showCloseIcon
Boolean
false
no
Show a small X icon next to the label
isUppercase
Boolean
null
no
Force uppercase label display
addHoverEffect
Boolean
null
no
Adds a hover effect to the Tag. Useful when the Tag is used as a button or link
rootClassName
String
no
Optional classNames for tag root element
labelClassName
String
no
Optional classNames for tag label element