[ { "id": "oj-c.Button", "name": "Button", "memberof": "oj-c", "kind": "class", "meta": { "filename": "button.tsx", "path": "web/components/oj-c/button" }, "ojcomponent": true, "isvcomponent": true, "since": "13.0.0", "longname": "oj-c.Button", "pack": "oj-c", "classdesc": "

\n JET Button\n \n

\n\n

Description: Themeable, WAI-ARIA-compliant push buttons, with appropriate styles for hover, active, and disabled.\n\n

<oj-c-button id=\"myButton\" label=\"My Button\">\n</oj-c-button>\n<oj-c-button label=\"start icon\">\n  <span slot='startIcon' class='myIconClass'></span>\n</oj-c-button>\n <oj-c-button label=\"end icon\">\n  <span slot='endIcon' class='myIconClass'></span>\n</oj-c-button>\n
\n\n

\n Push Buttons\n \n

\n\n

Push buttons are ordinary buttons that do not stay pressed in when clicked.\nPush buttons are created from oj-c-button elements.\n\n

\n Touch End User Information\n \n

\n\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
TargetGestureAction
Push ButtonTapPush the button.
\n\n

\n Keyboard End User Information\n \n

\n\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
TargetKeyAction
Push ButtonEnter or SpacePush the button.
\n\n

\n Accessibility\n \n

\n\n

For accessibility, it is not required to set an aria label on a JET button as it uses the label text to generate an aria label.\nTherefore the label should be specified even if the button is icon-only (display=icons). However,\nyou can override the default behavior by setting aria-label.\nThe label can be hidden using the display attribute.\n\n

\nDisabled content: JET supports an accessible luminosity contrast ratio,\nas specified in WCAG 2.0 - Section 1.4.3 \"Contrast\",\nin the themes that are accessible. (See the \"Theming\" chapter of the JET Developer Guide for more information on which\nthemes are accessible.) Note that Section 1.4.3 says that text or images of text that are part of an inactive user\ninterface component have no contrast requirement. Because disabled content may not meet the minimum contrast ratio\nrequired of enabled content, it cannot be used to convey meaningful information.\n

", "scope": "static", "tagWithoutBrackets": "oj-c-button", "tagWithBrackets": "", "domInterface": "CButtonElement", "ojPageTitle": "<oj-c-button>", "camelCaseName": "Button", "ojPageTitlePrefix": "Element: ", "ojtsvcomponent": true, "tstype": { "target": "Type", "value": "interface CButtonElement extends JetElement" }, "ojsignature": [ { "target": "Type", "value": "interface CButtonElement extends JetElement" } ], "tsdeprecated": [ { "type": "supersedes", "since": "15.0.0", "value": [ "oj-button" ] } ], "extension": { "catalog": { "category": "Controls" }, "vbdt": { "module": "oj-c/button" }, "oracle": { "icon": "oj-ux-ico-button", "uxSpecs": [ "button" ] } }, "ojmodule": "button" }, { "id": "oj-c.Button#label", "name": "label", "memberof": "oj-c.Button", "meta": { "filename": "button.tsx", "path": "web/components/oj-c/button" }, "kind": "member", "longname": "oj-c.Button#label", "scope": "instance", "type": { "names": [ "string" ] }, "optional": false, "ojshortdesc": "Text to show in the button.", "description": "Text to show in the button." }, { "id": "oj-c.Button#tooltip", "name": "tooltip", "memberof": "oj-c.Button", "meta": { "filename": "button.tsx", "path": "web/components/oj-c/button" }, "kind": "member", "longname": "oj-c.Button#tooltip", "scope": "instance", "type": { "names": [ "string" ] }, "optional": true, "ojshortdesc": "Text to show in the tooltip. This overrides the default tooltip that renders the label when in icon mode.", "description": "Text to show in the tooltip. This overrides the default tooltip that renders the label when in icon mode." }, { "id": "oj-c.Button#disabled", "name": "disabled", "memberof": "oj-c.Button", "meta": { "filename": "button.tsx", "path": "web/components/oj-c/button" }, "kind": "member", "longname": "oj-c.Button#disabled", "scope": "instance", "type": { "names": [ "boolean" ] }, "optional": true, "ojshortdesc": "Specifies that the button element should be disabled.", "description": "Specifies that the button element should be disabled.", "defaultvalue": false }, { "id": "oj-c.Button#width", "name": "width", "memberof": "oj-c.Button", "meta": { "filename": "button.tsx", "path": "web/components/oj-c/button" }, "kind": "member", "longname": "oj-c.Button#width", "scope": "instance", "type": { "names": [ "number|string" ] }, "optional": true, "ojshortdesc": "Specifies that the button style width", "description": "Specifies that the button style width" }, { "id": "oj-c.Button#display", "name": "display", "memberof": "oj-c.Button", "meta": { "filename": "button.tsx", "path": "web/components/oj-c/button" }, "kind": "member", "longname": "oj-c.Button#display", "scope": "instance", "type": { "names": [ "\"all\"", "\"label\"", "\"icons\"" ] }, "optional": true, "ojshortdesc": "Display just the label, the icons, or all. Label is used as tooltip and should be set in all cases.", "description": "Display just the label, the icons, or all. Label is used as tooltip and should be set in all cases.", "ojvalues": [ { "name": "all", "description": "Display both the label and icons.", "displayName": "All", "type": { "names": [ "string" ] } }, { "name": "icons", "description": "Display only the icons.", "displayName": "Icons", "type": { "names": [ "string" ] } }, { "name": "label", "description": "Display only the text label.", "displayName": "label", "type": { "names": [ "string" ] } } ], "ojvalueskeeporder": true, "defaultvalue": "'all'" }, { "id": "oj-c.Button#size", "name": "size", "memberof": "oj-c.Button", "meta": { "filename": "button.tsx", "path": "web/components/oj-c/button" }, "kind": "member", "longname": "oj-c.Button#size", "scope": "instance", "type": { "names": [ "\"xs\"", "\"sm\"", "\"md\"", "\"lg\"" ] }, "optional": true, "ojshortdesc": "Size of button", "description": "Size of button", "ojvalues": [ { "name": "xs", "description": "Display an extra small button. Only supported for component developers with ghost chroming in icon display mode.", "displayName": "Extra Small", "type": { "names": [ "string" ] } }, { "name": "sm", "description": "Display a small button.", "displayName": "Small", "type": { "names": [ "string" ] } }, { "name": "md", "description": "Display a default size button.", "displayName": "Medium", "type": { "names": [ "string" ] } }, { "name": "lg", "description": "Display a large button.", "displayName": "Large", "type": { "names": [ "string" ] } } ], "ojvalueskeeporder": true, "defaultvalue": "'md'" }, { "id": "oj-c.Button#edge", "name": "edge", "memberof": "oj-c.Button", "meta": { "filename": "button.tsx", "path": "web/components/oj-c/button" }, "kind": "member", "longname": "oj-c.Button#edge", "scope": "instance", "type": { "names": [ "\"none\"", "\"bottom\"" ] }, "optional": true, "ojshortdesc": "Specifies whether the button is attached to an edge. For example setting edge='bottom' can be used to attach a button to the bottom of a card. The button is then stretched to 100% width, and borders adjusted.", "description": "Specifies whether the button is attached to an edge. For example setting edge='bottom' can be used to attach a button to the bottom of a card. The button is then stretched to 100% width, and borders adjusted.", "ojvalues": [ { "name": "none", "description": "Display a default standalone button.", "displayName": "Small", "type": { "names": [ "string" ] } }, { "name": "bottom", "description": "Stretch the button to 100% width and adjust borders for usage at bottom of container.", "displayName": "Bottom", "type": { "names": [ "string" ] } } ], "ojvalueskeeporder": true, "defaultvalue": "'none'" }, { "id": "oj-c.Button#chroming", "name": "chroming", "memberof": "oj-c.Button", "meta": { "filename": "button.tsx", "path": "web/components/oj-c/button" }, "kind": "member", "longname": "oj-c.Button#chroming", "scope": "instance", "type": { "names": [ "\"solid\"", "\"ghost\"", "\"borderless\"", "\"outlined\"", "\"callToAction\"", "\"danger\"" ] }, "optional": true, "ojshortdesc": "Indicates in what states the button has variants in background and border.", "description": "Indicates in what states the button has variants in background and border.", "ojvalues": [ { "name": "ghost", "description": "Ghost buttons are the least prominent variation. Ghost buttons are useful for performing low-priority tasks, such as manipulating the UI.", "displayName": "Ghost", "type": { "names": [ "string" ] } }, { "name": "borderless", "description": "Borderless buttons are a more prominent variation. Borderless buttons are useful for supplemental actions that require minimal emphasis.", "displayName": "Borderless", "type": { "names": [ "string" ] } }, { "name": "outlined", "description": "Outlined buttons are salient, but lighter weight than solid buttons. Outlined buttons are useful for secondary actions.", "displayName": "Outlined", "type": { "names": [ "string" ] } }, { "name": "solid", "description": "Solid buttons stand out, and direct the user's attention to the most important actions in the UI.", "displayName": "Solid", "type": { "names": [ "string" ] } }, { "name": "callToAction", "description": "A Call To Action (CTA) button guides the user to take or complete the action that is the main goal of the page or page section. There should only be one CTA button on a page at any given time.", "displayName": "Call To Action", "type": { "names": [ "string" ] } }, { "name": "danger", "description": "A Danger button alerts the user to a dangerous situation.", "displayName": "Danger", "type": { "names": [ "string" ] } } ], "ojvalueskeeporder": true, "defaultvalue": "'outlined'" }, { "id": "oj-c.Button#buttonType", "name": "buttonType", "memberof": "oj-c.Button", "meta": { "filename": "button.tsx", "path": "web/components/oj-c/button" }, "kind": "member", "longname": "oj-c.Button#buttonType", "scope": "instance", "type": { "names": [ "\"button\"", "\"submit\"" ] }, "optional": true, "ojshortdesc": "Specifes the button type to be rendered. This can be used to prevent form submission from happening when the value is set to "button".", "description": "Specifes the button type to be rendered. This can be used to prevent form submission from happening when the value is set to "button".", "ojvalues": [ { "name": "button", "description": "Renders a standard HTML button element.", "displayName": "Button", "type": { "names": [ "string" ] } }, { "name": "submit", "description": "Renders an HTML submit button element.", "displayName": "Submit", "type": { "names": [ "string" ] } } ], "ojvalueskeeporder": true, "defaultvalue": "'submit'" }, { "id": "oj-c.Button#focus", "name": "focus", "memberof": "oj-c.Button", "meta": { "filename": "button.tsx", "path": "web/components/oj-c/button" }, "kind": "function", "longname": "oj-c.Button#focus", "scope": "instance", "returns": [ { "type": { "names": [ "void" ] } } ], "description": "" }, { "id": "oj-c.Button#blur", "name": "blur", "memberof": "oj-c.Button", "meta": { "filename": "button.tsx", "path": "web/components/oj-c/button" }, "kind": "function", "longname": "oj-c.Button#blur", "scope": "instance", "returns": [ { "type": { "names": [ "void" ] } } ], "description": "" }, { "id": "oj-c.Button#click", "name": "click", "memberof": "oj-c.Button", "meta": { "filename": "button.tsx", "path": "web/components/oj-c/button" }, "kind": "function", "longname": "oj-c.Button#click", "scope": "instance", "returns": [ { "type": { "names": [ "void" ] } } ], "description": "" }, { "id": "oj-c.Button#setProperty", "name": "setProperty", "memberof": "oj-c.Button", "meta": { "filename": "button.tsx", "path": "web/components/oj-c/button" }, "kind": "function", "longname": "oj-c.Button#setProperty", "scope": "instance", "returns": [ { "type": { "names": [ "void" ] } } ], "ojshortdesc": "Sets a property or a single subproperty for complex properties and notifies the component of the change, triggering a corresponding event.", "description": "Sets a property or a single subproperty for complex properties and notifies the component of the change, triggering a corresponding event.", "params": [ { "name": "property", "description": "The property name to set. Supports dot notation for subproperty access.", "type": { "names": [ "string" ] } }, { "name": "value", "description": "The new value to set the property to.", "type": { "names": [ "any" ] } } ] }, { "id": "oj-c.Button#getProperty", "name": "getProperty", "memberof": "oj-c.Button", "meta": { "filename": "button.tsx", "path": "web/components/oj-c/button" }, "kind": "function", "longname": "oj-c.Button#getProperty", "scope": "instance", "returns": [ { "type": { "names": [ "any" ] } } ], "ojshortdesc": "Retrieves the value of a property or a subproperty.", "description": "Retrieves the value of a property or a subproperty.", "params": [ { "name": "property", "description": "The property name to get. Supports dot notation for subproperty access.", "type": { "names": [ "string" ] } } ] }, { "id": "oj-c.Button#setProperties", "name": "setProperties", "memberof": "oj-c.Button", "meta": { "filename": "button.tsx", "path": "web/components/oj-c/button" }, "kind": "function", "longname": "oj-c.Button#setProperties", "scope": "instance", "returns": [ { "type": { "names": [ "void" ] } } ], "ojshortdesc": "Performs a batch set of properties.", "description": "Performs a batch set of properties.", "params": [ { "name": "properties", "description": "An object containing the property and value pairs to set.", "type": { "names": [ "object" ] } } ] }, { "id": "oj-c.Button#event:ojAction", "name": "ojAction", "kind": "event", "memberof": "oj-c.Button", "meta": { "filename": "button.tsx", "path": "web/components/oj-c/button" }, "longname": "oj-c.Button#event:ojAction", "scope": "instance", "bubbles": true, "ojshortdesc": "Triggered when a button is clicked, whether by keyboard, mouse, or touch events. To meet accessibility requirements, the only supported way to react to the click of a button is to listen for this event.", "description": "

Note: The event detail contains the following properties: [oj-c.Button.ActionDetail]{@link oj-c.Button.ActionDetail}

Triggered when a button is clicked, whether by keyboard, mouse, or touch events. To meet accessibility requirements, the only supported way to react to the click of a button is to listen for this event." }, { "id": "oj-c.Button#startIcon", "name": "startIcon", "memberof": "oj-c.Button", "meta": { "filename": "button.tsx", "path": "web/components/oj-c/button" }, "kind": "member", "longname": "oj-c.Button#startIcon", "scope": "instance", "description": "The startIcon slot is the button's start icon. The oj-c-button element accepts DOM nodes as children with the startIcon slot.", "ojshortdesc": "The startIcon slot is the button's start icon. The oj-c-button element accepts DOM nodes as children with the startIcon slot.", "ojslot": true }, { "id": "oj-c.Button#endIcon", "name": "endIcon", "memberof": "oj-c.Button", "meta": { "filename": "button.tsx", "path": "web/components/oj-c/button" }, "kind": "member", "longname": "oj-c.Button#endIcon", "scope": "instance", "description": "The endIcon slot is the button's end icon. The oj-c-button element accepts DOM nodes as children with the endIcon slot.", "ojshortdesc": "The endIcon slot is the button's end icon. The oj-c-button element accepts DOM nodes as children with the endIcon slot.", "ojslot": true }, { "id": "oj-c.Button.touchDoc", "name": "touchDoc", "kind": "member", "longname": "oj-c.Button.touchDoc", "description": "\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
TargetGestureAction
Push ButtonTapPush the button.
", "memberof": "oj-c.Button", "meta": { "filename": "button.tsx", "path": "web/components/oj-c/button" }, "ojfragment": true }, { "id": "oj-c.Button.keyboardDoc", "name": "keyboardDoc", "kind": "member", "longname": "oj-c.Button.keyboardDoc", "description": "\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
TargetKeyAction
Push ButtonEnter or SpacePush the button.
", "memberof": "oj-c.Button", "meta": { "filename": "button.tsx", "path": "web/components/oj-c/button" }, "ojfragment": true }, { "id": "oj-c.Button.ActionDetail", "name": "ActionDetail", "kind": "typedef", "memberof": "oj-c.Button", "meta": { "filename": "button.tsx", "path": "web/components/oj-c/button" }, "longname": "oj-c.Button.ActionDetail", "type": { "names": [ "Object" ] }, "scope": "static", "description": "", "properties": [ { "name": "reason", "description": "trigger for the button action", "optional": false, "type": { "names": [ "\"pointer\"", "\"keyboard\"" ] }, "ojshortdesc": "trigger for the button action" } ] } ]