Toggle theme
NbToggleComponent
| Name | Theme Variable | Default Value | Description |
| toggle-height | 1.875rem | ||
| toggle-width | 3.125rem | ||
| toggle-border-width | 1px | ||
| toggle-border-radius | 100px | ||
| toggle-outline-width | outline-width | 0.375rem | |
| toggle-outline-color | outline-color | rgba(143, 155, 179, 0.16) | |
| toggle-switcher-size | 1.75rem | ||
| toggle-switcher-icon-size | 0.75rem | ||
| toggle-text-font-family | text-subtitle-2-font-family | Open Sans, sans-serif | |
| toggle-text-font-size | text-subtitle-2-font-size | 0.8125rem | |
| toggle-text-font-weight | text-subtitle-2-font-weight | 600 | |
| toggle-text-line-height | text-subtitle-2-line-height | 1.5rem | |
| toggle-cursor | pointer | ||
| toggle-disabled-cursor | default | ||
| toggle-basic-text-color | text-basic-color | #222b45 | |
| toggle-basic-background-color | color-basic-transparent-default | rgba(143, 155, 179, 0.08) | |
| toggle-basic-border-color | color-basic-transparent-default-border | #8f9bb3 | |
| toggle-basic-checked-background-color | color-primary-default | #3366ff | |
| toggle-basic-checked-border-color | color-primary-default-border | #3366ff | |
| toggle-basic-checked-switcher-background-color | background-basic-color-1 | #ffffff | |
| toggle-basic-checked-switcher-checkmark-color | color-primary-default | #3366ff | |
| toggle-basic-focus-background-color | color-primary-transparent-focus | rgba(51, 102, 255, 0.24) | |
| toggle-basic-focus-border-color | color-primary-transparent-focus-border | #3366ff | |
| toggle-basic-focus-checked-background-color | color-primary-focus | #274bdb | |
| toggle-basic-focus-checked-border-color | color-primary-focus-border | #1a34b8 | |
| toggle-basic-hover-background-color | color-primary-transparent-hover | rgba(51, 102, 255, 0.16) | |
| toggle-basic-hover-border-color | color-primary-transparent-hover-border | #3366ff | |
| toggle-basic-hover-checked-background-color | color-primary-hover | #598bff | |
| toggle-basic-hover-checked-border-color | color-primary-hover-border | #598bff | |
| toggle-basic-active-background-color | color-primary-transparent-active | rgba(51, 102, 255, 0.24) | |
| toggle-basic-active-border-color | color-primary-transparent-active-border | #3366ff | |
| toggle-basic-active-checked-background-color | color-primary-active | #274bdb | |
| toggle-basic-active-checked-border-color | color-primary-active-border | #274bdb | |
| toggle-basic-disabled-background-color | color-basic-transparent-disabled | rgba(143, 155, 179, 0.16) | |
| toggle-basic-disabled-border-color | color-basic-transparent-disabled-border | rgba(143, 155, 179, 0.24) | |
| toggle-basic-disabled-switcher-background-color | color-basic-disabled | rgba(143, 155, 179, 0.24) | |
| toggle-basic-disabled-checked-switcher-checkmark-color | text-control-color | #ffffff | |
| toggle-basic-disabled-text-color | text-disabled-color | rgba(143, 155, 179, 0.48) | |
| toggle-primary-text-color | text-basic-color | #222b45 | |
| toggle-primary-background-color | color-primary-transparent-default | rgba(51, 102, 255, 0.08) | |
| toggle-primary-border-color | color-primary-transparent-default-border | #3366ff | |
| toggle-primary-checked-background-color | color-primary-default | #3366ff | |
| toggle-primary-checked-border-color | color-primary-default-border | #3366ff | |
| toggle-primary-checked-switcher-background-color | background-basic-color-1 | #ffffff | |
| toggle-primary-checked-switcher-checkmark-color | color-primary-default | #3366ff | |
| toggle-primary-focus-background-color | color-primary-transparent-focus | rgba(51, 102, 255, 0.24) | |
| toggle-primary-focus-border-color | color-primary-transparent-focus-border | #3366ff | |
| toggle-primary-focus-checked-background-color | color-primary-focus | #274bdb | |
| toggle-primary-focus-checked-border-color | color-primary-focus-border | #1a34b8 | |
| toggle-primary-hover-background-color | color-primary-transparent-hover | rgba(51, 102, 255, 0.16) | |
| toggle-primary-hover-border-color | color-primary-transparent-hover-border | #3366ff | |
| toggle-primary-hover-checked-background-color | color-primary-hover | #598bff | |
| toggle-primary-hover-checked-border-color | color-primary-hover-border | #598bff | |
| toggle-primary-active-background-color | color-primary-transparent-active | rgba(51, 102, 255, 0.24) | |
| toggle-primary-active-border-color | color-primary-transparent-active-border | #3366ff | |
| toggle-primary-active-checked-background-color | color-primary-active | #274bdb | |
| toggle-primary-active-checked-border-color | color-primary-active-border | #274bdb | |
| toggle-primary-disabled-background-color | color-basic-transparent-disabled | rgba(143, 155, 179, 0.16) | |
| toggle-primary-disabled-border-color | color-basic-transparent-disabled-border | rgba(143, 155, 179, 0.24) | |
| toggle-primary-disabled-switcher-background-color | color-basic-disabled | rgba(143, 155, 179, 0.24) | |
| toggle-primary-disabled-checked-switcher-checkmark-color | text-control-color | #ffffff | |
| toggle-primary-disabled-text-color | text-disabled-color | rgba(143, 155, 179, 0.48) | |
| toggle-success-text-color | text-basic-color | #222b45 | |
| toggle-success-background-color | color-success-transparent-default | rgba(0, 214, 143, 0.08) | |
| toggle-success-border-color | color-success-transparent-default-border | #00d68f | |
| toggle-success-checked-background-color | color-success-default | #00d68f | |
| toggle-success-checked-border-color | color-success-default-border | #00d68f | |
| toggle-success-checked-switcher-background-color | background-basic-color-1 | #ffffff | |
| toggle-success-checked-switcher-checkmark-color | color-success-default | #00d68f | |
| toggle-success-focus-background-color | color-success-transparent-focus | rgba(0, 214, 143, 0.24) | |
| toggle-success-focus-border-color | color-success-transparent-focus-border | #00d68f | |
| toggle-success-focus-checked-background-color | color-success-focus | #00b887 | |
| toggle-success-focus-checked-border-color | color-success-focus-border | #00997a | |
| toggle-success-hover-background-color | color-success-transparent-hover | rgba(0, 214, 143, 0.16) | |
| toggle-success-hover-border-color | color-success-transparent-hover-border | #00d68f | |
| toggle-success-hover-checked-background-color | color-success-hover | #2ce69b | |
| toggle-success-hover-checked-border-color | color-success-hover-border | #2ce69b | |
| toggle-success-active-background-color | color-success-transparent-active | rgba(0, 214, 143, 0.24) | |
| toggle-success-active-border-color | color-success-transparent-active-border | #00d68f | |
| toggle-success-active-checked-background-color | color-success-active | #00b887 | |
| toggle-success-active-checked-border-color | color-success-active-border | #00b887 | |
| toggle-success-disabled-background-color | color-basic-transparent-disabled | rgba(143, 155, 179, 0.16) | |
| toggle-success-disabled-border-color | color-basic-transparent-disabled-border | rgba(143, 155, 179, 0.24) | |
| toggle-success-disabled-switcher-background-color | color-basic-disabled | rgba(143, 155, 179, 0.24) | |
| toggle-success-disabled-checked-switcher-checkmark-color | text-control-color | #ffffff | |
| toggle-success-disabled-text-color | text-disabled-color | rgba(143, 155, 179, 0.48) | |
| toggle-info-text-color | text-basic-color | #222b45 | |
| toggle-info-background-color | color-info-transparent-default | rgba(0, 149, 255, 0.08) | |
| toggle-info-border-color | color-info-transparent-default-border | #0095ff | |
| toggle-info-checked-background-color | color-info-default | #0095ff | |
| toggle-info-checked-border-color | color-info-default-border | #0095ff | |
| toggle-info-checked-switcher-background-color | background-basic-color-1 | #ffffff | |
| toggle-info-checked-switcher-checkmark-color | color-info-default | #0095ff | |
| toggle-info-focus-background-color | color-info-transparent-focus | rgba(0, 149, 255, 0.24) | |
| toggle-info-focus-border-color | color-info-transparent-focus-border | #0095ff | |
| toggle-info-focus-checked-background-color | color-info-focus | #006fd6 | |
| toggle-info-focus-checked-border-color | color-info-focus-border | #0057c2 | |
| toggle-info-hover-background-color | color-info-transparent-hover | rgba(0, 149, 255, 0.16) | |
| toggle-info-hover-border-color | color-info-transparent-hover-border | #0095ff | |
| toggle-info-hover-checked-background-color | color-info-hover | #42aaff | |
| toggle-info-hover-checked-border-color | color-info-hover-border | #42aaff | |
| toggle-info-active-background-color | color-info-transparent-active | rgba(0, 149, 255, 0.24) | |
| toggle-info-active-border-color | color-info-transparent-active-border | #0095ff | |
| toggle-info-active-checked-background-color | color-info-active | #006fd6 | |
| toggle-info-active-checked-border-color | color-info-active-border | #006fd6 | |
| toggle-info-disabled-background-color | color-basic-transparent-disabled | rgba(143, 155, 179, 0.16) | |
| toggle-info-disabled-border-color | color-basic-transparent-disabled-border | rgba(143, 155, 179, 0.24) | |
| toggle-info-disabled-switcher-background-color | color-basic-disabled | rgba(143, 155, 179, 0.24) | |
| toggle-info-disabled-checked-switcher-checkmark-color | text-control-color | #ffffff | |
| toggle-info-disabled-text-color | text-disabled-color | rgba(143, 155, 179, 0.48) | |
| toggle-warning-text-color | text-basic-color | #222b45 | |
| toggle-warning-background-color | color-warning-transparent-default | rgba(255, 170, 0, 0.08) | |
| toggle-warning-border-color | color-warning-transparent-default-border | #ffaa00 | |
| toggle-warning-checked-background-color | color-warning-default | #ffaa00 | |
| toggle-warning-checked-border-color | color-warning-default-border | #ffaa00 | |
| toggle-warning-checked-switcher-background-color | background-basic-color-1 | #ffffff | |
| toggle-warning-checked-switcher-checkmark-color | color-warning-default | #ffaa00 | |
| toggle-warning-focus-background-color | color-warning-transparent-focus | rgba(255, 170, 0, 0.24) | |
| toggle-warning-focus-border-color | color-warning-transparent-focus-border | #ffaa00 | |
| toggle-warning-focus-checked-background-color | color-warning-focus | #db8b00 | |
| toggle-warning-focus-checked-border-color | color-warning-focus-border | #b86e00 | |
| toggle-warning-hover-background-color | color-warning-transparent-hover | rgba(255, 170, 0, 0.16) | |
| toggle-warning-hover-border-color | color-warning-transparent-hover-border | #ffaa00 | |
| toggle-warning-hover-checked-background-color | color-warning-hover | #ffc94d | |
| toggle-warning-hover-checked-border-color | color-warning-hover-border | #ffc94d | |
| toggle-warning-active-background-color | color-warning-transparent-active | rgba(255, 170, 0, 0.24) | |
| toggle-warning-active-border-color | color-warning-transparent-active-border | #ffaa00 | |
| toggle-warning-active-checked-background-color | color-warning-active | #db8b00 | |
| toggle-warning-active-checked-border-color | color-warning-active-border | #db8b00 | |
| toggle-warning-disabled-background-color | color-basic-transparent-disabled | rgba(143, 155, 179, 0.16) | |
| toggle-warning-disabled-border-color | color-basic-transparent-disabled-border | rgba(143, 155, 179, 0.24) | |
| toggle-warning-disabled-switcher-background-color | color-basic-disabled | rgba(143, 155, 179, 0.24) | |
| toggle-warning-disabled-checked-switcher-checkmark-color | text-control-color | #ffffff | |
| toggle-warning-disabled-text-color | text-disabled-color | rgba(143, 155, 179, 0.48) | |
| toggle-danger-text-color | text-basic-color | #222b45 | |
| toggle-danger-background-color | color-danger-transparent-default | rgba(255, 61, 113, 0.08) | |
| toggle-danger-border-color | color-danger-transparent-default-border | #ff3d71 | |
| toggle-danger-checked-background-color | color-danger-default | #ff3d71 | |
| toggle-danger-checked-border-color | color-danger-default-border | #ff3d71 | |
| toggle-danger-checked-switcher-background-color | background-basic-color-1 | #ffffff | |
| toggle-danger-checked-switcher-checkmark-color | color-danger-default | #ff3d71 | |
| toggle-danger-focus-background-color | color-danger-transparent-focus | rgba(255, 61, 113, 0.24) | |
| toggle-danger-focus-border-color | color-danger-transparent-focus-border | #ff3d71 | |
| toggle-danger-focus-checked-background-color | color-danger-focus | #db2c66 | |
| toggle-danger-focus-checked-border-color | color-danger-focus-border | #b81d5b | |
| toggle-danger-hover-background-color | color-danger-transparent-hover | rgba(255, 61, 113, 0.16) | |
| toggle-danger-hover-border-color | color-danger-transparent-hover-border | #ff3d71 | |
| toggle-danger-hover-checked-background-color | color-danger-hover | #ff708d | |
| toggle-danger-hover-checked-border-color | color-danger-hover-border | #ff708d | |
| toggle-danger-active-background-color | color-danger-transparent-active | rgba(255, 61, 113, 0.24) | |
| toggle-danger-active-border-color | color-danger-transparent-active-border | #ff3d71 | |
| toggle-danger-active-checked-background-color | color-danger-active | #db2c66 | |
| toggle-danger-active-checked-border-color | color-danger-active-border | #db2c66 | |
| toggle-danger-disabled-background-color | color-basic-transparent-disabled | rgba(143, 155, 179, 0.16) | |
| toggle-danger-disabled-border-color | color-basic-transparent-disabled-border | rgba(143, 155, 179, 0.24) | |
| toggle-danger-disabled-switcher-background-color | color-basic-disabled | rgba(143, 155, 179, 0.24) | |
| toggle-danger-disabled-checked-switcher-checkmark-color | text-control-color | #ffffff | |
| toggle-danger-disabled-text-color | text-disabled-color | rgba(143, 155, 179, 0.48) | |
| toggle-control-text-color | color-basic-100 | #ffffff | |
| toggle-control-background-color | color-control-transparent-default | rgba(255, 255, 255, 0.08) | |
| toggle-control-border-color | color-control-transparent-default-border | #ffffff | |
| toggle-control-checked-background-color | color-control-transparent-default | rgba(255, 255, 255, 0.08) | |
| toggle-control-checked-border-color | color-control-transparent-default-border | #ffffff | |
| toggle-control-checked-switcher-background-color | color-control-default | #ffffff | |
| toggle-control-checked-switcher-checkmark-color | color-basic-800 | #222b45 | |
| toggle-control-focus-background-color | color-control-transparent-focus | rgba(255, 255, 255, 0.24) | |
| toggle-control-focus-border-color | color-control-transparent-focus-border | #ffffff | |
| toggle-control-focus-checked-background-color | color-control-transparent-focus | rgba(255, 255, 255, 0.24) | |
| toggle-control-focus-checked-border-color | color-control-transparent-focus-border | #ffffff | |
| toggle-control-hover-background-color | color-control-transparent-hover | rgba(255, 255, 255, 0.16) | |
| toggle-control-hover-border-color | color-control-transparent-hover-border | #ffffff | |
| toggle-control-hover-checked-background-color | color-control-transparent-hover | rgba(255, 255, 255, 0.16) | |
| toggle-control-hover-checked-border-color | color-control-transparent-hover-border | #ffffff | |
| toggle-control-active-background-color | color-control-transparent-active | rgba(255, 255, 255, 0.24) | |
| toggle-control-active-border-color | color-control-transparent-active-border | #ffffff | |
| toggle-control-active-checked-background-color | color-control-transparent-active | rgba(255, 255, 255, 0.24) | |
| toggle-control-active-checked-border-color | color-control-transparent-active-border | #ffffff | |
| toggle-control-disabled-background-color | color-control-transparent-disabled | rgba(143, 155, 179, 0.16) | |
| toggle-control-disabled-border-color | color-control-transparent-disabled-border | rgba(143, 155, 179, 0.24) | |
| toggle-control-disabled-switcher-background-color | color-basic-transparent-600 | rgba(143, 155, 179, 0.48) | |
| toggle-control-disabled-checked-switcher-checkmark-color | color-basic-100 | #ffffff | |
| toggle-control-disabled-text-color | text-control-color | #ffffff |
Previous page
Radio
Next page
Need some help or found an issue?
Ask on Stack Overflow with tag `nebular` or post an issue on GitHub.