@clr/ui

# Accordion ## CSS Custom Properties | CSS Custom Property | Description | | --------------------------------------------------- | ------------------------------------------------------------------- | | --clr-accordion-text-color | Text color of the accordion component. | | --clr-accordion-text-color-hover | Text color of the accordion header when hovered. | | --clr-accordion-text-color-active | Text color of the accordion header when active. | | --clr-accordion-text-color-selected | Text color of the accordion header when selected. | | --clr-accordion-panel-disabled-color | Text color of the accordion header when disabled. | | --clr-accordion-active-background-color | Background color of the active accordion panel. | | --clr-accordion-content-background-color | Background color of the accordion content area. | | --clr-accordion-content-color | Color of the text in the accordion content area. | | --clr-accordion-content-font-size | DEPRECATED Font size of the text in the accordion content area. | | --clr-accordion-header-background-color | Background color of the accordion header. | | --clr-accordion-header-disabled-background-color | Background color of the accordion header when disabled. | | --clr-accordion-header-hover-background-color | Background color of the accordion header on hover. | | --clr-accordion-header-active-background-color | Background color of the accordion header when active. | | --clr-accordion-header-open-hover-background-color | Background color of the accordion header when opened and hovered. | | --clr-accordion-header-open-active-background-color | Background color of the accordion header when opened and :active. | | --clr-accordion-error-color | Color representing an error state in the accordion. | | --clr-accordion-complete-color | Color representing a completed state in the accordion. | | --clr-accordion-border-color | Color of the accordion border. | | --clr-accordion-border-radius | Border radius of the accordion. | | --clr-accordion-border-left-color-complete | Color of the left border in the accordion for the complete state. | | --clr-accordion-border-left-color-error | Color of the left border in the accordion for the error state. | | --clr-accordion-header-left-indicator | Left indicator style for the accordion header. | | --clr-accordion-header-left-current-indicator | Left indicator style for the accordion header when on current step. | | --clr-accordion-step-title-min-width | Sets the min-width for the step title. | ## CSS Classes | Class Name | Description | | ------------------------------------ | ----------------------------------------------------- | | clr-accordion | Accordion component. | | clr-accordion-panel | Panel within the accordion. | | clr-accordion-header | Header section of an accordion panel. | | clr-accordion-number | Number or step indicator within the accordion. | | clr-accordion-header-button | Clickable button within the accordion header. | | clr-accordion-status | Status indicator within the accordion header. | | clr-accordion-title | Title text within the accordion header. | | clr-accordion-header-has-description | Accordion header with a description. | | clr-accordion-description | Description text within the accordion header. | | clr-accordion-content | Content section of an accordion panel. | | clr-accordion-content-region | Content region section of an accordion panel. | | clr-accordion-inner-content | Inner content section within the accordion content. | | clr-accordion-angle | Angle or arrow indicator within the accordion header. | | clr-accordion-error-icon | Error icon within the accordion header. | | clr-accordion-complete-icon | Complete icon within the accordion header. | | clr-accordion-panel-open | Open or expanded accordion panel. | | clr-accordion-panel-complete | Complete state of an accordion panel. | | clr-accordion-panel-error | Error state of an accordion panel. | | clr-accordion-panel-disabled | Disabled state of an accordion panel. | | clr-stepper-forms | Stepper forms mode for the accordion. | | clr-step-button | Step button within the accordion. | # Alert ## CSS Custom Properties | CSS Custom Property | Description | | ---------------------------------------------- | ----------------------------------------------------------------- | | --clr-alert-action-color | Alerts action default font color | | --clr-alert-action-active-color | Alerts action default font color on focus, hover, active | | --clr-alert-close-icon-color | Close icon default color | | --clr-alert-close-icon-hover-color | Close icon default color on hover | | --clr-app-level-alert-color | Default font color for app level alerts | | --clr-app-alert-close-icon-color | Close icon default color for app level alerts | | --clr-alert-borderradius | Border radius | | --clr-alert-info-bg-color | Info alert background color | | --clr-alert-info-font-color | Info alert font color | | --clr-alert-info-border-color | Info alert border color | | --clr-alert-info-icon-color | Info alert icon color | | --clr-alert-info-action-color | Info alert action font color | | --clr-alert-info-action-active-color | Info alert action font color on focus, hover, active | | --clr-alert-info-close-icon-color | Info alert close icon color | | --clr-alert-info-close-icon-hover-color | Info alert close icon color on hover | | --clr-alert-success-bg-color | Success alert background color | | --clr-alert-success-font-color | Success alert font color | | --clr-alert-success-border-color | Success alert border color | | --clr-alert-success-icon-color | Success alert icon color | | --clr-alert-success-action-color | Success alert action font color | | --clr-alert-success-action-active-color | Success alert action font color on focus, hover, active | | --clr-alert-success-close-icon-color | Success alert close icon color | | --clr-alert-success-close-icon-hover-color | Success alert close icon color on hover | | --clr-alert-warning-bg-color | Warning alert background color | | --clr-alert-warning-font-color | Warning alert font color | | --clr-alert-warning-border-color | Warning alert border color | | --clr-alert-warning-icon-color | Warning alert icon color | | --clr-alert-warning-action-color | Warning alert action font color | | --clr-alert-warning-action-active-color | Warning alert action font color on focus, hover, active | | --clr-alert-warning-close-icon-color | Warning alert close icon color | | --clr-alert-warning-close-icon-hover-color | Warning alert close icon color on hover | | --clr-alert-danger-bg-color | Danger alert background color | | --clr-alert-danger-font-color | Danger alert font color | | --clr-alert-danger-border-color | Danger alert border color | | --clr-alert-danger-icon-color | Danger alert icon color | | --clr-alert-danger-action-color | Danger alert action font color | | --clr-alert-danger-action-active-color | Danger alert action font color on focus, hover, active | | --clr-alert-danger-close-icon-color | Danger alert close icon color | | --clr-alert-danger-close-icon-hover-color | Danger alert close icon color on hover | | --clr-alert-neutral-bg-color | Neutral alert background color | | --clr-alert-neutral-font-color | Neutral alert font color | | --clr-alert-neutral-border-color | Neutral alert border color | | --clr-alert-neutral-icon-color | Neutral alert icon color | | --clr-alert-neutral-action-color | Neutral alert action font color | | --clr-alert-neutral-action-active-color | Neutral alert action font color on focus, hover, active | | --clr-alert-neutral-close-icon-color | Neutral alert close icon color | | --clr-alert-neutral-close-icon-hover-color | Neutral alert close icon color on hover | | --clr-app-alert-info-bg-color | App level info alert background color | | --clr-app-alert-info-font-color | App level info alert font color | | --clr-app-alert-info-border-color | App level info alert border color | | --clr-app-alert-info-icon-color | App level info alert icon color | | --clr-app-alert-info-action-color | App level info alert action font color | | --clr-app-alert-info-action-active-color | App level info alert action font color on focus, hover, active | | --clr-app-alert-info-close-icon-color | App level info alert close icon color | | --clr-app-alert-info-close-icon-hover-color | App level info alert close icon color on hover | | --clr-app-alert-warning-bg-color | App level warning alert background color | | --clr-app-alert-warning-border-color | App level warning alert border color | | --clr-app-alert-warning-icon-color | App level warning alert icon color | | --clr-app-alert-warning-font-color | App level warning alert font color | | --clr-app-alert-warning-action-color | App level warning alert action font color | | --clr-app-alert-warning-action-active-color | App level warning alert action font color on focus, hover, active | | --clr-app-alert-warning-close-icon-color | App level warning alert close icon color | | --clr-app-alert-warning-close-icon-hover-color | App level warning alert close icon color on hover | | --clr-app-alert-danger-bg-color | App level danger alert background color | | --clr-app-alert-danger-border-color | App level danger alert border color | | --clr-app-alert-danger-icon-color | App level danger alert icon color | | --clr-app-alert-danger-font-color | App level danger alert font color | | --clr-app-alert-danger-action-color | App level danger alert action font color | | --clr-app-alert-danger-action-active-color | App level danger alert action font color on focus, hover, active | | --clr-app-alert-danger-close-icon-color | App level danger alert close icon color | | --clr-app-alert-danger-close-icon-hover-color | App level danger alert close icon color on hover | | --clr-app-alert-success-border-color | App level success alert border color | | --clr-app-alert-success-bg-color | App level success alert background color | | --clr-app-alert-success-icon-color | App level success alert icon color | | --clr-app-alert-success-font-color | App level success alert font color | | --clr-app-alert-success-action-color | App level success alert action font color | | --clr-app-alert-success-action-active-color | App level success alert action font color on focus, hover, active | | --clr-app-alert-success-close-icon-color | App level success alert close icon color | | --clr-app-alert-success-close-icon-hover-color | App level success alert close icon color on hover | | --clr-app-alert-neutral-border-color | App level neutral alert border color | | --clr-app-alert-neutral-bg-color | App level neutral alert background color | | --clr-app-alert-neutral-icon-color | App level neutral alert icon color | | --clr-app-alert-neutral-font-color | App level neutral alert font color | | --clr-app-alert-neutral-action-color | App level neutral alert action font color | | --clr-app-alert-neutral-action-active-color | App level neutral alert action font color on focus, hover, active | | --clr-app-alert-neutral-close-icon-color | App level neutral alert close icon color | | --clr-app-alert-neutral-close-icon-hover-color | App level neutral alert close icon color on hover | | --clr-app-alert-pager-text-color | Alert pager default font color | | --clr-app-alert-info-pager-bg-color | Info alert pager font color | | --clr-app-alert-warning-pager-bg-color | Warning alert pager font color | | --clr-app-alert-danger-pager-bg-color | Danger alert pager font color | | --clr-app-alert-success-pager-bg-color | Danger success pager font color | | --clr-app-alert-neutral-pager-bg-color | Danger neutral pager font color | | --clr-lightweight-alert-info-icon-color | Lightweight alert info icon color | | --clr-lightweight-alert-info-font-color | Lightweight alert info font color | | --clr-lightweight-alert-warning-icon-color | Lightweight alert warning icon color | | --clr-lightweight-alert-warning-font-color | Lightweight alert warning font color | | --clr-lightweight-alert-danger-icon-color | Lightweight alert danger icon color | | --clr-lightweight-alert-danger-font-color | Lightweight alert danger font color | | --clr-lightweight-alert-success-icon-color | Lightweight alert success icon color | | --clr-lightweight-alert-success-font-color | Lightweight alert success font color | | --clr-lightweight-alert-neutral-icon-color | Lightweight alert neutral icon color | | --clr-lightweight-alert-neutral-font-color | Lightweight alert neutral font color | ## CSS Classes | Class name | Description | | -------------------- | -------------------------------------------------------------------------- | | alert | Main alert element | | alert-info | Addition to `alert` class to present it as info alert | | alert-success | Addition to `alert` class to present it as success alert | | alert-warning | Addition to `alert` class to present it as warning alert | | alert-danger | Addition to `alert` class to present it as danger alert | | alert-neutral | Addition to `alert` class to present it as neutral alert | | alert-app-level | Addition to `alert` class to present it as app-level alert | | alert-items | Wrapper for elements with class `alert-item` | | alert-item | Element for messages in alert | | alert-text | Text inside alert items | | alert-actions | Wrapper for actions | | alert-action | Action element | | close | Close element `X` | | alert-icon | Icon used in alert items | | alert-icon-wrapper | Wrapper for icons | | alert-sm | Alert with a smaller size | | alert-lightweight | Light weight alert | | alert-hidden | Hide alert | | alerts | Main alerts element \*should be used with `alert-info` or equivalent class | | alerts-pager | Alerts pager element | | alerts-pager-button | Pager button | | alerts-pager-control | Pager controls wrapper | | alerts-page-down | Page down wrapper | | alerts-page-up | Page up wrapper | | alerts-pager-text | Page identifier in pager | | alerts-spinner | Using spinner instead of an icon | # Badge ## CSS Custom Properties | CSS Custom Property | Description | | ------------------------------- | --------------------------------- | | --clr-badge-background-color | Background color | | --clr-badge-color | Font color | | --clr-badge-info-bg-color | Info badge background color | | --clr-badge-info-color | Info badge text color | | --clr-badge-success-bg-color | Success badge background color | | --clr-badge-success-color | Success badge text color | | --clr-badge-warning-bg-color | Warning badge background color | | --clr-badge-warning-color | Warning badge text color | | --clr-badge-danger-bg-color | Danger badge background color | | --clr-badge-danger-color | Danger badge text color | | --clr-badge-gray-bg-color | Gray badge background color | | --clr-badge-gray-color | Gray badge text color | | --clr-badge-purple-bg-color | Purple badge background color | | --clr-badge-purple-color | Purple badge text color | | --clr-badge-blue-bg-color | Blue badge background color | | --clr-badge-blue-color | Blue badge text color | | --clr-badge-orange-bg-color | Orange badge background color | | --clr-badge-orange-color | Orange badge text color | | --clr-badge-light-blue-bg-color | Light-blue badge background color | | --clr-badge-light-blue-color | Light-blue badge text color | ## CSS Classes | Class name | Description | | ---------------- | ------------------------------------------------------------------- | | badge | Main badge element. All of the following require this class as well | | badge-info | Info badge | | badge-success | Success badge | | badge-danger | Danger badge | | badge-warning | Warning badge | | badge-gray | Gray badge | | badge-purple | Purple badge | | badge-blue | Blue badge | | badge-orange | Orange badge | | badge-light-blue | Light-blue badge | # Breadcrumbs ## CSS Custom Properties | CSS Custom Property | Description | | --------------------------- | ----------------------- | | --clr-breadcrumb-item-space | Breadcrumb item spacing | ## CSS Classes | Class name | Description | | --------------------- | ------------------------- | | clr-breadcrumb | Breadcrumb element | | clr-breadcrumb-menu | Breadcrumb menu | | clr-breadcrumb-item | Breadcrumb menu item | | clr-breadcrumb-expand | Breadcrumb expand control | # Button ## CSS Custom Properties | CSS Custom Property | Description | | ----------------------------------------------- | -------------------------------------------------------------------------- | | --clr-btn-vertical-margin | Button top and bottom margin | | --clr-btn-horizontal-margin | Button left and right margin | | --clr-btn-vertical-padding | Button top and bottom padding | | --clr-btn-horizontal-padding | Button left and right padding | | --clr-btn-padding | Button padding | | --clr-btn-height | Button height | | --clr-btn-height-sm | Small button height | | --clr-btn-border-radius | Button border radius | | --clr-btn-border-width | Button border width | | --clr-btn-outline-bg-color | Base outline button background color | | --clr-btn-default-color | Default button text color | | --clr-btn-default-bg-color | Default button background color | | --clr-btn-default-border-color | Default button border color | | --clr-btn-default-hover-color | Default button `:hover` text color | | --clr-btn-default-hover-bg-color | Default button `:hover` background color | | --clr-btn-default-active-color | Default button `:active` text color | | --clr-btn-default-active-bg-color | Default button `:active` background color | | --clr-btn-default-disabled-color | Default button `disabled` text color | | --clr-btn-default-disabled-bg-color | Default button `disabled` background color | | --clr-btn-default-disabled-border-color | Default button `disabled` border color | | --clr-btn-default-outline-color | Default outline button text color | | --clr-btn-default-outline-bg-color | Default outline button background color | | --clr-btn-default-outline-border-color | Default outline button border color | | --clr-btn-default-outline-hover-color | Default outline button `:hover` text color | | --clr-btn-default-outline-hover-bg-color | Default outline button `:hover` background color | | --clr-btn-default-outline-active-color | Default outline button `:active` text color | | --clr-btn-default-outline-active-bg-color | Default outline button `:active` background color | | --clr-btn-default-outline-disabled-color | Default outline button `disabled` text color | | --clr-btn-default-outline-disabled-bg-color | Default outline button `disabled` background color | | --clr-btn-default-outline-disabled-border-color | Default outline button `disabled` border color | | --clr-btn-primary-color | Primary button text color | | --clr-btn-primary-bg-color | Primary button background color | | --clr-btn-primary-border-color | Primary button border color | | --clr-btn-primary-hover-color | Primary button `:hover` text color | | --clr-btn-primary-hover-bg-color | Primary button `:hover` background color | | --clr-btn-primary-active-color | Primary button `:active` text color | | --clr-btn-primary-active-bg-color | Primary button `:active` background color | | --clr-btn-primary-disabled-color | Primary button `disabled` text color | | --clr-btn-primary-disabled-bg-color | Primary button `disabled` background color | | --clr-btn-primary-disabled-border-color | Primary button `disabled` border color | | --clr-btn-primary-outline-color | Primary outline button text color | | --clr-btn-primary-outline-bg-color | Primary outline button background color | | --clr-btn-primary-outline-border-color | Primary outline button border color | | --clr-btn-primary-outline-hover-color | Primary outline button `:hover` text color | | --clr-btn-primary-outline-hover-bg-color | Primary outline button `:hover` background color | | --clr-btn-primary-outline-active-color | Primary outline button `:active` text color | | --clr-btn-primary-outline-active-bg-color | Primary outline button `:active` background color | | --clr-btn-primary-outline-disabled-color | Primary outline button `disabled` text color | | --clr-btn-primary-outline-disabled-bg-color | Primary outline button `disabled` background color | | --clr-btn-primary-outline-disabled-border-color | Primary outline button `disabled` border color | | --clr-btn-success-color | Success button text color | | --clr-btn-success-bg-color | Success button background color | | --clr-btn-success-border-color | Success button border color | | --clr-btn-success-hover-color | Success button `:hover` text color | | --clr-btn-success-hover-bg-color | Success button `:hover` background color | | --clr-btn-success-active-color | Success button `:active` text color | | --clr-btn-success-active-bg-color | Success button `:active` background color | | --clr-btn-success-disabled-color | Success button `disabled` text color | | --clr-btn-success-disabled-bg-color | Success button `disabled` background color | | --clr-btn-success-disabled-border-color | Success button `disabled` border color | | --clr-btn-success-outline-color | Success outline button text color | | --clr-btn-success-outline-bg-color | Success outline button background color | | --clr-btn-success-outline-border-color | Success outline button border color | | --clr-btn-success-outline-hover-color | Success outline button `:hover` text color | | --clr-btn-success-outline-hover-bg-color | Success outline button `:hover` background color | | --clr-btn-success-outline-active-color | Success outline button `:active` text color | | --clr-btn-success-outline-active-bg-color | Success outline button `:active` background color | | --clr-btn-success-outline-disabled-color | Success outline button `disabled` text color | | --clr-btn-success-outline-disabled-bg-color | Success outline button `disabled` background color | | --clr-btn-success-outline-disabled-border-color | Success outline button `disabled` border color | | --clr-btn-danger-color | Danger button text color | | --clr-btn-danger-bg-color | Danger button background color | | --clr-btn-danger-border-color | Danger button border color | | --clr-btn-danger-hover-color | Danger button `:hover` text color | | --clr-btn-danger-hover-bg-color | Danger button `:hover` background color | | --clr-btn-danger-active-color | Danger button `:active` text color | | --clr-btn-danger-active-bg-color | Danger button `:active` background color | | --clr-btn-danger-disabled-color | Danger button `disabled` text color | | --clr-btn-danger-disabled-bg-color | Danger button `disabled` background color | | --clr-btn-danger-disabled-border-color | Danger button `disabled` border color | | --clr-btn-danger-outline-color | Danger outline button text color | | --clr-btn-danger-outline-bg-color | Danger outline button background color | | --clr-btn-danger-outline-border-color | Danger outline button border color | | --clr-btn-danger-outline-hover-color | Danger outline button `:hover` text color | | --clr-btn-danger-outline-hover-bg-color | Danger outline button `:hover` background color | | --clr-btn-danger-outline-active-color | Danger outline button `:active` text color | | --clr-btn-danger-outline-active-bg-color | Danger outline button `:active` background color | | --clr-btn-danger-outline-disabled-color | Danger outline button `disabled` text color | | --clr-btn-danger-outline-disabled-bg-color | Danger outline button `disabled` background color | | --clr-btn-danger-outline-disabled-border-color | Danger outline button `disabled` border color | | --clr-btn-warning-color | Warning button text color | | --clr-btn-warning-bg-color | Warning button background color | | --clr-btn-warning-border-color | Warning button border color | | --clr-btn-warning-hover-color | Warning button `:hover` text color | | --clr-btn-warning-hover-bg-color | Warning button `:hover` background color | | --clr-btn-warning-active-color | Warning button `:active` text color | | --clr-btn-warning-active-bg-color | Warning button `:active` background color | | --clr-btn-warning-disabled-color | Warning button `disabled` text color | | --clr-btn-warning-disabled-bg-color | Warning button `disabled` background color | | --clr-btn-warning-disabled-border-color | Warning button `disabled` border color | | --clr-btn-warning-outline-color | Warning outline button text color | | --clr-btn-warning-outline-bg-color | Warning outline button background color | | --clr-btn-warning-outline-border-color | Warning outline button border color | | --clr-btn-warning-outline-hover-color | Warning outline button `:hover` text color | | --clr-btn-warning-outline-hover-bg-color | Warning outline button `:hover` background color | | --clr-btn-warning-outline-active-color | Warning outline button `:active` text color | | --clr-btn-warning-outline-active-bg-color | Warning outline button `:active` background color | | --clr-btn-warning-outline-disabled-color | Warning outline button `disabled` text color | | --clr-btn-warning-outline-disabled-bg-color | Warning outline button `disabled` background color | | --clr-btn-warning-outline-disabled-border-color | Warning outline button `disabled` border color | | --clr-btn-neutral-color | Neutral button text color | | --clr-btn-neutral-bg-color | Neutral button background color | | --clr-btn-neutral-border-color | Neutral button border color | | --clr-btn-neutral-hover-color | Neutral button `:hover` text color | | --clr-btn-neutral-hover-bg-color | Neutral button `:hover` background color | | --clr-btn-neutral-active-color | Neutral button `:active` text color | | --clr-btn-neutral-active-bg-color | Neutral button `:active` background color | | --clr-btn-neutral-disabled-color | Neutral button `disabled` text color | | --clr-btn-neutral-disabled-bg-color | Neutral button `disabled` background color | | --clr-btn-neutral-disabled-border-color | Neutral button `disabled` border color | | --clr-btn-neutral-outline-color | Neutral outline button text color | | --clr-btn-neutral-outline-bg-color | Neutral outline button background color | | --clr-btn-neutral-outline-border-color | Neutral outline button border color | | --clr-btn-neutral-outline-hover-color | Neutral outline button `:hover` text color | | --clr-btn-neutral-outline-hover-bg-color | Neutral outline button `:hover` background color | | --clr-btn-neutral-outline-active-color | Neutral outline button `:active` text color | | --clr-btn-neutral-outline-active-bg-color | Neutral outline button `:active` background color | | --clr-btn-neutral-outline-disabled-color | Neutral outline button `disabled` text color | | --clr-btn-neutral-outline-disabled-bg-color | Neutral outline button `disabled` background color | | --clr-btn-neutral-outline-disabled-border-color | Neutral outline button `disabled` border color | | --clr-btn-link-color | Link button text color | | --clr-btn-link-bg-color | Link button background color | | --clr-btn-link-border-color | Link button border color | | --clr-btn-link-hover-color | Link button `:hover` text color | | --clr-btn-link-hover-bg-color | Link button `:hover` background color | | --clr-btn-link-active-color | Link button `:active` text color | | --clr-btn-link-active-bg-color | Link button `:active` background color | | --clr-btn-link-disabled-color | Link button `disabled` text color | | --clr-btn-link-disabled-bg-color | Link button `disabled` background color | | --clr-btn-link-disabled-border-color | Link button `disabled` border color | | --clr-btn-link-primary-color | Primary link button text color | | --clr-btn-link-primary-bg-color | Primary link button background color | | --clr-btn-link-primary-border-color | Primary link button border color | | --clr-btn-link-primary-hover-color | Primary link button `:hover` text color | | --clr-btn-link-primary-hover-bg-color | Primary link button `:hover` background color | | --clr-btn-link-primary-active-color | Primary link button `:active` text color | | --clr-btn-link-primary-active-bg-color | Primary link button `:active` background color | | --clr-btn-link-primary-disabled-color | Primary link button `disabled` text color | | --clr-btn-link-primary-disabled-bg-color | Primary link button `disabled` background color | | --clr-btn-link-primary-disabled-border-color | Primary link button `disabled` border color | | --clr-btn-link-success-color | Success link button text color | | --clr-btn-link-success-bg-color | Success link button background color | | --clr-btn-link-success-border-color | Success link button border color | | --clr-btn-link-success-hover-color | Success link button `:hover` text color | | --clr-btn-link-success-hover-bg-color | Success link button `:hover` background color | | --clr-btn-link-success-active-color | Success link button `:active` text color | | --clr-btn-link-success-active-bg-color | Success link button `:active` background color | | --clr-btn-link-success-disabled-color | Success link button `disabled` text color | | --clr-btn-link-success-disabled-bg-color | Success link button `disabled` background color | | --clr-btn-link-success-disabled-border-color | Success link button `disabled` border color | | --clr-btn-link-warning-color | Warning link button text color | | --clr-btn-link-warning-bg-color | Warning link button background color | | --clr-btn-link-warning-border-color | Warning link button border color | | --clr-btn-link-warning-hover-color | Warning link button `:hover` text color | | --clr-btn-link-warning-hover-bg-color | Warning link button `:hover` background color | | --clr-btn-link-warning-active-color | Warning link button `:active` text color | | --clr-btn-link-warning-active-bg-color | Warning link button `:active` background color | | --clr-btn-link-warning-disabled-color | Warning link button `disabled` text color | | --clr-btn-link-warning-disabled-bg-color | Warning link button `disabled` background color | | --clr-btn-link-warning-disabled-border-color | Warning link button `disabled` border color | | --clr-btn-link-danger-color | Danger link button text color | | --clr-btn-link-danger-bg-color | Danger link button background color | | --clr-btn-link-danger-border-color | Danger link button border color | | --clr-btn-link-danger-hover-color | Danger link button `:hover` text color | | --clr-btn-link-danger-hover-bg-color | Danger link button `:hover` background color | | --clr-btn-link-danger-active-color | Danger link button `:active` text color | | --clr-btn-link-danger-active-bg-color | Danger link button `:active` background color | | --clr-btn-link-danger-disabled-color | Danger link button `disabled` text color | | --clr-btn-link-danger-disabled-bg-color | Danger link button `disabled` background color | | --clr-btn-link-danger-disabled-border-color | Danger link button `disabled` border color | | --clr-btn-inverse-color | Inverse button text color | | --clr-btn-inverse-bg-color | Inverse button background color | | --clr-btn-inverse-border-color | Inverse button border color | | --clr-btn-inverse-hover-color | Inverse button `:hover` text color | | --clr-btn-inverse-hover-bg-color | Inverse button `:hover` background color | | --clr-btn-inverse-active-color | Inverse button `:active` text color | | --clr-btn-inverse-active-bg-color | Inverse button `:active` background color | | --clr-btn-inverse-disabled-color | Inverse button `disabled` text color | | --clr-btn-inverse-disabled-bg-color | Inverse button `disabled` background color | | --clr-btn-inverse-disabled-border-color | Inverse button `disabled` border color | | --clr-btn-icon-disabled-color | Icon button `disabled` text color | | --clr-btn-group-focus-outline | `:focus` outline color of a checkbox or radio inside a button group button | | --clr-btn-default-checked-color | Checked checkbox default button text color | | --clr-btn-default-checked-bg-color | Checked checkbox default button background color | | --clr-btn-default-outline-checked-color | Checked checkbox default outline button text color | | --clr-btn-default-outline-checked-bg-color | Checked checkbox default outline button background color | | --clr-btn-primary-checked-color | Checked checkbox primary button text color | | --clr-btn-primary-checked-bg-color