Components

Tags

sketch:Readyscss:Readyfigma:Ready
vue
:Ready
freemarker
:Ready

Anatomy

tags-documentation

Properties

Layout / sizes

Size namePaddingsFont-sizeradius
Small4px 16px $mu025 $mu100size.font.04 (14px)0.75rem
Medium (Default size)8px 16px $mu050 $mu100size.font.04 (14px)1rem

Colors

Text tag

themePropertyTokenvalue
lightbackground-colorcolor.tag.text.light.background#ffffff
lightborder-colorcolor.tag.text.light.border#554f52
lighttext colorcolor.tag.text.light.text#554f52
darkbackground-colorcolor.tag.text.dark.background#000000
darkborder-colorcolor.tag.text.dark.border#ffffff
darktext colorcolor.tag.text.dark.text#ffffff
themestatePropertyTokenvalue
lightdefaultbackground-colorcolor.tag.selectable.light.background#ffffff
lightdefaultborder-colorcolor.tag.link.light.border#554f52
lightdefaulttext colorcolor.tag.link.light.text#554f52
lighthoverbackground-colorcolor.tag.link.light.hover.background#eeeef0
lightactivebackground-colorcolor.tag.link.light.active.background#d3d2d6
darkdefaultbackground-colorcolor.tag.link.dark.background#000000
darkdefaultborder-colorcolor.tag.link.dark.border#ffffff
darkdefaulttext colorcolor.tag.link.dark.text#ffffff
darkhoverbackground-colorcolor.tag.link.dark.hover.background#3c3738
darkactivebackground-colorcolor.tag.link.dark.active.background#554f52

Selectable tag

themestatePropertyTokenvalue
lightdefaultbackground-colorcolor.tag.selectable.light.background#d3d2d6
lightdefaulttext colorcolor.tag.selectable.light.text#222020
lighthoverbackground-colorcolor.tag.selectable.light.hover.background#add585
lightactivebackground-colorcolor.tag.selectable.light.active.background#41a017
lightdisabledbackground-colorcolor.tag.selectable.light.disabled.background#eeeef0
lightdisabledtext colorcolor.tag.selectable.light.disabled.text#887f87
lightselectedbackground-colorcolor.tag.selectable.light.selected.background#78be20
darkdefaultbackground-colorcolor.tag.selectable.dark.background#3c3738
darkdefaulttext colorcolor.tag.selectable.dark.text#ffffff
darkhoverbackground-colorcolor.tag.selectable.dark.hover.background#78be20
darkactivebackground-colorcolor.tag.selectable.dark.active.background#0a601b
darkdisabledbackground-colorcolor.tag.selectable.dark.disabled.background#554f52
darkdisabledtext colorcolor.tag.selectable.dark.disabled.text#887f87
darkselectedbackground-colorcolor.tag.selectable.dark.selected.background#158110

Removable tag

themestatePropertyTokenvalue
lightdefaultbackground-colorcolor.tag.removable.light.background#d3d2d6
lightdefaulttext colorcolor.tag.removable.light.text#222020
lightdefaulticon colorcolor.tag.removable.light.icon#3c3738
lighthoverbackground-colorcolor.tag.removable.light.hover.background#bab6bc
lightactivebackground-colorcolor.tag.removable.light.active.background#a19ba2
darkdefaultbackground-colorcolor.tag.removable.dark.background#3c3738
darkdefaulttext colorcolor.tag.removable.dark.text#ffffff
darkdefaulticon colorcolor.tag.removable.dark.icon#d3d2d6
darkhoverbackground-colorcolor.tag.removable.dark.hover.background#554f52
darkactivebackground-colorcolor.tag.removable.dark.active.background#6f676c