AI button is a UI element that triggers an AI-related action or event.
+
+
-For the two types of button, OUDS Web has a common base `.btn` class that sets up default styles such as padding and content alignment. By default, `.btn` controls have a transparent border and background color, but still defines basic focus and hover styles. The `.btn` class is intended to be used in conjunction with our button variants, or to serve as a basis for your own custom styles. The most basic button is the `.btn-default` variant.
+For the three types of button, OUDS Web has a common base `.btn` class that sets up default styles such as padding and content alignment. By default, `.btn` controls have a transparent border and background color, but still defines basic focus and hover styles. The `.btn` class is intended to be used in conjunction with our button variants, or to serve as a basis for your own custom styles. The most basic button is the `.btn-default` variant.
Default`} />
Next`} />
+Default`} />
+
### Accessibility (semantics)
The `.btn` classes are designed to be used with the ``} />
+#### Skeleton
+
+
+
+
+
+
+
`} />
+
+## [[comp]] AI button
+
+
+ The AI button component is not yet designed, and this component is only a draft for the moment. It will be updated in the future with the final design and will certainly need adjustments regarding the DOM. Use it as a temporary component to speed up your development.
+
+
+AI button is a UI element that enables AI use in an interface. AI buttons are typically used to open a chatbot or trigger AI-powered actions.
+
+You can use `.btn-ai` class to indicate AI actions in a process or a flow. This class will add an icon before the button text. As AI buttons generally indicate an AI-related action, in our examples, we have used `
+
+
+
+ `} />
+
+
+
+
+ Default
+
+
+
+
+ `} />
+
+
+
+ `.btn-default` isn't transparent here, and you might specify `--bs-btn-bg` to make it transparent if needed.
+
+
+
+
+
+ `} />
+
+#### Icon only
+
+Add the class `.btn-icon` to get a squared button that only contains an icon. Make sure to provide an accessible name to your button, either using a `.visually-hidden` content or an `aria-label` attribute.
+
+
+
+ Be aware that `.btn-strong` and `.btn-minimal` variants should use a colored icon to indicate the AI action. It will be automatically replaced when not present or when needed.
+
+
+ See symbol to integrate
+
+
+
+
+
+
+
+
+ `} />
+
+
+
+Default
+
+
+
+ `} />
+
+
+
+Default
+
+
+
+ `} />
+
+
+
+ `.btn-default` isn't transparent here, and you might specify `--bs-btn-bg` to make it transparent if needed.
+
+
+
+
+
+ `} />
+
+
+ #### Rounded corners
+
+ Rounded corners AI buttons is a project-wide option therefore all your buttons should either be rounded or not. Add `.use-rounded-corner-buttons` on a top container (for example ``) to use rounded corners.
+
+
+ Rounded corners could be used in more emotional, immersive contexts or those tied to specific visual identities. **For standard or business-oriented usage, keep the default square corners.**
+
+
+
+ We use a `
` as a parent container because we cannot use `` in an example.
+
+
+
+
+
+
`} />
+
+
+### States
+
+#### Disabled
+
+AI buttons use a `
+ `} />
+
+#### Loading
+
+The loading state of an AI button indicates that an action is currently processing or taking place. This state provides feedback to users, enhancing user experience.
+
+Please refer to the [loading state section of the button component](#loading) for guidelines on how to implement loading states, as well as a JavaScript example and a live demo.
+
+
+ Default
+
+ Loading answer
+ `} />
+
+#### Skeleton
+
+
+
+
+
+ `} />
diff --git a/site/src/content/docs/getting-started/migration-from-boosted.mdx b/site/src/content/docs/getting-started/migration-from-boosted.mdx
index a317ea36ef..62b9d71c88 100644
--- a/site/src/content/docs/getting-started/migration-from-boosted.mdx
+++ b/site/src/content/docs/getting-started/migration-from-boosted.mdx
@@ -134,6 +134,7 @@ All responsive classes, helpers, and utilities have been updated accordingly to
- New `.btn-default`, `.btn-strong`, `.btn-brand`, `.btn-minimal`, and `.btn-negative` have been added.
- New `.btn-previous` and `.btn-next` have been added.
+- New `.btn-ai` has been added.
- New `.btn-on-colored-bg` has been added; it can be used with `.btn-default`, `.btn-strong` and `.btn-minimal` to get variants on colored backgrounds (neither primary, nor secondary, nor tertiary, nor emphasized backgrounds).
- New `.use-rounded-corner-buttons` have been added; it can be added on `` to toggle project-wide rounded corners buttons.
- Breaking `.btn-primary`, `.btn-secondary`, `.btn-success`, `.btn-danger`, `.btn-warning`, `.btn-info`, `.btn-light`, `.btn-dark` and `btn-dropdown` have been removed. You can still have them using `$enable-bootstrap-compatibility`. Here is the visual correspondence:
diff --git a/site/src/content/docs/getting-started/migration.mdx b/site/src/content/docs/getting-started/migration.mdx
index 8c1cd4d3ae..059eb35940 100644
--- a/site/src/content/docs/getting-started/migration.mdx
+++ b/site/src/content/docs/getting-started/migration.mdx
@@ -9,6 +9,14 @@ aliases:
toc: true
---
+## v1.3.0
+
+### Components
+
+#### AI button
+
+- New AI button has been implemented. Read more in our [buttons page]([[docsref:/components/buttons#ai-button]]).
+
## v1.2.0
diff --git a/site/static/orange-compact/docs/[version]/assets/img/ouds-web-sprite.svg b/site/static/orange-compact/docs/[version]/assets/img/ouds-web-sprite.svg
index 616b97958c..2c64bde72a 100644
--- a/site/static/orange-compact/docs/[version]/assets/img/ouds-web-sprite.svg
+++ b/site/static/orange-compact/docs/[version]/assets/img/ouds-web-sprite.svg
@@ -177,4 +177,13 @@
+
+
+
+
+
+
+
+
+
diff --git a/site/static/orange/docs/[version]/assets/img/ouds-web-sprite.svg b/site/static/orange/docs/[version]/assets/img/ouds-web-sprite.svg
index 616b97958c..2c64bde72a 100644
--- a/site/static/orange/docs/[version]/assets/img/ouds-web-sprite.svg
+++ b/site/static/orange/docs/[version]/assets/img/ouds-web-sprite.svg
@@ -177,4 +177,13 @@
+
+
+
+
+
+
+
+
+
diff --git a/site/static/sosh/docs/[version]/assets/img/ouds-web-sprite.svg b/site/static/sosh/docs/[version]/assets/img/ouds-web-sprite.svg
index f485900452..724cd50adf 100644
--- a/site/static/sosh/docs/[version]/assets/img/ouds-web-sprite.svg
+++ b/site/static/sosh/docs/[version]/assets/img/ouds-web-sprite.svg
@@ -158,4 +158,8 @@
+
+
+
+