` attributes and properties
+
+
+````
diff --git a/packages/carbon-web-components/src/components/chat-button/chat-button-story.scss b/packages/carbon-web-components/src/components/chat-button/chat-button-story.scss
new file mode 100644
index 00000000000..8a898b942f5
--- /dev/null
+++ b/packages/carbon-web-components/src/components/chat-button/chat-button-story.scss
@@ -0,0 +1,15 @@
+//
+// Copyright IBM Corp. 2019, 2024
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+div[class*='test-button-'] {
+ margin-block-end: 4rem;
+
+ /* stylelint-disable */
+ & > * {
+ margin-inline-end: 2rem;
+ }
+ /* stylelint-enable */
+}
diff --git a/packages/carbon-web-components/src/components/chat-button/chat-button-story.ts b/packages/carbon-web-components/src/components/chat-button/chat-button-story.ts
new file mode 100644
index 00000000000..66e6fec81f3
--- /dev/null
+++ b/packages/carbon-web-components/src/components/chat-button/chat-button-story.ts
@@ -0,0 +1,87 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2019, 2024
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { html } from 'lit';
+import './index';
+import storyDocs from './chat-button-story.mdx';
+import Add16 from '@carbon/icons/lib/add/16';
+import styles from './chat-button-story.scss';
+
+export const Default = () => {
+ return html`
+
+
+ `;
+};
+
+export default {
+ parameters: {
+ ...storyDocs.parameters,
+ },
+ title: 'Experimental/Chat button',
+ decorators: [(story) => html` ${story()} `],
+};
diff --git a/packages/carbon-web-components/src/components/chat-button/chat-button.scss b/packages/carbon-web-components/src/components/chat-button/chat-button.scss
new file mode 100644
index 00000000000..88fc44d68cf
--- /dev/null
+++ b/packages/carbon-web-components/src/components/chat-button/chat-button.scss
@@ -0,0 +1,16 @@
+//
+// Copyright IBM Corp. 2019, 2024
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+$css--plex: true !default;
+
+@use '@carbon/styles/scss/config' as *;
+@use '@carbon/styles/scss/layout' as *;
+@use '../button/button';
+
+:host(#{$prefix}-chat-button-skeleton) {
+ @include emit-layout-tokens();
+}
diff --git a/packages/carbon-web-components/src/components/chat-button/chat-button.ts b/packages/carbon-web-components/src/components/chat-button/chat-button.ts
new file mode 100644
index 00000000000..76d4fec2170
--- /dev/null
+++ b/packages/carbon-web-components/src/components/chat-button/chat-button.ts
@@ -0,0 +1,92 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2019, 2024
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { html, LitElement } from 'lit';
+import { property, customElement } from 'lit/decorators.js';
+import { prefix } from '../../globals/settings';
+import '../button/button';
+import { CHAT_BUTTON_SIZE, CHAT_BUTTON_KIND } from './defs';
+import styles from './chat-button.scss';
+
+export { CHAT_BUTTON_SIZE, CHAT_BUTTON_KIND };
+
+/**
+ * Icon Button
+ *
+ */
+@customElement(`${prefix}-chat-button`)
+class CDSChatButton extends LitElement {
+ /**
+ * `true` if the button should be disabled.
+ */
+ @property({ type: Boolean, reflect: true })
+ disabled = false;
+
+ /**
+ * Specify whether the `ChatButton` should be disabled
+ */
+ @property({ reflect: true })
+ kind = CHAT_BUTTON_KIND.PRIMARY;
+
+ /**
+ * Chat button size.
+ */
+ @property({ reflect: true })
+ size = CHAT_BUTTON_SIZE.LARGE;
+
+ /**
+ * Specify whether the `ChatButton` should be rendered as a quick action button
+ */
+ @property({ attribute: 'is-quick-action', type: Boolean })
+ isQuickAction = false;
+
+ /**
+ * Specify whether the quick action `ChatButton` should be rendered as selected. This disables the input
+ */
+ @property({ attribute: 'is-selected', type: Boolean })
+ isSelected = false;
+
+ render() {
+ const allowedSizes = [
+ CHAT_BUTTON_SIZE.SMALL,
+ CHAT_BUTTON_SIZE.MEDIUM,
+ CHAT_BUTTON_SIZE.LARGE,
+ ];
+
+ if (this.isQuickAction) {
+ this.kind = CHAT_BUTTON_KIND.GHOST;
+ this.size = CHAT_BUTTON_SIZE.SMALL;
+ } else {
+ // Do not allow size larger than `lg`
+ this.size = allowedSizes.includes(this.size)
+ ? this.size
+ : CHAT_BUTTON_SIZE.LARGE;
+ }
+
+ let classes = `${prefix}--chat-btn`;
+ classes += this.isQuickAction ? ` ${prefix}--chat-btn--quick-action` : '';
+ classes += this.isSelected
+ ? ` ${prefix}--chat-btn--quick-action--selected`
+ : '';
+
+ return html`
+
+
+
+ `;
+ }
+
+ static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader
+}
+
+export default CDSChatButton;
diff --git a/packages/carbon-web-components/src/components/chat-button/defs.ts b/packages/carbon-web-components/src/components/chat-button/defs.ts
new file mode 100644
index 00000000000..16df24bcf47
--- /dev/null
+++ b/packages/carbon-web-components/src/components/chat-button/defs.ts
@@ -0,0 +1,58 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2020, 2024
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/**
+ * Chat Button size.
+ */
+export enum CHAT_BUTTON_SIZE {
+ /**
+ * Small size.
+ */
+ SMALL = 'sm',
+
+ /**
+ * Medium size.
+ */
+ MEDIUM = 'md',
+
+ /**
+ * Large size.
+ */
+ LARGE = 'lg',
+}
+
+/**
+ * Chat button kind.
+ */
+export enum CHAT_BUTTON_KIND {
+ /**
+ * Primary button.
+ */
+ PRIMARY = 'primary',
+
+ /**
+ * Secondary button.
+ */
+ SECONDARY = 'secondary',
+
+ /**
+ * Tertiary button.
+ */
+ TERTIARY = 'tertiary',
+
+ /**
+ * Ghost button.
+ */
+ GHOST = 'ghost',
+
+ /**
+ * Danger button.
+ */
+ DANGER = 'danger',
+}
diff --git a/packages/carbon-web-components/src/components/chat-button/index.ts b/packages/carbon-web-components/src/components/chat-button/index.ts
new file mode 100644
index 00000000000..006d1c3a4b0
--- /dev/null
+++ b/packages/carbon-web-components/src/components/chat-button/index.ts
@@ -0,0 +1,11 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2021, 2024
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import './chat-button';
+import './chat-button-skeleton';
diff --git a/packages/styles/package.json b/packages/styles/package.json
index 485cf4137ca..95ab3d20359 100644
--- a/packages/styles/package.json
+++ b/packages/styles/package.json
@@ -31,7 +31,7 @@
"dependencies": {
"@carbon/icons-react": "11.36.0",
"@carbon/layout": "11.20.1",
- "@carbon/styles": "1.49.0",
+ "@carbon/styles": "1.50.0",
"@carbon/telemetry": "0.1.0",
"@carbon/type": "11.25.1"
},
diff --git a/packages/web-components/package.json b/packages/web-components/package.json
index 8d1168abc9f..6b822511712 100644
--- a/packages/web-components/package.json
+++ b/packages/web-components/package.json
@@ -95,7 +95,7 @@
"@carbon/ibmdotcom-utilities": "2.3.0-rc.0",
"@carbon/layout": "11.20.1",
"@carbon/motion": "11.16.1",
- "@carbon/styles": "1.49.0",
+ "@carbon/styles": "1.50.0",
"@carbon/telemetry": "0.1.0",
"@carbon/web-components": "2.3.0-rc.0",
"lit": "^2.7.6",
diff --git a/yarn.lock b/yarn.lock
index 876919fc9cf..39fb62d2396 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3228,7 +3228,7 @@ __metadata:
dependencies:
"@carbon/icons-react": "npm:11.36.0"
"@carbon/layout": "npm:11.20.1"
- "@carbon/styles": "npm:1.49.0"
+ "@carbon/styles": "npm:1.50.0"
"@carbon/telemetry": "npm:0.1.0"
"@carbon/themes": "npm:11.31.0"
"@carbon/type": "npm:11.25.1"
@@ -3337,7 +3337,7 @@ __metadata:
"@carbon/motion": "npm:11.16.1"
"@carbon/pictograms-react": "npm:11.57.0"
"@carbon/react": "npm:1.50.0"
- "@carbon/styles": "npm:1.49.0"
+ "@carbon/styles": "npm:1.50.0"
"@carbon/telemetry": "npm:0.1.0"
"@carbon/type": "npm:11.25.1"
"@carbon/web-components": "npm:2.3.0-rc.0"
@@ -3591,28 +3591,7 @@ __metadata:
languageName: unknown
linkType: soft
-"@carbon/styles@npm:1.49.0":
- version: 1.49.0
- resolution: "@carbon/styles@npm:1.49.0"
- dependencies:
- "@carbon/colors": "npm:^11.20.0"
- "@carbon/feature-flags": "npm:^0.16.0"
- "@carbon/grid": "npm:^11.21.0"
- "@carbon/layout": "npm:^11.20.0"
- "@carbon/motion": "npm:^11.16.0"
- "@carbon/themes": "npm:^11.30.0"
- "@carbon/type": "npm:^11.25.0"
- "@ibm/plex": "npm:6.0.0-next.6"
- peerDependencies:
- sass: ^1.33.0
- peerDependenciesMeta:
- sass:
- optional: true
- checksum: 10/7f44cd8fb479e191e8564b986983c8ce93e5af4ac126555da9f5ca9b5c98585f40b14bbeee3a50c306fb1c72ed6169540faa2e4bad19710838178dcd2b63e605
- languageName: node
- linkType: hard
-
-"@carbon/styles@npm:^1.50.0":
+"@carbon/styles@npm:1.50.0, @carbon/styles@npm:^1.50.0":
version: 1.50.0
resolution: "@carbon/styles@npm:1.50.0"
dependencies:
@@ -3654,18 +3633,6 @@ __metadata:
languageName: node
linkType: hard
-"@carbon/themes@npm:^11.30.0":
- version: 11.30.0
- resolution: "@carbon/themes@npm:11.30.0"
- dependencies:
- "@carbon/colors": "npm:^11.20.0"
- "@carbon/layout": "npm:^11.20.0"
- "@carbon/type": "npm:^11.25.0"
- color: "npm:^4.0.0"
- checksum: 10/e22b61ba5676ec136586b34fd15e297be24dbd6f3ac5d70fbe0e1e1826b00bcd6ebf80355349c9717c6ab606cefec8078697080ecf72af13c1c465732a74ee7a
- languageName: node
- linkType: hard
-
"@carbon/type@npm:11.25.1, @carbon/type@npm:^11.25.0":
version: 11.25.1
resolution: "@carbon/type@npm:11.25.1"
@@ -3698,7 +3665,7 @@ __metadata:
"@carbon/ibm-products-styles": "npm:2.20.1"
"@carbon/icon-helpers": "npm:10.46.0"
"@carbon/icons": "npm:11.36.0"
- "@carbon/styles": "npm:1.49.0"
+ "@carbon/styles": "npm:1.50.0"
"@open-wc/semantic-dom-diff": "npm:~0.18.0"
"@percy-io/in-percy": "npm:^0.1.11"
"@percy/cli": "npm:^1.27.4"