-
.oj-button-confirm
-
Identifies an action to confirm. Designed for use with a push button.
This class is applied to the Button's root element.Example
<oj-button class="oj-button-confirm"> <!-- content --> </oj-button>
-
.oj-button-full-width
-
Note: This styleclass is not supported in the following themes:
Alta
Apply 100% full-width to the button. The class is applied to the Button's root element. It is intended for buttons which stretch to the edge, not for buttons with padding.Example
<oj-button class="oj-button-full-width"> <!-- content --> </oj-button>
-
.oj-button-primary
-
Draws attention to the button, often identifying the primary action in a set of buttons. Designed for use with a push button. In some themes, this class does nothing.
The class is applied to the Button's root element.Example
<oj-button class="oj-button-primary"> <!-- content --> </oj-button>
-
.oj-focus-highlight
-
Under normal circumstances this class is applied automatically. It is documented here for the rare cases that an app developer needs per-instance control.
Theoj-focus-highlight
class applies focus styling that may not be desirable when the focus results from pointer interaction (touch or mouse), but which is needed for accessibility when the focus occurs by a non-pointer mechanism, for example keyboard or initial page load.
The application-level behavior for this component is controlled in the theme by the$focusHighlightPolicy
SASS variable; however, note that this same variable controls the focus highlight policy of many components and patterns. The values for the variable are:
nonPointer:
oj-focus-highlight is applied only when focus is not the result of pointer interaction. Most themes default to this value.
all:
oj-focus-highlight is applied regardless of the focus mechanism.
none:
oj-focus-highlight is never applied. This behavior is not accessible, and is intended for use when the application wishes to use its own event listener to precisely control when the class is applied (see below). The application must ensure the accessibility of the result.
To change the behavior on a per-instance basis, the application can set the SASS variable as desired and then use event listeners to toggle this class as needed.
Example
<oj-button class="oj-focus-highlight"> <!-- content --> </oj-button>
-
Category: Button Size
-
Makes the button small, large, or extra large.
The class is applied to the Button's root element.Classes:
-
.oj-button-sm
-
.oj-button-lg
-
.oj-button-xl
Example
<oj-button class="oj-button-sm"> <!-- content --> </oj-button>
-
-
CSS Variables
-
Default buttons
-
Small buttons
-
Large buttons
-
Borderless buttons
-
Outlined buttons
-
Solid buttons
-
Call to action buttons
See JET CSS Variables for additional details.
Name | Type | Description |
---|---|---|
--oj-button-height |
<length> | <percentage> | Button height |
--oj-button-border-radius |
<length> | <percentage> | Button border radius |
--oj-button-font-size |
<length> | <percentage> | Button font size |
--oj-button-font-weight |
<font_weight> | Button font weight |
--oj-button-icon-size |
<length> | <percentage> | Button icon size |
--oj-button-text-to-edge-padding |
<length> | <percentage> | Button text to edge padding |
--oj-button-icon-to-text-padding |
<length> | <percentage> | Button icon to text padding |
--oj-button-icon-to-edge-padding |
<length> | <percentage> | Button icon to edge padding |
Name | Type | Description |
---|---|---|
--oj-button-sm-height |
<length> | <percentage> | Small button height |
--oj-button-sm-font-size |
<length> | <percentage> | Small button font size |
--oj-button-sm-icon-size |
<length> | <percentage> | Small button icon size |
--oj-button-sm-text-to-edge-padding |
<length> | <percentage> | Small button text to edge padding |
--oj-button-sm-icon-to-text-padding |
<length> | <percentage> | Small button icon to text padding |
--oj-button-sm-icon-to-edge-padding |
<length> | <percentage> | Small button icon to edge padding |
Name | Type | Description |
---|---|---|
--oj-button-lg-height |
<length> | <percentage> | Large button height |
--oj-button-lg-font-size |
<length> | <percentage> | Large button font size |
--oj-button-lg-icon-size |
<length> | <percentage> | Large button icon size |
--oj-button-lg-text-to-edge-padding |
<length> | <percentage> | Large button text to edge padding |
--oj-button-lg-icon-to-text-padding |
<length> | <percentage> | Large button icon to text padding |
--oj-button-lg-icon-to-edge-padding |
<length> | <percentage> | Large button icon to edge padding |
Name | Type | Description |
---|---|---|
--oj-button-borderless-chrome-text-color |
<color> | Borderless chrome button text color |
--oj-button-borderless-chrome-bg-color-hover |
<color> | Borderless chrome button hover background color |
--oj-button-borderless-chrome-border-color-hover |
<color> | Borderless chrome button hover border color |
--oj-button-borderless-chrome-text-color-hover |
<color> | Borderless chrome button hover text color |
--oj-button-borderless-chrome-bg-color-active |
<color> | Borderless chrome button active background color |
--oj-button-borderless-chrome-border-color-active |
<color> | Borderless chrome button active border color |
--oj-button-borderless-chrome-text-color-active |
<color> | Borderless chrome button active text color |
--oj-button-borderless-chrome-bg-color-selected |
<color> | Borderless chrome button selected background color |
--oj-button-borderless-chrome-border-color-selected |
<color> | Borderless chrome button selected border color |
--oj-button-borderless-chrome-text-color-selected |
<color> | Borderless chrome button selected text color |
--oj-button-borderless-chrome-bg-color-selected-hover |
<color> | Borderless chrome button selected hover background color |
--oj-button-borderless-chrome-border-color-selected-hover |
<color> | Borderless chrome button selected hover border color |
--oj-button-borderless-chrome-text-color-selected-hover |
<color> | Borderless chrome button selected hover text color |
--oj-button-borderless-chrome-text-color-disabled |
<color> | Borderless chrome button disabled text color |
--oj-button-borderless-chrome-bg-color-selected-disabled |
<color> | Borderless chrome button disabled selected background color |
--oj-button-borderless-chrome-border-color-selected-disabled |
<color> | Borderless chrome button disabled selected border color |
--oj-button-borderless-chrome-text-color-selected-disabled |
<color> | Borderless chrome button disabled selected text color |
Name | Type | Description |
---|---|---|
--oj-button-outlined-chrome-bg-color |
<color> | Outlined chrome button background color |
--oj-button-outlined-chrome-border-color |
<color> | Outlined chrome button border color |
--oj-button-outlined-chrome-text-color |
<color> | Outlined chrome button text color |
--oj-button-outlined-chrome-bg-color-hover |
<color> | Outlined chrome button hover background color |
--oj-button-outlined-chrome-border-color-hover |
<color> | Outlined chrome button hover border color |
--oj-button-outlined-chrome-text-color-hover |
<color> | Outlined chrome button hover text color |
--oj-button-outlined-chrome-bg-color-active |
<color> | Outlined chrome button active background color |
--oj-button-outlined-chrome-border-color-active |
<color> | Outlined chrome button active border color |
--oj-button-outlined-chrome-text-color-active |
<color> | Outlined chrome button active text color |
--oj-button-outlined-chrome-bg-color-selected |
<color> | Outlined chrome button selected background color |
--oj-button-outlined-chrome-border-color-selected |
<color> | Outlined chrome button selected border color |
--oj-button-outlined-chrome-text-color-selected |
<color> | Outlined chrome button selected text color |
--oj-button-outlined-chrome-bg-color-selected-hover |
<color> | Outlined chrome button selected hover background color |
--oj-button-outlined-chrome-border-color-selected-hover |
<color> | Outlined chrome button selected hover border color |
--oj-button-outlined-chrome-text-color-selected-hover |
<color> | Outlined chrome button selected hover text color |
--oj-button-outlined-chrome-bg-color-disabled |
<color> | Outlined chrome button disabled background color |
--oj-button-outlined-chrome-border-color-disabled |
<color> | Outlined chrome button disabled border color |
--oj-button-outlined-chrome-text-color-disabled |
<color> | Outlined chrome button disabled text color |
--oj-button-outlined-chrome-bg-color-selected-disabled |
<color> | Outlined chrome button selected disabled background color |
--oj-button-outlined-chrome-border-color-selected-disabled |
<color> | Outlined chrome button selected disabled border color |
--oj-button-outlined-chrome-text-color-selected-disabled |
<color> | Outlined chrome button selected disabled text color |
Name | Type | Description |
---|---|---|
--oj-button-solid-chrome-bg-color |
<color> | Solid chrome button background color |
--oj-button-solid-chrome-border-color |
<color> | Solid chrome button border color |
--oj-button-solid-chrome-text-color |
<color> | Solid chrome button text color |
--oj-button-solid-chrome-bg-color-hover |
<color> | Solid chrome button hover background color |
--oj-button-solid-chrome-border-color-hover |
<color> | Solid chrome button hover border color |
--oj-button-solid-chrome-text-color-hover |
<color> | Solid chrome button hover text color |
--oj-button-solid-chrome-bg-color-active |
<color> | Solid chrome button active background color |
--oj-button-solid-chrome-border-color-active |
<color> | Solid chrome button active border color |
--oj-button-solid-chrome-text-color-active |
<color> | Solid chrome button active text color |
--oj-button-solid-chrome-bg-color-selected |
<color> | Solid chrome button selected background color |
--oj-button-solid-chrome-border-color-selected |
<color> | Solid chrome button selected border color |
--oj-button-solid-chrome-text-color-selected |
<color> | Solid chrome button selected text color |
--oj-button-solid-chrome-bg-color-selected-hover |
<color> | Solid chrome button selected hover background color |
--oj-button-solid-chrome-border-color-selected-hover |
<color> | Solid chrome button selected hover border color |
--oj-button-solid-chrome-text-color-selected-hover |
<color> | Solid chrome button selected hover text color |
--oj-button-solid-chrome-bg-color-disabled |
<color> | Solid chrome button disabled background color |
--oj-button-solid-chrome-border-color-disabled |
<color> | Solid chrome button disabled border color |
--oj-button-solid-chrome-text-color-disabled |
<color> | Solid chrome button disabled text color |
--oj-button-solid-chrome-bg-color-selected-disabled |
<color> | Solid chrome button disabled selected background color |
--oj-button-solid-chrome-border-color-selected-disabled |
<color> | Solid chrome button disabled selected border color |
--oj-button-solid-chrome-text-color-selected-disabled |
<color> | Solid chrome button disabled selected text color |
Name | Type | Description |
---|---|---|
--oj-button-call-to-action-chrome-bg-color |
<color> | Call to action chrome button background color |
--oj-button-call-to-action-chrome-border-color |
<color> | Call to action chrome button border color |
--oj-button-call-to-action-chrome-text-color |
<color> | Call to action chrome button text color |
--oj-button-call-to-action-chrome-bg-color-hover |
<color> | Call to action chrome button hover background color |
--oj-button-call-to-action-chrome-border-color-hover |
<color> | Call to action chrome button hover border color |
--oj-button-call-to-action-chrome-text-color-hover |
<color> | Call to action chrome button hover text color |
--oj-button-call-to-action-chrome-bg-color-active |
<color> | Call to action chrome button active background color |
--oj-button-call-to-action-chrome-border-color-active |
<color> | Call to action chrome button active border color |
--oj-button-call-to-action-chrome-text-color-active |
<color> | Call to action chrome button active text color |