Tag

Overview
API
Theme
Examples

NbTagListComponent

NameTheme VariableDefault ValueDescription
tag-list-tiny-tag-offset0.0625rem
tag-list-small-tag-offset0.125rem
tag-list-medium-tag-offset0.25rem
tag-list-large-tag-offset0.375rem
tag-list-giant-tag-offset0.5rem
tag-list-with-input-tiny-padding0.0625rem, 1rem
tag-list-with-input-small-padding0.0625rem, 1rem
tag-list-with-input-medium-padding0.1875rem, 1rem
tag-list-with-input-large-padding0.3125rem, 1rem
tag-list-with-input-giant-padding0.4375rem, 1rem
tag-list-with-input-rectangle-border-radiusinput-rectangle-border-radius0.25rem
tag-list-with-input-semi-round-border-radiusinput-semi-round-border-radius0.75rem
tag-list-with-input-round-border-radiusinput-round-border-radius1.5rem

NbTagInputDirective

NameTheme VariableDefault ValueDescription
tag-list-tiny-tag-offset0.0625rem
tag-list-small-tag-offset0.125rem
tag-list-medium-tag-offset0.25rem
tag-list-large-tag-offset0.375rem
tag-list-giant-tag-offset0.5rem
tag-list-with-input-tiny-padding0.0625rem, 1rem
tag-list-with-input-small-padding0.0625rem, 1rem
tag-list-with-input-medium-padding0.1875rem, 1rem
tag-list-with-input-large-padding0.3125rem, 1rem
tag-list-with-input-giant-padding0.4375rem, 1rem

NbTagComponent

