diff --git a/packages/react/src/components/DataTable/stories/DataTable-slug.stories.js b/packages/react/src/components/DataTable/stories/DataTable-slug.stories.js
index db3280ab59ca..daed3c32ba2c 100644
--- a/packages/react/src/components/DataTable/stories/DataTable-slug.stories.js
+++ b/packages/react/src/components/DataTable/stories/DataTable-slug.stories.js
@@ -22,7 +22,7 @@ import DataTable, {
TableExpandedRow,
} from '..';
import { rows, headers } from './shared';
-import mdx from '../DataTable.mdx';
+import mdx from '../../Slug/SlugDatatable.mdx';
import Button from '../../Button';
import { IconButton } from '../../IconButton';
import { View, FolderOpen, Folders } from '@carbon/icons-react';
diff --git a/packages/react/src/components/Slug/Slug-examples.stories.js b/packages/react/src/components/Slug/Slug-examples.stories.js
index 764fc82ea31b..3a465c790854 100644
--- a/packages/react/src/components/Slug/Slug-examples.stories.js
+++ b/packages/react/src/components/Slug/Slug-examples.stories.js
@@ -40,10 +40,16 @@ import {
} from '@carbon/icons-react';
import { Slug, SlugContent, SlugActions } from '../Slug';
import './slug-story.scss';
+import mdx from './SlugExamples.mdx';
export default {
title: 'Experimental/unstable__Slug/Examples',
component: null,
+ parameters: {
+ docs: {
+ page: mdx,
+ },
+ },
};
const args = {
diff --git a/packages/react/src/components/Slug/Slug-form.stories.js b/packages/react/src/components/Slug/Slug-form.stories.js
index 9552792d35fb..ba392c09f083 100644
--- a/packages/react/src/components/Slug/Slug-form.stories.js
+++ b/packages/react/src/components/Slug/Slug-form.stories.js
@@ -26,6 +26,7 @@ import { IconButton } from '../IconButton';
import { View, FolderOpen, Folders } from '@carbon/icons-react';
import { Slug, SlugContent, SlugActions } from '.';
import './slug-story.scss';
+import mdx from './SlugForm.mdx';
export default {
title: 'Experimental/unstable__Slug/Form',
@@ -33,6 +34,11 @@ export default {
subcomponents: {
Slug,
},
+ parameters: {
+ docs: {
+ page: mdx,
+ },
+ },
};
const numberInputProps = {
diff --git a/packages/react/src/components/Slug/Slug.mdx b/packages/react/src/components/Slug/Slug.mdx
index e965047ad7c5..8e1b20b27fb1 100644
--- a/packages/react/src/components/Slug/Slug.mdx
+++ b/packages/react/src/components/Slug/Slug.mdx
@@ -1 +1,200 @@
-Hello
+import { ArgsTable, Canvas, Story } from '@storybook/blocks';
+import { Slug, SlugContent, SlugActions } from '../Slug';
+import * as SlugStories from './Slug.stories';
+
+# Slug
+
+[Source code](https://github.com/carbon-design-system/carbon/tree/main/packages/react/src/components/Slug)
+|
+[Slug release status](https://airtable.com/appCAqlGVN8tRUbAp/shr71ZyLlIGORz3Vh/tblHqPusgkK8hIeHo)
+|
+[Using AI-enhanced components in V10](https://github.com/carbon-design-system/carbon-for-ai/blob/main/docs/support-for-carbon-v10.md)
+
+## Table of Contents
+
+- [Overview](#overview)
+- [Slug anatomy](#slug-anatomy)
+- [Component API](#component-api)
+ - [Slug `aiText`](#slug-aitext)
+ - [Slug `aiTextLabel`](#slug-aitextlabel)
+ - [Slug `dotType`](#slug-dottype)
+ - [Slug `kind`](#slug-kind)
+ - [Slug `revertActive` and `onRevertClick`](#slug-revertactive-and-onrevertclick)
+- [Feedback](#feedback)
+
+## Overview
+
+The AI slug is intended for any scenario where something is being generated by
+(or with) AI to reinforce AI transparency, accountability, and explainability at
+any interface level. This also enables more effective recognition and recall of
+AI instances in a way that is identifiable across any IBM product.
+
+
+
+## Slug anatomy
+
+The `Slug` itself is a button that acts as a `Toggletip` trigger. To construct
+the contents of the `Slug` callout, you can place the desired elements as a
+child of `Slug` in `SlugContent`, like so:
+
+```jsx
+
+
+ {Content Here}
+
+
+```
+
+The `Slug` also supports the rendering of an action bar at the bottom of the
+callout. To achieve this, you can pass in `SlugActions` as a child of `Slug`,
+placed inside the `SlugContent`
+
+```jsx
+
+
+ {Content Here}
+ {Optional Slug action bar}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+## Component API
+
+
+
+### Slug `aiText`
+
+If needed, you can change the text inside the `Slug` when translating to
+different languages.
+
+
+ Explanation of AI generated content
+
+
+```jsx
+
+ Explanation of AI-generated content
+
+```
+
+### Slug `aiTextLabel`
+
+When using the `inline` variant, you can add text adjacent to the AI label with
+the `aiTextLabel` prop.
+
+
+ Explanation of AI generated content
+
+
+
+ Explanation of AI generated content
+
+
+```jsx
+
+ Explanation of AI generated content
+
+
+
+ Explanation of AI generated content
+
+```
+
+### Slug `dotType`
+
+When using the `inline` variant, you can switch between the `hollow` slug for
+content that does not need additional explainability or the `default` variant
+that will render the AI callout.
+
+
+ Explanation of AI generated content
+
+
+
+ Explanation of AI generated content
+
+
+```jsx
+
+ Explanation of AI generated content
+
+
+
+ Explanation of AI generated content
+
+```
+
+### Slug `kind`
+
+The `Slug` component has three variants, `default`, `hollow`, and `inline`. The
+`hollow` slugs represent items that don’t have any additional explainability.
+Therefore they don’t use the AI callout and instead use the standard Carbon
+tooltip, with a simple message.
+
+
+ AI was used to generate this content
+
+
+```jsx
+
+ AI was used to generate this content
+
+```
+
+The `inline` `Slug` with the standard icon can also trigger the AI
+explainability callout.
+
+
+ Explanation of AI generated content
+
+
+```jsx
+
+ Explanation of AI-generated content
+
+```
+
+### Slug `revertActive` and `onRevertClick`
+
+`revertActive` is a boolean prop that can be set on `Slug` that transforms the
+`Slug` into a revert action button. This is useful if a user edits an
+AI-generated input to show that the element has been modified. This can be used
+in conjunction with the `onRevertClick` callback to handle restoring the element
+to the AI-generated state. For an example, please take a look at the
+[Revert Test story](https://react.carbondesignsystem.com/?path=/story/experimental-unstable-slug-form--revert-test)
+or take a look at the example story
+[source code](https://github.com/carbon-design-system/carbon/blob/main/packages/react/src/components/Slug/Slug-form.stories.js#L96).
+
+## Feedback
+
+Help us improve this component by providing feedback, asking questions on Slack,
+or updating this file on
+[GitHub](https://github.com/carbon-design-system/carbon/edit/main/packages/react/src/components/Slug/Slug.mdx).
diff --git a/packages/react/src/components/Slug/SlugDatatable.mdx b/packages/react/src/components/Slug/SlugDatatable.mdx
new file mode 100644
index 000000000000..fe6a4551d06c
--- /dev/null
+++ b/packages/react/src/components/Slug/SlugDatatable.mdx
@@ -0,0 +1,153 @@
+import { ArgsTable, Canvas, Story } from '@storybook/blocks';
+import { Slug, SlugContent, SlugActions } from '.';
+import * as SlugStories from '../DataTable/stories/DataTable-slug.stories';
+
+# Slug
+
+[Source code](https://github.com/carbon-design-system/carbon/tree/main/packages/react/src/components/Slug)
+|
+[Slug release status](https://airtable.com/appCAqlGVN8tRUbAp/shr71ZyLlIGORz3Vh/tblHqPusgkK8hIeHo)
+|
+[Using AI-enhanced components in V10](https://github.com/carbon-design-system/carbon-for-ai/blob/main/docs/support-for-carbon-v10.md)
+
+## Table of Contents
+
+- [Overview](#overview)
+- [Slug anatomy](#slug-anatomy)
+- [Using Slug in DataTable](#using-slug-in-datatable)
+ - [Using as a column header](#using-as-a-column-header)
+ - [Using in a row](#using-in-a-row)
+- [Feedback](#feedback)
+
+## Overview
+
+The `DataTable` supports placing a `slug` in both the column header and row.
+
+
+
+## Slug anatomy
+
+The `Slug` itself is a button that acts as a `Toggletip` trigger. To construct
+the contents of the `Slug` callout, you can place the desired elements as a
+child of `Slug` in `SlugContent`, like so:
+
+```jsx
+
+
+ {Content Here}
+
+
+```
+
+The `Slug` also supports the rendering of an action bar at the bottom of the
+callout. To achieve this, you can pass in `SlugActions` as a child of `Slug`,
+placed inside the `SlugContent`
+
+```jsx
+
+
+ {Content Here}
+ {Optional Slug action bar}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+## Using `slug` in `DataTable`
+
+### Using as a column header
+
+To use a `Slug` inside a column header, you'll need to add a `slug` to the
+appropriate column data.
+
+```jsx
+const columnSlugHeaders = [
+ {
+ key: 'name',
+ header: 'Name',
+ },
+ {
+ key: 'attached_groups',
+ header: 'Attached groups',
+ slug: (
+
+
+
+
AI Explained
+
84%
+
Confidence score
+
+ Lorem ipsum dolor sit amet, di os consectetur adipiscing elit, sed
+ do eiusmod tempor incididunt ut fsil labore et dolore magna
+ aliqua.
+
+
+
Model type
+
Foundation model
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ),
+ },
+];
+```
+
+To ensure the table cells are styled appropriately, you'll need to use the new
+`getCellProps` prop getter, like so:
+
+```jsx
+
+ {cell.value}
+
+```
+
+### Using in a row
+
+To use a `Slug` inside a `DataTable` row, you'll need to pass in your `Slug`
+component to `TableSlugRow`:
+
+```jsx
+
+ {rows.map((row, i) => (
+
+
+
+ {row.cells.map((cell) => (
+ {cell.value}
+ ))}
+
+ ))}
+
+```
+
+## Feedback
+
+Help us improve this component by providing feedback, asking questions on Slack,
+or updating this file on
+[GitHub](https://github.com/carbon-design-system/carbon/edit/main/packages/react/src/components/Slug/SlugDatatable.mdx).
diff --git a/packages/react/src/components/Slug/SlugExamples.mdx b/packages/react/src/components/Slug/SlugExamples.mdx
new file mode 100644
index 000000000000..4cee99885b89
--- /dev/null
+++ b/packages/react/src/components/Slug/SlugExamples.mdx
@@ -0,0 +1,97 @@
+# Slug
+
+[Source code](https://github.com/carbon-design-system/carbon/tree/main/packages/react/src/components/Slug)
+|
+[Slug release status](https://airtable.com/appCAqlGVN8tRUbAp/shr71ZyLlIGORz3Vh/tblHqPusgkK8hIeHo)
+|
+[Using AI-enhanced components in V10](https://github.com/carbon-design-system/carbon-for-ai/blob/main/docs/support-for-carbon-v10.md)
+
+## Table of Contents
+
+- [Overview](#overview)
+- [Slug anatomy](#slug-anatomy)
+- List of components that accept `Slug`
+ - [Checkbox](?path=/story/experimental-unstable-slug-examples--checkbox)
+ - [Combobox](?path=/story/experimental-unstable-slug-examples--combobox)
+ - [Composed Modal](?path=/story/experimental-unstable-slug-examples--composed-modal)
+ - [Data Table](?path=/story/experimental-unstable-slug-datatable--slug-with-expansion)
+ - [Date Picker](?path=/story/experimental-unstable-slug-examples--date-picker)
+ - [Dropdown](?path=/story/experimental-unstable-slug-examples--dropdown)
+ - [Filterable Multiselect](?path=/story/experimental-unstable-slug-examples--filterable-multiselect)
+ - [Modal](?path=/story/experimental-unstable-slug-examples--modal)
+ - [Multiselect](?path=/story/experimental-unstable-slug-examples--multiselect)
+ - [Number Input](?path=/story/experimental-unstable-slug-examples--number-input)
+ - [Radio Button](?path=/story/experimental-unstable-slug-examples--radio-button)
+ - [Select](?path=/story/experimental-unstable-slug-examples--select)
+ - [Tag](?path=/story/experimental-unstable-slug-examples--tag)
+ - [Text Area](?path=/story/experimental-unstable-slug-examples--text-area)
+ - [Text Input](?path=/story/experimental-unstable-slug-examples--text-input)
+ - [Tile](?path=/story/experimental-unstable-slug-examples--tile)
+- [Feedback](#feedback)
+
+## Overview
+
+The AI slug is intended for any scenario where something is being generated by
+(or with) AI to reinforce AI transparency, accountability, and explainability at
+any interface level. This also enables more effective recognition and recall of
+AI instances in a way that is identifiable across any IBM product.
+
+## Slug anatomy
+
+The `Slug` itself is a button that acts as a `Toggletip` trigger. To construct
+the contents of the `Slug` callout, you can place the desired elements as a
+child of `Slug` in `SlugContent`, like so:
+
+```jsx
+
+
+ {Content Here}
+
+
+```
+
+The `Slug` also supports the rendering of an action bar at the bottom of the
+callout. To achieve this, you can pass in `SlugActions` as a child of `Slug`,
+placed inside the `SlugContent`
+
+```jsx
+
+
+ {Content Here}
+ {Optional Slug action bar}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+To render the `Slug` inside a component, simply pass the `Slug` via the `slug`
+prop on the desired component.
+
+```jsx
+const slug = (
+
+
+ {Content Here}
+
+
+);
+
+
+```
+
+## Feedback
+
+Help us improve this component by providing feedback, asking questions on Slack,
+or updating this file on
+[GitHub](https://github.com/carbon-design-system/carbon/edit/main/packages/react/src/components/Slug/SlugExamples.mdx).
diff --git a/packages/react/src/components/Slug/SlugForm.mdx b/packages/react/src/components/Slug/SlugForm.mdx
new file mode 100644
index 000000000000..48afbe989a47
--- /dev/null
+++ b/packages/react/src/components/Slug/SlugForm.mdx
@@ -0,0 +1,19 @@
+# Slug
+
+[Source code](https://github.com/carbon-design-system/carbon/tree/main/packages/react/src/components/Slug)
+|
+[Slug release status](https://airtable.com/appCAqlGVN8tRUbAp/shr71ZyLlIGORz3Vh/tblHqPusgkK8hIeHo)
+|
+[Using AI-enhanced components in V10](https://github.com/carbon-design-system/carbon-for-ai/blob/main/docs/support-for-carbon-v10.md)
+
+## Table of Contents
+
+- [Slug API docs](https://react.carbondesignsystem.com/?path=/story/experimental-unstable-slug--overview)
+- [Slug-enabled components](https://react.carbondesignsystem.com/?path=/story/experimental-unstable-slug-examples--overview)
+- [Feedback](#feedback)
+
+## Feedback
+
+Help us improve this component by providing feedback, asking questions on Slack,
+or updating this file on
+[GitHub](https://github.com/carbon-design-system/carbon/edit/main/packages/react/src/components/Slug/SlugForm.mdx).
diff --git a/packages/react/src/components/Slug/slug-story.scss b/packages/react/src/components/Slug/slug-story.scss
index cb5e3973c7ff..f2093e0557e6 100644
--- a/packages/react/src/components/Slug/slug-story.scss
+++ b/packages/react/src/components/Slug/slug-story.scss
@@ -156,3 +156,11 @@
.slug-modal .cds--form-item {
margin-top: 1rem;
}
+
+.sbdocs-slug .cds--slug__text {
+ font-size: 0.75rem;
+}
+
+.sbdocs-slug .cds--toggletip-content {
+ font-size: 0.875rem;
+}