Button

Overview
API
Theme
Examples

NbButtonComponent

NameTheme VariableDefault ValueDescription
button-cursorpointer
button-outline-widthoutline-width0.375rem
button-outline-coloroutline-colorrgba(143, 155, 179, 0.16)
button-text-font-familytext-button-font-familyOpen Sans, sans-serif
button-text-font-weighttext-button-font-weight700
button-disabled-cursordefault
button-tiny-text-font-sizetext-button-tiny-font-size0.625rem
button-tiny-text-line-heighttext-button-tiny-line-height0.75rem
button-tiny-icon-size0.75rem
button-tiny-icon-vertical-margin-0.125rem
button-tiny-icon-offset0.375rem
button-small-text-font-sizetext-button-small-font-size0.75rem
button-small-text-line-heighttext-button-small-line-height1rem
button-small-icon-size1rem
button-small-icon-vertical-margin-0.125rem
button-small-icon-offset0.375rem
button-medium-text-font-sizetext-button-medium-font-size0.875rem
button-medium-text-line-heighttext-button-medium-line-height1rem
button-medium-icon-size1.25rem
button-medium-icon-vertical-margin-0.125rem
button-medium-icon-offset0.5rem
button-large-text-font-sizetext-button-large-font-size1rem
button-large-text-line-heighttext-button-large-line-height1.25rem
button-large-icon-size1.5rem
button-large-icon-vertical-margin-0.125rem
button-large-icon-offset0.75rem
button-giant-text-font-sizetext-button-giant-font-size1.125rem
button-giant-text-line-heighttext-button-giant-line-height1.5rem
button-giant-icon-size1.5rem
button-giant-icon-vertical-margin-0.125rem
button-giant-icon-offset0.75rem
button-rectangle-border-radiusborder-radius0.25rem
button-semi-round-border-radius0.75rem
button-round-border-radius1.5rem
button-filled-border-stylesolid
button-filled-border-width0.0625rem
button-filled-text-transformuppercase
button-filled-tiny-padding0.3125rem, 0.625rem
button-filled-small-padding0.4375rem, 0.875rem
button-filled-medium-padding0.6875rem, 1.125rem
button-filled-large-padding0.8125rem, 1.125rem
button-filled-giant-padding0.9375rem, 1.375rem
button-filled-basic-background-colorcolor-basic-default#edf1f7
button-filled-basic-border-colorcolor-basic-default-border#edf1f7
button-filled-basic-text-colorcolor-basic-800#222b45
button-filled-basic-focus-background-colorcolor-basic-focus#e4e9f2
button-filled-basic-focus-border-colorcolor-basic-focus-border#c5cee0
button-filled-basic-hover-background-colorcolor-basic-hover#f7f9fc
button-filled-basic-hover-border-colorcolor-basic-hover-border#f7f9fc
button-filled-basic-active-background-colorcolor-basic-active#e4e9f2
button-filled-basic-active-border-colorcolor-basic-active-border#e4e9f2
button-filled-basic-disabled-background-colorcolor-basic-disabledrgba(143, 155, 179, 0.24)
button-filled-basic-disabled-border-colorcolor-basic-disabled-borderrgba(143, 155, 179, 0.24)
button-filled-basic-disabled-text-colortext-disabled-colorrgba(143, 155, 179, 0.48)
button-filled-primary-background-colorcolor-primary-default#3366ff
button-filled-primary-border-colorcolor-primary-default-border#3366ff
button-filled-primary-text-colortext-control-color#ffffff
button-filled-primary-focus-background-colorcolor-primary-focus#274bdb
button-filled-primary-focus-border-colorcolor-primary-focus-border#1a34b8
button-filled-primary-hover-background-colorcolor-primary-hover#598bff
button-filled-primary-hover-border-colorcolor-primary-hover-border#598bff
button-filled-primary-active-background-colorcolor-primary-active#274bdb
button-filled-primary-active-border-colorcolor-primary-active-border#274bdb
button-filled-primary-disabled-background-colorcolor-primary-disabledrgba(143, 155, 179, 0.24)
button-filled-primary-disabled-border-colorcolor-primary-disabled-borderrgba(143, 155, 179, 0.24)
button-filled-primary-disabled-text-colortext-disabled-colorrgba(143, 155, 179, 0.48)
button-filled-success-background-colorcolor-success-default#00d68f
button-filled-success-border-colorcolor-success-default-border#00d68f
button-filled-success-text-colortext-control-color#ffffff
button-filled-success-focus-background-colorcolor-success-focus#00b887
button-filled-success-focus-border-colorcolor-success-focus-border#00997a
button-filled-success-hover-background-colorcolor-success-hover#2ce69b
button-filled-success-hover-border-colorcolor-success-hover-border#2ce69b
button-filled-success-active-background-colorcolor-success-active#00b887
button-filled-success-active-border-colorcolor-success-active-border#00b887
button-filled-success-disabled-background-colorcolor-success-disabledrgba(143, 155, 179, 0.24)
button-filled-success-disabled-border-colorcolor-success-disabled-borderrgba(143, 155, 179, 0.24)
button-filled-success-disabled-text-colortext-disabled-colorrgba(143, 155, 179, 0.48)
button-filled-info-background-colorcolor-info-default#0095ff
button-filled-info-border-colorcolor-info-default-border#0095ff
button-filled-info-text-colortext-control-color#ffffff
button-filled-info-focus-background-colorcolor-info-focus#006fd6
button-filled-info-focus-border-colorcolor-info-focus-border#0057c2
button-filled-info-hover-background-colorcolor-info-hover#42aaff
button-filled-info-hover-border-colorcolor-info-hover-border#42aaff
button-filled-info-active-background-colorcolor-info-active#006fd6
button-filled-info-active-border-colorcolor-info-active-border#006fd6
button-filled-info-disabled-background-colorcolor-info-disabledrgba(143, 155, 179, 0.24)
button-filled-info-disabled-border-colorcolor-info-disabled-borderrgba(143, 155, 179, 0.24)
button-filled-info-disabled-text-colortext-disabled-colorrgba(143, 155, 179, 0.48)
button-filled-warning-background-colorcolor-warning-default#ffaa00
button-filled-warning-border-colorcolor-warning-default-border#ffaa00
button-filled-warning-text-colortext-control-color#ffffff
button-filled-warning-focus-background-colorcolor-warning-focus#db8b00
button-filled-warning-focus-border-colorcolor-warning-focus-border#b86e00
button-filled-warning-hover-background-colorcolor-warning-hover#ffc94d
button-filled-warning-hover-border-colorcolor-warning-hover-border#ffc94d
button-filled-warning-active-background-colorcolor-warning-active#db8b00
button-filled-warning-active-border-colorcolor-warning-active-border#db8b00
button-filled-warning-disabled-background-colorcolor-warning-disabledrgba(143, 155, 179, 0.24)
button-filled-warning-disabled-border-colorcolor-warning-disabled-borderrgba(143, 155, 179, 0.24)
button-filled-warning-disabled-text-colortext-disabled-colorrgba(143, 155, 179, 0.48)
button-filled-danger-background-colorcolor-danger-default#ff3d71
button-filled-danger-border-colorcolor-danger-default-border#ff3d71
button-filled-danger-text-colortext-control-color#ffffff
button-filled-danger-focus-background-colorcolor-danger-focus#db2c66
button-filled-danger-focus-border-colorcolor-danger-focus-border#b81d5b
button-filled-danger-hover-background-colorcolor-danger-hover#ff708d
button-filled-danger-hover-border-colorcolor-danger-hover-border#ff708d
button-filled-danger-active-background-colorcolor-danger-active#db2c66
button-filled-danger-active-border-colorcolor-danger-active-border#db2c66
button-filled-danger-disabled-background-colorcolor-danger-disabledrgba(143, 155, 179, 0.24)
button-filled-danger-disabled-border-colorcolor-danger-disabled-borderrgba(143, 155, 179, 0.24)
button-filled-danger-disabled-text-colortext-disabled-colorrgba(143, 155, 179, 0.48)
button-filled-control-background-colorcolor-control-default#ffffff
button-filled-control-border-colorcolor-control-default-border#ffffff
button-filled-control-text-colorcolor-basic-800#222b45
button-filled-control-focus-background-colorcolor-control-focus#edf1f7
button-filled-control-focus-border-colorcolor-control-focus-border#c5cee0
button-filled-control-hover-background-colorcolor-control-hover#f7f9fc
button-filled-control-hover-border-colorcolor-control-hover-border#f7f9fc
button-filled-control-active-background-colorcolor-control-active#edf1f7
button-filled-control-active-border-colorcolor-control-active-border#edf1f7
button-filled-control-disabled-background-colorcolor-control-disabledrgba(143, 155, 179, 0.24)
button-filled-control-disabled-border-colorcolor-control-disabled-borderrgba(143, 155, 179, 0.24)
button-filled-control-disabled-text-colortext-disabled-colorrgba(143, 155, 179, 0.48)
button-outline-border-stylesolid
button-outline-border-width0.0625rem
button-outline-text-transformuppercase
button-outline-focus-inset-shadow-length0, 0, 0, 100vmax
button-outline-tiny-padding0.3125rem, 0.625rem
button-outline-small-padding0.4375rem, 0.875rem
button-outline-medium-padding0.6875rem, 1.125rem
button-outline-large-padding0.8125rem, 1.125rem
button-outline-giant-padding0.9375rem, 1.375rem
button-outline-basic-background-colorcolor-basic-transparent-defaultrgba(143, 155, 179, 0.08)
button-outline-basic-border-colorcolor-basic-transparent-default-border#8f9bb3
button-outline-basic-text-colortext-hint-color#8f9bb3
button-outline-basic-focus-background-colorcolor-basic-transparent-focusrgba(143, 155, 179, 0.24)
button-outline-basic-focus-border-colorcolor-basic-transparent-focus-border#8f9bb3
button-outline-basic-focus-text-colortext-hint-color#8f9bb3
button-outline-basic-hover-background-colorcolor-basic-transparent-hoverrgba(143, 155, 179, 0.16)
button-outline-basic-hover-border-colorcolor-basic-transparent-hover-border#8f9bb3
button-outline-basic-hover-text-colortext-hint-color#8f9bb3
button-outline-basic-active-background-colorcolor-basic-transparent-activergba(143, 155, 179, 0.24)
button-outline-basic-active-border-colorcolor-basic-transparent-active-border#8f9bb3
button-outline-basic-active-text-colortext-hint-color#8f9bb3
button-outline-basic-disabled-background-colorcolor-basic-transparent-disabledrgba(143, 155, 179, 0.16)
button-outline-basic-disabled-border-colorcolor-basic-transparent-disabled-borderrgba(143, 155, 179, 0.24)
button-outline-basic-disabled-text-colortext-disabled-colorrgba(143, 155, 179, 0.48)
button-outline-primary-background-colorcolor-primary-transparent-defaultrgba(51, 102, 255, 0.08)
button-outline-primary-border-colorcolor-primary-transparent-default-border#3366ff
button-outline-primary-text-colortext-primary-color#3366ff
button-outline-primary-focus-background-colorcolor-primary-transparent-focusrgba(51, 102, 255, 0.24)
button-outline-primary-focus-border-colorcolor-primary-transparent-focus-border#3366ff
button-outline-primary-focus-text-colortext-primary-color#3366ff
button-outline-primary-hover-background-colorcolor-primary-transparent-hoverrgba(51, 102, 255, 0.16)
button-outline-primary-hover-border-colorcolor-primary-transparent-hover-border#3366ff
button-outline-primary-hover-text-colortext-primary-color#3366ff
button-outline-primary-active-background-colorcolor-primary-transparent-activergba(51, 102, 255, 0.24)
button-outline-primary-active-border-colorcolor-primary-transparent-active-border#3366ff
button-outline-primary-active-text-colortext-primary-color#3366ff
button-outline-primary-disabled-background-colorcolor-primary-transparent-disabledrgba(143, 155, 179, 0.16)
button-outline-primary-disabled-border-colorcolor-primary-transparent-disabled-borderrgba(143, 155, 179, 0.24)
button-outline-primary-disabled-text-colortext-disabled-colorrgba(143, 155, 179, 0.48)
button-outline-success-background-colorcolor-success-transparent-defaultrgba(0, 214, 143, 0.08)
button-outline-success-border-colorcolor-success-transparent-default-border#00d68f
button-outline-success-text-colortext-success-color#00d68f
button-outline-success-focus-background-colorcolor-success-transparent-focusrgba(0, 214, 143, 0.24)
button-outline-success-focus-border-colorcolor-success-transparent-focus-border#00d68f
button-outline-success-focus-text-colortext-success-color#00d68f
button-outline-success-hover-background-colorcolor-success-transparent-hoverrgba(0, 214, 143, 0.16)
button-outline-success-hover-border-colorcolor-success-transparent-hover-border#00d68f
button-outline-success-hover-text-colortext-success-color#00d68f
button-outline-success-active-background-colorcolor-success-transparent-activergba(0, 214, 143, 0.24)
button-outline-success-active-border-colorcolor-success-transparent-active-border#00d68f
button-outline-success-active-text-colortext-success-color#00d68f
button-outline-success-disabled-background-colorcolor-success-transparent-disabledrgba(143, 155, 179, 0.16)
button-outline-success-disabled-border-colorcolor-success-transparent-disabled-borderrgba(143, 155, 179, 0.24)
button-outline-success-disabled-text-colortext-disabled-colorrgba(143, 155, 179, 0.48)
button-outline-info-background-colorcolor-info-transparent-defaultrgba(0, 149, 255, 0.08)
button-outline-info-border-colorcolor-info-transparent-default-border#0095ff
button-outline-info-text-colortext-info-color#0095ff
button-outline-info-focus-background-colorcolor-info-transparent-focusrgba(0, 149, 255, 0.24)
button-outline-info-focus-border-colorcolor-info-transparent-focus-border#0095ff
button-outline-info-focus-text-colortext-info-color#0095ff
button-outline-info-hover-background-colorcolor-info-transparent-hoverrgba(0, 149, 255, 0.16)
button-outline-info-hover-border-colorcolor-info-transparent-hover-border#0095ff
button-outline-info-hover-text-colortext-info-color#0095ff
button-outline-info-active-background-colorcolor-info-transparent-activergba(0, 149, 255, 0.24)
button-outline-info-active-border-colorcolor-info-transparent-active-border#0095ff
button-outline-info-active-text-colortext-info-color#0095ff
button-outline-info-disabled-background-colorcolor-info-transparent-disabledrgba(143, 155, 179, 0.16)
button-outline-info-disabled-border-colorcolor-info-transparent-disabled-borderrgba(143, 155, 179, 0.24)
button-outline-info-disabled-text-colortext-disabled-colorrgba(143, 155, 179, 0.48)
button-outline-warning-background-colorcolor-warning-transparent-defaultrgba(255, 170, 0, 0.08)
button-outline-warning-border-colorcolor-warning-transparent-default-border#ffaa00
button-outline-warning-text-colortext-warning-color#ffaa00
button-outline-warning-focus-background-colorcolor-warning-transparent-focusrgba(255, 170, 0, 0.24)
button-outline-warning-focus-border-colorcolor-warning-transparent-focus-border#ffaa00
button-outline-warning-focus-text-colortext-warning-color#ffaa00
button-outline-warning-hover-background-colorcolor-warning-transparent-hoverrgba(255, 170, 0, 0.16)
button-outline-warning-hover-border-colorcolor-warning-transparent-hover-border#ffaa00
button-outline-warning-hover-text-colortext-warning-color#ffaa00
button-outline-warning-active-background-colorcolor-warning-transparent-activergba(255, 170, 0, 0.24)
button-outline-warning-active-border-colorcolor-warning-transparent-active-border#ffaa00
button-outline-warning-active-text-colortext-warning-color#ffaa00
button-outline-warning-disabled-background-colorcolor-warning-transparent-disabledrgba(143, 155, 179, 0.16)
button-outline-warning-disabled-border-colorcolor-warning-transparent-disabled-borderrgba(143, 155, 179, 0.24)
button-outline-warning-disabled-text-colortext-disabled-colorrgba(143, 155, 179, 0.48)
button-outline-danger-background-colorcolor-danger-transparent-defaultrgba(255, 61, 113, 0.08)
button-outline-danger-border-colorcolor-danger-transparent-default-border#ff3d71
button-outline-danger-text-colortext-danger-color#ff3d71
button-outline-danger-focus-background-colorcolor-danger-transparent-focusrgba(255, 61, 113, 0.24)
button-outline-danger-focus-border-colorcolor-danger-transparent-focus-border#ff3d71
button-outline-danger-focus-text-colortext-danger-color#ff3d71
button-outline-danger-hover-background-colorcolor-danger-transparent-hoverrgba(255, 61, 113, 0.16)
button-outline-danger-hover-border-colorcolor-danger-transparent-hover-border#ff3d71
button-outline-danger-hover-text-colortext-danger-color#ff3d71
button-outline-danger-active-background-colorcolor-danger-transparent-activergba(255, 61, 113, 0.24)
button-outline-danger-active-border-colorcolor-danger-transparent-active-border#ff3d71
button-outline-danger-active-text-colortext-danger-color#ff3d71
button-outline-danger-disabled-background-colorcolor-danger-transparent-disabledrgba(143, 155, 179, 0.16)
button-outline-danger-disabled-border-colorcolor-danger-transparent-disabled-borderrgba(143, 155, 179, 0.24)
button-outline-danger-disabled-text-colortext-disabled-colorrgba(143, 155, 179, 0.48)
button-outline-control-background-colorcolor-control-transparent-defaultrgba(255, 255, 255, 0.08)
button-outline-control-border-colorcolor-control-transparent-default-border#ffffff
button-outline-control-text-colortext-control-color#ffffff
button-outline-control-focus-background-colorcolor-control-transparent-focusrgba(255, 255, 255, 0.24)
button-outline-control-focus-border-colorcolor-control-transparent-focus-border#ffffff
button-outline-control-focus-text-colortext-control-color#ffffff
button-outline-control-hover-background-colorcolor-control-transparent-hoverrgba(255, 255, 255, 0.16)
button-outline-control-hover-border-colorcolor-control-transparent-hover-border#ffffff
button-outline-control-hover-text-colortext-control-color#ffffff
button-outline-control-active-background-colorcolor-control-transparent-activergba(255, 255, 255, 0.24)
button-outline-control-active-border-colorcolor-control-transparent-active-border#ffffff
button-outline-control-active-text-colortext-control-color#ffffff
button-outline-control-disabled-background-colorcolor-control-transparent-disabledrgba(143, 155, 179, 0.16)
button-outline-control-disabled-border-colorcolor-control-transparent-disabled-borderrgba(143, 155, 179, 0.24)
button-outline-control-disabled-text-colortext-disabled-colorrgba(143, 155, 179, 0.48)
button-ghost-background-colorrgba(0, 0, 0, 0)
button-ghost-border-colorrgba(0, 0, 0, 0)
button-ghost-border-stylesolid
button-ghost-border-width0.0625rem
button-ghost-text-transformuppercase
button-ghost-focus-inset-shadow-length0, 0, 0, 100vmax
button-ghost-tiny-padding0.3125rem, 0.625rem
button-ghost-small-padding0.4375rem, 0.875rem
button-ghost-medium-padding0.6875rem, 1.125rem
button-ghost-large-padding0.8125rem, 1.125rem
button-ghost-giant-padding0.9375rem, 1.375rem
button-ghost-basic-text-colorcolor-basic-600#8f9bb3
button-ghost-basic-focus-background-colorcolor-basic-transparent-200rgba(143, 155, 179, 0.16)
button-ghost-basic-focus-border-colorcolor-basic-transparent-500rgba(143, 155, 179, 0.4)
button-ghost-basic-focus-text-colorcolor-basic-600#8f9bb3
button-ghost-basic-hover-background-colorcolor-basic-transparent-100rgba(143, 155, 179, 0.08)
button-ghost-basic-hover-border-colorrgba(0, 0, 0, 0)
button-ghost-basic-hover-text-colorcolor-basic-600#8f9bb3
button-ghost-basic-active-background-colorcolor-basic-transparent-200rgba(143, 155, 179, 0.16)
button-ghost-basic-active-border-colorrgba(0, 0, 0, 0)
button-ghost-basic-active-text-colorcolor-basic-600#8f9bb3
button-ghost-basic-disabled-background-colorcolor-basic-transparent-200rgba(143, 155, 179, 0.16)
button-ghost-basic-disabled-border-colorrgba(0, 0, 0, 0)
button-ghost-basic-disabled-text-colortext-disabled-colorrgba(143, 155, 179, 0.48)
button-ghost-primary-text-colortext-primary-color#3366ff
button-ghost-primary-focus-background-colorcolor-basic-transparent-200rgba(143, 155, 179, 0.16)
button-ghost-primary-focus-border-colorcolor-basic-transparent-500rgba(143, 155, 179, 0.4)
button-ghost-primary-focus-text-colortext-primary-color#3366ff
button-ghost-primary-hover-background-colorcolor-basic-transparent-100rgba(143, 155, 179, 0.08)
button-ghost-primary-hover-border-colorrgba(0, 0, 0, 0)
button-ghost-primary-hover-text-colortext-primary-color#3366ff
button-ghost-primary-active-background-colorcolor-basic-transparent-200rgba(143, 155, 179, 0.16)
button-ghost-primary-active-border-colorrgba(0, 0, 0, 0)
button-ghost-primary-active-text-colortext-primary-color#3366ff
button-ghost-primary-disabled-background-colorcolor-basic-transparent-200rgba(143, 155, 179, 0.16)
button-ghost-primary-disabled-border-colorrgba(0, 0, 0, 0)
button-ghost-primary-disabled-text-colortext-disabled-colorrgba(143, 155, 179, 0.48)
button-ghost-success-text-colortext-success-color#00d68f
button-ghost-success-focus-background-colorcolor-basic-transparent-200rgba(143, 155, 179, 0.16)
button-ghost-success-focus-border-colorcolor-basic-transparent-500rgba(143, 155, 179, 0.4)
button-ghost-success-focus-text-colortext-success-color#00d68f
button-ghost-success-hover-background-colorcolor-basic-transparent-100rgba(143, 155, 179, 0.08)
button-ghost-success-hover-border-colorrgba(0, 0, 0, 0)
button-ghost-success-hover-text-colortext-success-color#00d68f
button-ghost-success-active-background-colorcolor-basic-transparent-200rgba(143, 155, 179, 0.16)
button-ghost-success-active-border-colorrgba(0, 0, 0, 0)
button-ghost-success-active-text-colortext-success-color#00d68f
button-ghost-success-disabled-background-colorcolor-basic-transparent-200rgba(143, 155, 179, 0.16)
button-ghost-success-disabled-border-colorrgba(0, 0, 0, 0)
button-ghost-success-disabled-text-colortext-disabled-colorrgba(143, 155, 179, 0.48)
button-ghost-info-text-colortext-info-color#0095ff
button-ghost-info-focus-background-colorcolor-basic-transparent-200rgba(143, 155, 179, 0.16)
button-ghost-info-focus-border-colorcolor-basic-transparent-500rgba(143, 155, 179, 0.4)
button-ghost-info-focus-text-colortext-info-color#0095ff
button-ghost-info-hover-background-colorcolor-basic-transparent-100rgba(143, 155, 179, 0.08)
button-ghost-info-hover-border-colorrgba(0, 0, 0, 0)
button-ghost-info-hover-text-colortext-info-color#0095ff
button-ghost-info-active-background-colorcolor-basic-transparent-200rgba(143, 155, 179, 0.16)
button-ghost-info-active-border-colorrgba(0, 0, 0, 0)
button-ghost-info-active-text-colortext-info-color#0095ff
button-ghost-info-disabled-background-colorcolor-basic-transparent-200rgba(143, 155, 179, 0.16)
button-ghost-info-disabled-border-colorrgba(0, 0, 0, 0)
button-ghost-info-disabled-text-colortext-disabled-colorrgba(143, 155, 179, 0.48)
button-ghost-warning-text-colortext-warning-color#ffaa00
button-ghost-warning-focus-background-colorcolor-basic-transparent-200rgba(143, 155, 179, 0.16)
button-ghost-warning-focus-border-colorcolor-basic-transparent-500rgba(143, 155, 179, 0.4)
button-ghost-warning-focus-text-colortext-warning-color#ffaa00
button-ghost-warning-hover-background-colorcolor-basic-transparent-100rgba(143, 155, 179, 0.08)
button-ghost-warning-hover-border-colorrgba(0, 0, 0, 0)
button-ghost-warning-hover-text-colortext-warning-color#ffaa00
button-ghost-warning-active-background-colorcolor-basic-transparent-200rgba(143, 155, 179, 0.16)
button-ghost-warning-active-border-colorrgba(0, 0, 0, 0)
button-ghost-warning-active-text-colortext-warning-color#ffaa00
button-ghost-warning-disabled-background-colorcolor-basic-transparent-200rgba(143, 155, 179, 0.16)
button-ghost-warning-disabled-border-colorrgba(0, 0, 0, 0)
button-ghost-warning-disabled-text-colortext-disabled-colorrgba(143, 155, 179, 0.48)
button-ghost-danger-text-colortext-danger-color#ff3d71
button-ghost-danger-focus-background-colorcolor-basic-transparent-200rgba(143, 155, 179, 0.16)
button-ghost-danger-focus-border-colorcolor-basic-transparent-500rgba(143, 155, 179, 0.4)
button-ghost-danger-focus-text-colortext-danger-color#ff3d71
button-ghost-danger-hover-background-colorcolor-basic-transparent-100rgba(143, 155, 179, 0.08)
button-ghost-danger-hover-border-colorrgba(0, 0, 0, 0)
button-ghost-danger-hover-text-colortext-danger-color#ff3d71
button-ghost-danger-active-background-colorcolor-basic-transparent-200rgba(143, 155, 179, 0.16)
button-ghost-danger-active-border-colorrgba(0, 0, 0, 0)
button-ghost-danger-active-text-colortext-danger-color#ff3d71
button-ghost-danger-disabled-background-colorcolor-basic-transparent-200rgba(143, 155, 179, 0.16)
button-ghost-danger-disabled-border-colorrgba(0, 0, 0, 0)
button-ghost-danger-disabled-text-colortext-disabled-colorrgba(143, 155, 179, 0.48)
button-ghost-control-text-colorcolor-basic-100#ffffff
button-ghost-control-focus-background-colorcolor-basic-transparent-200rgba(143, 155, 179, 0.16)
button-ghost-control-focus-border-colorcolor-basic-transparent-500rgba(143, 155, 179, 0.4)
button-ghost-control-focus-text-colorcolor-basic-100#ffffff
button-ghost-control-hover-background-colorcolor-basic-transparent-100rgba(143, 155, 179, 0.08)
button-ghost-control-hover-border-colorrgba(0, 0, 0, 0)
button-ghost-control-hover-text-colorcolor-basic-100#ffffff
button-ghost-control-active-background-colorcolor-basic-transparent-200rgba(143, 155, 179, 0.16)
button-ghost-control-active-border-colorrgba(0, 0, 0, 0)
button-ghost-control-active-text-colorcolor-basic-100#ffffff
button-ghost-control-disabled-background-colorcolor-basic-transparent-200rgba(143, 155, 179, 0.16)
button-ghost-control-disabled-border-colorrgba(0, 0, 0, 0)
button-ghost-control-disabled-text-colortext-disabled-colorrgba(143, 155, 179, 0.48)
button-hero-border-colorrgba(0, 0, 0, 0)
button-hero-border-stylesolid
button-hero-border-widthunknown
button-hero-text-transformuppercase
button-hero-tiny-padding0.375rem, 0.6875rem
button-hero-small-padding0.5rem, 0.9375rem
button-hero-medium-padding0.75rem, 1.1875rem
button-hero-large-padding0.875rem, 1.1875rem
button-hero-giant-padding1rem, 1.4375rem
button-hero-shadow0, 0, rgba(0, 0, 0, 0)
button-hero-text-shadowshadow0, 0.5rem, 1rem, 0, rgba(44, 51, 73, 0.1)
button-hero-bevel-size0, 0, 0, 0
button-hero-glow-size0, 0, 0, 0
button-hero-outline-coloroutline-colorrgba(143, 155, 179, 0.16)
button-hero-outline-widthoutline-width0.375rem
button-hero-basic-text-colorcolor-basic-600#8f9bb3
button-hero-basic-bevel-colorcolor-basic-600#8f9bb3
button-hero-basic-glow-colorcolor-basic-700#2e3a59
button-hero-basic-left-background-colorcolor-basic-200#f7f9fc
button-hero-basic-right-background-colorcolor-basic-default#edf1f7
button-hero-basic-focus-left-background-colorcolor-basic-300#edf1f7
button-hero-basic-focus-right-background-colorcolor-basic-focus#e4e9f2
button-hero-basic-hover-left-background-colorcolor-basic-100#ffffff
button-hero-basic-hover-right-background-colorcolor-basic-hover#f7f9fc
button-hero-basic-active-left-background-colorcolor-basic-300#edf1f7
button-hero-basic-active-right-background-colorcolor-basic-active#e4e9f2
button-hero-basic-disabled-background-colorcolor-basic-disabledrgba(143, 155, 179, 0.24)
button-hero-basic-disabled-text-colortext-disabled-colorrgba(143, 155, 179, 0.48)
button-hero-primary-text-colortext-control-color#ffffff
button-hero-primary-bevel-colorcolor-primary-600#274bdb
button-hero-primary-glow-colorcolor-primary-700#1a34b8
button-hero-primary-left-background-colorcolor-primary-400#598bff
button-hero-primary-right-background-colorcolor-primary-default#3366ff
button-hero-primary-focus-left-background-colorcolor-primary-500#3366ff
button-hero-primary-focus-right-background-colorcolor-primary-focus#274bdb
button-hero-primary-hover-left-background-colorcolor-primary-300#a6c1ff
button-hero-primary-hover-right-background-colorcolor-primary-hover#598bff
button-hero-primary-active-left-background-colorcolor-primary-500#3366ff
button-hero-primary-active-right-background-colorcolor-primary-active#274bdb
button-hero-primary-disabled-background-colorcolor-primary-disabledrgba(143, 155, 179, 0.24)
button-hero-primary-disabled-text-colortext-disabled-colorrgba(143, 155, 179, 0.48)
button-hero-success-text-colortext-control-color#ffffff
button-hero-success-bevel-colorcolor-success-600#00b887
button-hero-success-glow-colorcolor-success-700#00997a
button-hero-success-left-background-colorcolor-success-400#2ce69b
button-hero-success-right-background-colorcolor-success-default#00d68f
button-hero-success-focus-left-background-colorcolor-success-500#00d68f
button-hero-success-focus-right-background-colorcolor-success-focus#00b887
button-hero-success-hover-left-background-colorcolor-success-300#8cfac7
button-hero-success-hover-right-background-colorcolor-success-hover#2ce69b
button-hero-success-active-left-background-colorcolor-success-500#00d68f
button-hero-success-active-right-background-colorcolor-success-active#00b887
button-hero-success-disabled-background-colorcolor-success-disabledrgba(143, 155, 179, 0.24)
button-hero-success-disabled-text-colortext-disabled-colorrgba(143, 155, 179, 0.48)
button-hero-info-text-colortext-control-color#ffffff
button-hero-info-bevel-colorcolor-info-600#006fd6
button-hero-info-glow-colorcolor-info-700#0057c2
button-hero-info-left-background-colorcolor-info-400#42aaff
button-hero-info-right-background-colorcolor-info-default#0095ff
button-hero-info-focus-left-background-colorcolor-info-500#0095ff
button-hero-info-focus-right-background-colorcolor-info-focus#006fd6
button-hero-info-hover-left-background-colorcolor-info-300#94cbff
button-hero-info-hover-right-background-colorcolor-info-hover#42aaff
button-hero-info-active-left-background-colorcolor-info-500#0095ff
button-hero-info-active-right-background-colorcolor-info-active#006fd6
button-hero-info-disabled-background-colorcolor-info-disabledrgba(143, 155, 179, 0.24)
button-hero-info-disabled-text-colortext-disabled-colorrgba(143, 155, 179, 0.48)
button-hero-warning-text-colortext-control-color#ffffff
button-hero-warning-bevel-colorcolor-warning-600#db8b00
button-hero-warning-glow-colorcolor-warning-700#b86e00
button-hero-warning-left-background-colorcolor-warning-400#ffc94d
button-hero-warning-right-background-colorcolor-warning-default#ffaa00
button-hero-warning-focus-left-background-colorcolor-warning-500#ffaa00
button-hero-warning-focus-right-background-colorcolor-warning-focus#db8b00
button-hero-warning-hover-left-background-colorcolor-warning-300#ffe59e
button-hero-warning-hover-right-background-colorcolor-warning-hover#ffc94d
button-hero-warning-active-left-background-colorcolor-warning-500#ffaa00
button-hero-warning-active-right-background-colorcolor-warning-active#db8b00
button-hero-warning-disabled-background-colorcolor-warning-disabledrgba(143, 155, 179, 0.24)
button-hero-warning-disabled-text-colortext-disabled-colorrgba(143, 155, 179, 0.48)
button-hero-danger-text-colortext-control-color#ffffff
button-hero-danger-bevel-colorcolor-danger-600#db2c66
button-hero-danger-glow-colorcolor-danger-700#b81d5b
button-hero-danger-left-background-colorcolor-danger-400#ff708d
button-hero-danger-right-background-colorcolor-danger-default#ff3d71
button-hero-danger-focus-left-background-colorcolor-danger-500#ff3d71
button-hero-danger-focus-right-background-colorcolor-danger-focus#db2c66
button-hero-danger-hover-left-background-colorcolor-danger-300#ffa8b4
button-hero-danger-hover-right-background-colorcolor-danger-hover#ff708d
button-hero-danger-active-left-background-colorcolor-danger-500#ff3d71
button-hero-danger-active-right-background-colorcolor-danger-active#db2c66
button-hero-danger-disabled-background-colorcolor-danger-disabledrgba(143, 155, 179, 0.24)
button-hero-danger-disabled-text-colortext-disabled-colorrgba(143, 155, 179, 0.48)
button-hero-control-text-colorcolor-basic-800#222b45
button-hero-control-bevel-colorcolor-basic-600#8f9bb3
button-hero-control-glow-colorcolor-basic-700#2e3a59
button-hero-control-left-background-colorcolor-control-default#ffffff
button-hero-control-right-background-colorcolor-control-default#ffffff
button-hero-control-focus-left-background-colorcolor-basic-200#f7f9fc
button-hero-control-focus-right-background-colorcolor-control-focus#edf1f7
button-hero-control-hover-left-background-colorcolor-basic-100#ffffff
button-hero-control-hover-right-background-colorcolor-control-hover#f7f9fc
button-hero-control-active-left-background-colorcolor-basic-200#f7f9fc
button-hero-control-active-right-background-colorcolor-control-active#edf1f7
button-hero-control-disabled-background-colorcolor-basic-transparent-300rgba(143, 155, 179, 0.24)
button-hero-control-disabled-text-colortext-disabled-colorrgba(143, 155, 179, 0.48)
Input
Previous page
Button Group
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.