NameTheme VariableDefault ValueDescription
tag-text-font-familytext-subtitle-font-familyOpen Sans, sans-serif
tag-text-transformcapitalize
tag-border-width0.0625rem
tag-border-stylesolid
tag-border-radius1.5rem
tag-tiny-text-font-sizeinput-tiny-text-font-size0.75rem
tag-tiny-text-font-weightinput-tiny-text-font-weight600
tag-tiny-text-line-heightinput-tiny-text-line-height1rem
tag-tiny-padding0.0625rem, 0.9375rem
tag-tiny-close-offset0.625rem
tag-small-text-font-sizeinput-small-text-font-size0.8125rem
tag-small-text-font-weightinput-small-text-font-weight600
tag-small-text-line-heightinput-small-text-line-height1.5rem
tag-small-padding0.0625rem, 0.9375rem
tag-small-close-offset0.625rem
tag-medium-text-font-sizeinput-medium-text-font-size0.9375rem
tag-medium-text-font-weightinput-medium-text-font-weight600
tag-medium-text-line-heightinput-medium-text-line-height1.5rem
tag-medium-padding0.1875rem, 0.9375rem
tag-medium-close-offset0.625rem
tag-large-text-font-sizeinput-large-text-font-size0.9375rem
tag-large-text-font-weightinput-large-text-font-weight600
tag-large-text-line-heightinput-large-text-line-height1.5rem
tag-large-padding0.3125rem, 0.9375rem
tag-large-close-offset0.625rem
tag-giant-text-font-sizeinput-giant-text-font-size1.125rem
tag-giant-text-font-weightinput-giant-text-font-weight700
tag-giant-text-line-heightinput-giant-text-line-height1.5rem
tag-giant-padding0.4375rem, 0.9375rem
tag-giant-close-offset0.625rem
tag-filled-basic-background-colorcolor-basic-default#edf1f7
tag-filled-basic-border-colorcolor-basic-default-border#edf1f7
tag-filled-basic-text-colorcolor-basic-800#222b45
tag-filled-basic-active-background-colorcolor-basic-focus#e4e9f2
tag-filled-basic-active-border-colorcolor-basic-focus-border#c5cee0
tag-filled-basic-hover-background-colorcolor-basic-hover#f7f9fc
tag-filled-basic-hover-border-colorcolor-basic-hover-border#f7f9fc
tag-filled-basic-selected-background-colorcolor-basic-actove
tag-filled-basic-selected-border-colorcolor-basic-active-border#e4e9f2
tag-filled-primary-background-colorcolor-primary-default#3366ff
tag-filled-primary-border-colorcolor-primary-default-border#3366ff
tag-filled-primary-text-colortext-control-color#ffffff
tag-filled-primary-active-background-colorcolor-primary-focus#274bdb
tag-filled-primary-active-border-colorcolor-primary-focus-border#1a34b8
tag-filled-primary-hover-background-colorcolor-primary-hover#598bff
tag-filled-primary-hover-border-colorcolor-primary-hover-border#598bff
tag-filled-primary-selected-background-colorcolor-primary-actove
tag-filled-primary-selected-border-colorcolor-primary-active-border#274bdb
tag-filled-success-background-colorcolor-success-default#00d68f
tag-filled-success-border-colorcolor-success-default-border#00d68f
tag-filled-success-text-colortext-control-color#ffffff
tag-filled-success-active-background-colorcolor-success-focus#00b887
tag-filled-success-active-border-colorcolor-success-focus-border#00997a
tag-filled-success-hover-background-colorcolor-success-hover#2ce69b
tag-filled-success-hover-border-colorcolor-success-hover-border#2ce69b
tag-filled-success-selected-background-colorcolor-success-actove
tag-filled-success-selected-border-colorcolor-success-active-border#00b887
tag-filled-info-background-colorcolor-info-default#0095ff
tag-filled-info-border-colorcolor-info-default-border#0095ff
tag-filled-info-text-colortext-control-color#ffffff
tag-filled-info-active-background-colorcolor-info-focus#006fd6
tag-filled-info-active-border-colorcolor-info-focus-border#0057c2
tag-filled-info-hover-background-colorcolor-info-hover#42aaff
tag-filled-info-hover-border-colorcolor-info-hover-border#42aaff
tag-filled-info-selected-background-colorcolor-info-actove
tag-filled-info-selected-border-colorcolor-info-active-border#006fd6
tag-filled-warning-background-colorcolor-warning-default#ffaa00
tag-filled-warning-border-colorcolor-warning-default-border#ffaa00
tag-filled-warning-text-colortext-control-color#ffffff
tag-filled-warning-active-background-colorcolor-warning-focus#db8b00
tag-filled-warning-active-border-colorcolor-warning-focus-border#b86e00
tag-filled-warning-hover-background-colorcolor-warning-hover#ffc94d
tag-filled-warning-hover-border-colorcolor-warning-hover-border#ffc94d
tag-filled-warning-selected-background-colorcolor-warning-actove
tag-filled-warning-selected-border-colorcolor-warning-active-border#db8b00
tag-filled-danger-background-colorcolor-danger-default#ff3d71
tag-filled-danger-border-colorcolor-danger-default-border#ff3d71
tag-filled-danger-text-colortext-control-color#ffffff
tag-filled-danger-active-background-colorcolor-danger-focus#db2c66
tag-filled-danger-active-border-colorcolor-danger-focus-border#b81d5b
tag-filled-danger-hover-background-colorcolor-danger-hover#ff708d
tag-filled-danger-hover-border-colorcolor-danger-hover-border#ff708d
tag-filled-danger-selected-background-colorcolor-danger-actove
tag-filled-danger-selected-border-colorcolor-danger-active-border#db2c66
tag-filled-control-background-colorcolor-control-default#ffffff
tag-filled-control-border-colorcolor-control-default-border#ffffff
tag-filled-control-text-colorcolor-basic-800#222b45
tag-filled-control-active-background-colorcolor-control-hover#f7f9fc
tag-filled-control-active-border-colorcolor-control-hover-border#f7f9fc
tag-filled-control-hover-background-colorcolor-control-focus#edf1f7
tag-filled-control-hover-border-colorcolor-control-focus-border#c5cee0
tag-filled-control-selected-background-colorcolor-control-actove
tag-filled-control-selected-border-colorcolor-control-active-border#edf1f7
tag-outline-basic-background-colorcolor-basic-transparent-defaultrgba(143, 155, 179, 0.08)
tag-outline-basic-border-colorcolor-basic-transparent-default-border#8f9bb3
tag-outline-basic-text-colortext-hint-color#8f9bb3
tag-outline-basic-active-background-colorcolor-basic-transparent-focusrgba(143, 155, 179, 0.24)
tag-outline-basic-active-border-colorcolor-basic-transparent-focus-border#8f9bb3
tag-outline-basic-active-text-colortext-hint-color#8f9bb3
tag-outline-basic-hover-background-colorcolor-basic-transparent-hoverrgba(143, 155, 179, 0.16)
tag-outline-basic-hover-border-colorcolor-basic-transparent-hover-border#8f9bb3
tag-outline-basic-hover-text-colortext-hint-color#8f9bb3
tag-outline-basic-selected-background-colorcolor-basic-transparent-activergba(143, 155, 179, 0.24)
tag-outline-basic-selected-border-colorcolor-basic-transparent-active-border#8f9bb3
tag-outline-basic-selected-text-colortext-hint-color#8f9bb3
tag-outline-primary-background-colorcolor-primary-transparent-defaultrgba(51, 102, 255, 0.08)
tag-outline-primary-border-colorcolor-primary-transparent-default-border#3366ff
tag-outline-primary-text-colortext-primary-color#3366ff
tag-outline-primary-active-background-colorcolor-primary-transparent-focusrgba(51, 102, 255, 0.24)
tag-outline-primary-active-border-colorcolor-primary-transparent-focus-border#3366ff
tag-outline-primary-active-text-colortext-primary-color#3366ff
tag-outline-primary-hover-background-colorcolor-primary-transparent-hoverrgba(51, 102, 255, 0.16)
tag-outline-primary-hover-border-colorcolor-primary-transparent-hover-border#3366ff
tag-outline-primary-hover-text-colortext-primary-color#3366ff
tag-outline-primary-selected-background-colorcolor-primary-transparent-activergba(51, 102, 255, 0.24)
tag-outline-primary-selected-border-colorcolor-primary-transparent-active-border#3366ff
tag-outline-primary-selected-text-colortext-primary-color#3366ff
tag-outline-success-background-colorcolor-success-transparent-defaultrgba(0, 214, 143, 0.08)
tag-outline-success-border-colorcolor-success-transparent-default-border#00d68f
tag-outline-success-text-colortext-success-color#00d68f
tag-outline-success-active-background-colorcolor-success-transparent-focusrgba(0, 214, 143, 0.24)
tag-outline-success-active-border-colorcolor-success-transparent-focus-border#00d68f
tag-outline-success-active-text-colortext-success-color#00d68f
tag-outline-success-hover-background-colorcolor-success-transparent-hoverrgba(0, 214, 143, 0.16)
tag-outline-success-hover-border-colorcolor-success-transparent-hover-border#00d68f
tag-outline-success-hover-text-colortext-success-color#00d68f
tag-outline-success-selected-background-colorcolor-success-transparent-activergba(0, 214, 143, 0.24)
tag-outline-success-selected-border-colorcolor-success-transparent-active-border#00d68f
tag-outline-success-selected-text-colortext-success-color#00d68f
tag-outline-info-background-colorcolor-info-transparent-defaultrgba(0, 149, 255, 0.08)
tag-outline-info-border-colorcolor-info-transparent-default-border#0095ff
tag-outline-info-text-colortext-info-color#0095ff
tag-outline-info-active-background-colorcolor-info-transparent-focusrgba(0, 149, 255, 0.24)
tag-outline-info-active-border-colorcolor-info-transparent-focus-border#0095ff
tag-outline-info-active-text-colortext-info-color#0095ff
tag-outline-info-hover-background-colorcolor-info-transparent-hoverrgba(0, 149, 255, 0.16)
tag-outline-info-hover-border-colorcolor-info-transparent-hover-border#0095ff
tag-outline-info-hover-text-colortext-info-color#0095ff
tag-outline-info-selected-background-colorcolor-info-transparent-activergba(0, 149, 255, 0.24)
tag-outline-info-selected-border-colorcolor-info-transparent-active-border#0095ff
tag-outline-info-selected-text-colortext-info-color#0095ff
tag-outline-warning-background-colorcolor-warning-transparent-defaultrgba(255, 170, 0, 0.08)
tag-outline-warning-border-colorcolor-warning-transparent-default-border#ffaa00
tag-outline-warning-text-colortext-warning-color#ffaa00
tag-outline-warning-active-background-colorcolor-warning-transparent-focusrgba(255, 170, 0, 0.24)
tag-outline-warning-active-border-colorcolor-warning-transparent-focus-border#ffaa00
tag-outline-warning-active-text-colortext-warning-color#ffaa00
tag-outline-warning-hover-background-colorcolor-warning-transparent-hoverrgba(255, 170, 0, 0.16)
tag-outline-warning-hover-border-colorcolor-warning-transparent-hover-border#ffaa00
tag-outline-warning-hover-text-colortext-warning-color#ffaa00
tag-outline-warning-selected-background-colorcolor-warning-transparent-activergba(255, 170, 0, 0.24)
tag-outline-warning-selected-border-colorcolor-warning-transparent-active-border#ffaa00
tag-outline-warning-selected-text-colortext-warning-color#ffaa00
tag-outline-danger-background-colorcolor-danger-transparent-defaultrgba(255, 61, 113, 0.08)
tag-outline-danger-border-colorcolor-danger-transparent-default-border#ff3d71
tag-outline-danger-text-colortext-danger-color#ff3d71
tag-outline-danger-active-background-colorcolor-danger-transparent-focusrgba(255, 61, 113, 0.24)
tag-outline-danger-active-border-colorcolor-danger-transparent-focus-border#ff3d71
tag-outline-danger-active-text-colortext-danger-color#ff3d71
tag-outline-danger-hover-background-colorcolor-danger-transparent-hoverrgba(255, 61, 113, 0.16)
tag-outline-danger-hover-border-colorcolor-danger-transparent-hover-border#ff3d71
tag-outline-danger-hover-text-colortext-danger-color#ff3d71
tag-outline-danger-selected-background-colorcolor-danger-transparent-activergba(255, 61, 113, 0.24)
tag-outline-danger-selected-border-colorcolor-danger-transparent-active-border#ff3d71
tag-outline-danger-selected-text-colortext-danger-color#ff3d71
tag-outline-control-background-colorcolor-control-transparent-defaultrgba(255, 255, 255, 0.08)
tag-outline-control-border-colorcolor-control-transparent-default-border#ffffff
tag-outline-control-text-colortext-control-color#ffffff
tag-outline-control-active-background-colorcolor-control-transparent-focusrgba(255, 255, 255, 0.24)
tag-outline-control-active-border-colorcolor-control-transparent-focus-border#ffffff
tag-outline-control-active-text-colortext-control-color#ffffff
tag-outline-control-hover-background-colorcolor-control-transparent-hoverrgba(255, 255, 255, 0.16)
tag-outline-control-hover-border-colorcolor-control-transparent-hover-border#ffffff
tag-outline-control-hover-text-colortext-control-color#ffffff
tag-outline-control-selected-background-colorcolor-control-transparent-activergba(255, 255, 255, 0.24)
tag-outline-control-selected-border-colorcolor-control-transparent-active-border#ffffff
tag-outline-control-selected-text-colortext-control-color#ffffff
Timepicker
Previous page
Popover
Next page
Overview
API
Theme
Examples

Overview

Services on Angular

Need some help or found an issue?

Ask on Stack Overflow with tag `nebular` or post an issue on GitHub.