+
+ This component is work in progress and currently in prerelease.
+
+A small rounded visual that sits beside text. Prefer `AccessoryIcon`, `AccessoryFile`,
+`AccessoryMedia`, `AccessoryFavicon`, or `AccessoryCalendar`. Use `Accessory` for custom content.
+
+View the
+[documentation for Accessory](https://workday.github.io/canvas-kit/?path=/docs/labs-accessory--docs)
+on Storybook.
diff --git a/modules/labs-react/accessory/index.ts b/modules/labs-react/accessory/index.ts
new file mode 100644
index 0000000000..991aa8e479
--- /dev/null
+++ b/modules/labs-react/accessory/index.ts
@@ -0,0 +1,6 @@
+export * from './lib/Accessory';
+export * from './lib/AccessoryCalendar';
+export * from './lib/AccessoryFavicon';
+export * from './lib/AccessoryFile';
+export * from './lib/AccessoryIcon';
+export * from './lib/AccessoryMedia';
diff --git a/modules/labs-react/accessory/lib/Accessory.tsx b/modules/labs-react/accessory/lib/Accessory.tsx
new file mode 100644
index 0000000000..0b58d5e6a7
--- /dev/null
+++ b/modules/labs-react/accessory/lib/Accessory.tsx
@@ -0,0 +1,156 @@
+import {cornerShapeStencil, createComponent} from '@workday/canvas-kit-react/common';
+import {systemIconStencil} from '@workday/canvas-kit-react/icon';
+import {CSProps, createStencil, cssVar, handleCsProp} from '@workday/canvas-kit-styling';
+import {base, component, system} from '@workday/canvas-tokens-web';
+
+/**
+ * The size of an `Accessory` tile.
+ *
+ * * `extraSmall` — 16px tile, 16px icon
+ * * `small` — 20px tile, 18px icon
+ * * `medium` — 24px tile, 16px icon
+ * * `large` — 32px tile, 18px icon
+ * * `extraLarge` — 40px tile, 20px icon
+ */
+export type AccessorySize = 'extraSmall' | 'small' | 'medium' | 'large' | 'extraLarge';
+
+export interface AccessoryProps extends CSProps {
+ /**
+ * The size of the tile. Icon glyph size follows the tile through the icon `data-part`: 16px,
+ * 18px, 16px, 18px, and 20px from `extraSmall` to `extraLarge`.
+ *
+ * * `extraSmall` — 16px
+ * * `small` — 20px
+ * * `medium` — 24px
+ * * `large` — 32px
+ * * `extraLarge` — 40px
+ *
+ * @default 'extraLarge'
+ */
+ size?: AccessorySize;
+ /**
+ * The color of the icon. When set, this overrides the icon color from `variant` on
+ * `AccessoryIcon`. Inherited by the icon `data-part` via a CSS variable.
+ */
+ color?: string;
+ /**
+ * The background color of the icon tile. When set, this overrides the fill from `variant` and is
+ * painted at every size, including `small` and `extraSmall`. Inherited by the icon `data-part`
+ * via a CSS variable.
+ */
+ background?: string;
+}
+
+/**
+ * Tile shell for accessory visuals. Owns size, corner radius, icon glyph size, and optional icon
+ * color / fill overrides through the icon `data-part`. Prefer `AccessoryIcon`, `AccessoryFile`, or
+ * `AccessoryMedia`, which render this shell.
+ */
+export const accessoryStencil = createStencil({
+ extends: cornerShapeStencil,
+ vars: {
+ iconColor: '',
+ tileBackground: '',
+ },
+ parts: {
+ icon: 'accessory-icon',
+ },
+ base: ({iconColor, iconPart}) => ({
+ display: 'inline-flex',
+ position: 'relative',
+ alignItems: 'center',
+ justifyContent: 'center',
+ flexShrink: 0,
+ verticalAlign: 'middle',
+ [iconPart]: {
+ position: 'absolute',
+ inset: 0,
+ display: 'flex',
+ alignItems: 'center',
+ justifyContent: 'center',
+ borderRadius: cssVar(cornerShapeStencil.vars.shape),
+ cornerShape: 'superellipse(1.1)',
+ [systemIconStencil.vars.color]: cssVar(iconColor),
+ },
+ }),
+ modifiers: {
+ size: {
+ extraSmall: ({iconPart, tileBackground}) => ({
+ width: system.legacy.size.xxxs,
+ height: system.legacy.size.xxxs,
+ [cornerShapeStencil.vars.shape]: system.legacy.shape.sm,
+ [iconPart]: {
+ [systemIconStencil.vars.size]: base.legacy.size200,
+ backgroundColor: cssVar(tileBackground, 'transparent'),
+ borderWidth: 0,
+ },
+ }),
+ small: ({iconPart, tileBackground}) => ({
+ width: system.legacy.size.xxs,
+ height: system.legacy.size.xxs,
+ [cornerShapeStencil.vars.shape]: system.sana.shape.sm,
+ [iconPart]: {
+ [systemIconStencil.vars.size]: base.legacy.size225,
+ backgroundColor: cssVar(tileBackground, 'transparent'),
+ borderWidth: 0,
+ },
+ }),
+ medium: ({iconPart}) => ({
+ width: system.legacy.size.xs,
+ height: system.legacy.size.xs,
+ [cornerShapeStencil.vars.shape]: system.legacy.shape.md,
+ [iconPart]: {
+ [systemIconStencil.vars.size]: component.legacy.systemIcon.size.xs,
+ },
+ }),
+ large: ({iconPart}) => ({
+ width: system.legacy.size.sm,
+ height: system.legacy.size.sm,
+ [cornerShapeStencil.vars.shape]: base.legacy.size125,
+ [iconPart]: {
+ [systemIconStencil.vars.size]: component.legacy.systemIcon.size.sm,
+ },
+ }),
+ extraLarge: ({iconPart}) => ({
+ width: system.legacy.size.md,
+ height: system.legacy.size.md,
+ [cornerShapeStencil.vars.shape]: system.legacy.shape.lg,
+ [iconPart]: {
+ [systemIconStencil.vars.size]: component.legacy.systemIcon.size.md,
+ },
+ }),
+ },
+ },
+});
+
+/**
+ * `Accessory` is the small rounded visual that sits beside text, most often the leading element in
+ * a list item or other row. It owns the tile size and corner radius so a system icon, file type,
+ * image, site favicon, calendar date, or custom content stays one consistent shape.
+ * `AccessoryIcon`, `AccessoryFile`, `AccessoryMedia`, `AccessoryFavicon`, and `AccessoryCalendar`
+ * render this shell. Accessories are
+ * decorative and always hidden from assistive technology.
+ *
+ * ```tsx
+ *