Skip to Content
Workday Design
Design SystemBrand Resources
CTRL K

Accessory

Accessory renders a single leading visual for a list-item-style row.

Sources

Github

Storybook

Install

yarn add @workday/canvas-kit-labs-react

Component Type

Indicator

Platform

Web

Component

Sana Canvas

Delivery Channels

Web

Version

16.2.12

Experience Surfaces

Page Body Inline

Component Type

Indicator

Platform

Web

Component

Sana Canvas

Delivery Channels

Web

Version

16.2.12

Experience Surfaces

Page Body Inline

Anatomy

Image of an Accessory component anatomy with annotation markers.
  1. File: A file-type icon, used when the leading visual represents a file. Covers PDF, spreadsheet/CSV, doc, slides, video, generic file, TXT, or an empty/blank state. 
  2. Avatar: A profile photo or initials, used when the leading visual represents a person. 
  3. Icon: A symbolic graphic, used when the leading visual isn’t a person, file, or image. 
  4. Image: A thumbnail preview, used when the leading visual is an image or document render.

Variations

Icon

Introduced in v16, with 45 variants. Renders on a transparent background with a default border. Icon sizes map to the published size/icon tokens for density consistency.

Image

10 variants, covering thumbnail and render styles. A presentation-only container that displays a thumbnail image as the leading visual.

Avatar

Renders a profile photo or initials as the leading visual. Used in chat messages, contact rows, and profile summaries. See Avatar component.

File

Introduced in v16, with 45 variants. Covers PDF, spreadsheet/CSV, doc, slides, video, generic file, TXT, and an empty/blank state. Renders on an alt surface background with a default border. Used standalone or as one of Accessory’s wrapped types.

Usage Guidance

Accessory keeps consuming components, such as a list item, chat message row, or card, from having to branch on the underlying visual type. This mirrors the wrapper pattern already used elsewhere in the design system: a stable abstraction lets consuming teams avoid reacting to every underlying implementation change.

When to Use

  • The row needs a single, static leading visual, such as a symbol, thumbnail, person, or file, and nothing else.
  • The surface should stay decoupled from which visual type is actually rendered.

When to Use Something Else

  • You need an interactive, chat-specific file affordance with upload and remove states: use the Attachment pattern instead. Accessory is presentation-only; File and Attachment are not the same component.

Examples

Basic Example

Accessory is only the tile — size and corner radius. It does not render a visual by itself. Use a targeted accessory instead: AccessoryIcon for a system icon, AccessoryFile for a file type, AccessoryMedia for an image (optionally with an icon on a scrim), AccessoryFavicon for a site favicon, or AccessoryCalendar for a month and day. Put custom content inside Accessory when none of those fit the row.

import {
  AccessoryFile,
  AccessoryIcon,
  AccessoryMedia,
} from '@workday/canvas-kit-labs-react/accessory';
import {createStyles} from '@workday/canvas-kit-styling';
import {checkIcon, playCircleIcon} from '@workday/canvas-system-icons-web';
import {system} from '@workday/canvas-tokens-web';

const rowStyles = createStyles({
  display: 'flex',
  alignItems: 'center',
  gap: system.gap.sm,
  flexWrap: 'wrap',
});

export default () => (
  <div className={rowStyles}>
    <AccessoryIcon icon={checkIcon} variant="blue" />
    <AccessoryFile type="pdf" />
    <AccessoryMedia icon={playCircleIcon} src="https://picsum.photos/seed/accessory/200/200" />
  </div>
);

Icon

AccessoryIcon renders a system icon in the tile. variant sets the fill and icon color.

import {AccessoryIcon} from '@workday/canvas-kit-labs-react/accessory';
import {createStyles} from '@workday/canvas-kit-styling';
import {checkIcon} from '@workday/canvas-system-icons-web';
import {system} from '@workday/canvas-tokens-web';

const rowStyles = createStyles({
  display: 'flex',
  alignItems: 'center',
  gap: system.gap.sm,
});

export default () => (
  <div className={rowStyles}>
    <AccessoryIcon icon={checkIcon} />
    <AccessoryIcon icon={checkIcon} variant="blue" />
  </div>
);

Media

AccessoryMedia fills the tile with an image. The image stays hidden until it loads. Pass icon to center a glyph on a contrast scrim.

import {AccessoryMedia} from '@workday/canvas-kit-labs-react/accessory';

export default () => <AccessoryMedia src="https://picsum.photos/seed/accessory/200/200" />;

Favicon

AccessoryFavicon resolves a brand mark from a site URL or domain. The browser requests that mark from Google’s favicon service, which receives the hostname and the user’s IP. The image uses referrerPolicy="no-referrer", so the app origin is not sent. At large and extraLarge the mark sits inset in an outlined tile. At medium and smaller it fills the tile.

import {AccessoryFavicon} from '@workday/canvas-kit-labs-react/accessory';
import {createStyles} from '@workday/canvas-kit-styling';
import {system} from '@workday/canvas-tokens-web';

const rowStyles = createStyles({
  display: 'flex',
  alignItems: 'center',
  gap: system.gap.sm,
});

export default () => (
  <div className={rowStyles}>
    <AccessoryFavicon size="medium" url="workday.com" />
    <AccessoryFavicon url="design.workday.com" />
  </div>
);

File

AccessoryFile renders a file type through the shared icon graphic. type chooses the glyph and is a stencil modifier for the fill and icon color. Colored types keep their accent fill at every size. file and txt use surface.alt and a default border.

import {AccessoryFile, AccessoryFileType} from '@workday/canvas-kit-labs-react/accessory';
import {createStyles} from '@workday/canvas-kit-styling';
import {system} from '@workday/canvas-tokens-web';

const rowStyles = createStyles({
  display: 'flex',
  alignItems: 'center',
  gap: system.gap.sm,
  flexWrap: 'wrap',
});

const types: AccessoryFileType[] = [
  'pdf',
  'spreadsheet',
  'document',
  'presentation',
  'video',
  'file',
  'txt',
];

export default () => (
  <div className={rowStyles}>
    {types.map(type => (
      <AccessoryFile key={type} type={type} />
    ))}
    <AccessoryFile size="large" type="pdf" />
  </div>
);

Calendar

AccessoryCalendar stacks a month label over the day. Pass month and date. The month uses a critical color. The day uses the default foreground color. Both scale with size.

import {AccessoryCalendar} from '@workday/canvas-kit-labs-react/accessory';
import {createStyles} from '@workday/canvas-kit-styling';
import {system} from '@workday/canvas-tokens-web';

const rowStyles = createStyles({
  display: 'flex',
  alignItems: 'center',
  gap: system.gap.sm,
});

export default () => (
  <div className={rowStyles}>
    <AccessoryCalendar date={30} month="Apr" />
    <AccessoryCalendar date={1} month="May" />
    <AccessoryCalendar date={24} month="Dec" />
  </div>
);

Custom

Use Accessory when the row needs content that is not a system icon, file type, image, or favicon. Set accessoryStencil.vars.iconColor and accessoryStencil.vars.tileBackground to recolor the tile. The icon data-part keeps the tile’s corner radius.

import {
  AccessoryFile,
  AccessoryMedia,
  accessoryStencil,
} from '@workday/canvas-kit-labs-react/accessory';
import {createStencil, createStyles} from '@workday/canvas-kit-styling';
import {checkIcon} from '@workday/canvas-system-icons-web';
import {system} from '@workday/canvas-tokens-web';

const columnStyles = createStyles({
  display: 'flex',
  flexDirection: 'column',
  gap: system.gap.md,
});

const rowStyles = createStyles({
  display: 'flex',
  alignItems: 'center',
  gap: system.gap.sm,
});

const labelStyles = createStyles({
  display: 'flex',
  flexDirection: 'column',
  alignItems: 'center',
  gap: system.gap.xs,
});

const customFileStencil = createStencil({
  base: {
    [accessoryStencil.vars.iconColor]: system.color.fg.inverse,
    [accessoryStencil.vars.tileBackground]: system.color.accent.info,
  },
});

const photo =
  'data:image/svg+xml,' +
  encodeURIComponent(
    `<svg xmlns="http://www.w3.org/2000/svg" width="160" height="80" viewBox="0 0 160 80">
      <rect width="160" height="80" fill="#1c2833"/>
      <circle cx="40" cy="40" r="22" fill="#243140"/>
      <circle cx="80" cy="28" r="18" fill="#0e1620"/>
      <circle cx="118" cy="48" r="24" fill="#2c3a48"/>
    </svg>`
  );

export default () => (
  <div className={columnStyles}>
    <div className={rowStyles}>
      <AccessoryMedia icon={checkIcon} src={photo} />
      <AccessoryMedia icon={checkIcon} objectFit="contain" src={photo} />
    </div>
    <div className={rowStyles}>
      <div className={labelStyles}>
        <AccessoryFile type="pdf" />
      </div>
      <div className={labelStyles}>
        <AccessoryFile
          background={system.color.accent.warning}
          color={system.color.fg.warning.strong}
          type="pdf"
        />
      </div>
      <div className={labelStyles}>
        <AccessoryFile cs={customFileStencil()} type="pdf" />
      </div>
    </div>
  </div>
);

Sizes

size is a shared Accessory prop on each component. extraLarge (40px) is the default.

extraSmall

small

medium

large

extraLarge

import {AccessoryIcon} from '@workday/canvas-kit-labs-react/accessory';
import {Subtext} from '@workday/canvas-kit-react/text';
import {createStyles, px2rem} from '@workday/canvas-kit-styling';
import {checkIcon} from '@workday/canvas-system-icons-web';
import {system} from '@workday/canvas-tokens-web';

const containerStyles = createStyles({
  display: 'flex',
  flexDirection: 'column',
  gap: system.gap.md,
});

const rowStyles = createStyles({
  display: 'flex',
  alignItems: 'center',
  gap: system.gap.md,
  p: {
    minWidth: px2rem(104),
    margin: 0,
  },
});

const sizes = ['extraSmall', 'small', 'medium', 'large', 'extraLarge'] as const;

export default () => (
  <div className={containerStyles}>
    {sizes.map(size => (
      <div className={rowStyles} key={size}>
        <Subtext size="large">{size}</Subtext>
        <AccessoryIcon icon={checkIcon} size={size} />
      </div>
    ))}
  </div>
);

Variants

variant is set on AccessoryIcon. It pairs an icon color with a tile fill. The fill is painted at medium, large, and extraLarge. outline adds a default border at those larger sizes.

import {AccessoryIcon, AccessoryIconVariant} from '@workday/canvas-kit-labs-react/accessory';
import {createStyles} from '@workday/canvas-kit-styling';
import {checkIcon} from '@workday/canvas-system-icons-web';
import {system} from '@workday/canvas-tokens-web';

const rowStyles = createStyles({
  display: 'flex',
  alignItems: 'center',
  gap: system.gap.sm,
  flexWrap: 'wrap',
});

const variants: AccessoryIconVariant[] = [
  'grey',
  'green',
  'blue',
  'purple',
  'amber',
  'magenta',
  'red',
  'orange',
  'outline',
];

export default () => (
  <div className={rowStyles}>
    {variants.map(variant => (
      <AccessoryIcon key={variant} icon={checkIcon} variant={variant} />
    ))}
  </div>
);

Accessibility

Accessory components are presentational and always aria-hidden. Images use an empty alt because assistive technology does not see content inside that tile. Name the item in adjacent text instead of on the accessory. They are not buttons and do not take click or keyboard handlers.

Component API

Accessory

Accessory

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.

<AccessoryIcon icon={activityIcon} />

Props

Props extend from span. Changing the as prop will change the element interface.

NameTypeDescriptionDefault
size

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
'extraLarge'
colorstring

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.

backgroundstring

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.

cs

The cs prop takes in a single value or an array of values. You can pass the CSS class name returned by , or the result of and . If you're extending a component already using cs, you can merge that prop in as well. Any style that is passed to the cs prop will override style props. If you wish to have styles that are overridden by the css prop, or styles added via the styled API, use wherever elemProps is used. If your component needs to also handle style props, use instead.

import {handleCsProp} from '@workday/canvas-kit-styling';
import {mergeStyles} from '@workday/canvas-kit-react/layout';

// ...

// `handleCsProp` handles compat mode with Emotion's runtime APIs. `mergeStyles` has the same
// function signature, but adds support for style props.

return (
 <Element
   {...handleCsProp(elemProps, [
     myStyles,
     myModifiers({ size: 'medium' }),
     myVars({ backgroundColor: 'red' })
   ])}
 >
   {children}
 </Element>
)
childrenReact.ReactNode
asReact.ElementType

Optional override of the default element used by the component. Any valid tag or Component. If you provided a Component, this component should forward the ref using React.forwardRefand spread extra props to a root element.

Note: Not all elements make sense and some elements may cause accessibility issues. Change this value with care.

span
refReact.Ref<R = span>

Optional ref. If the component represents an element, this ref will be a reference to the real DOM element of the component. If as is set to an element, it will be that element. If as is a component, the reference will be to that component (or element if the component uses React.forwardRef).

AccessoryIcon

AccessoryIcon

AccessoryIcon renders a system icon in an accessory tile. variant sets the tile fill and icon color. color and background on the shared Accessory props override the variant. The glyph size comes from size on Accessory through the icon data-part. Always decorative.

Props

Props extend from span. Changing the as prop will change the element interface.

NameTypeDescriptionDefault
icon | 

The icon to display from @workday/canvas-system-icons-web.

variant

The color treatment of the icon and, at medium and above, the tile fill. color and background from Accessory override these. Variant fills stay hidden at small and extraSmall unless background is set.

'grey'
size

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
'extraLarge'
colorstring

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.

backgroundstring

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.

cs

The cs prop takes in a single value or an array of values. You can pass the CSS class name returned by , or the result of and . If you're extending a component already using cs, you can merge that prop in as well. Any style that is passed to the cs prop will override style props. If you wish to have styles that are overridden by the css prop, or styles added via the styled API, use wherever elemProps is used. If your component needs to also handle style props, use instead.

import {handleCsProp} from '@workday/canvas-kit-styling';
import {mergeStyles} from '@workday/canvas-kit-react/layout';

// ...

// `handleCsProp` handles compat mode with Emotion's runtime APIs. `mergeStyles` has the same
// function signature, but adds support for style props.

return (
 <Element
   {...handleCsProp(elemProps, [
     myStyles,
     myModifiers({ size: 'medium' }),
     myVars({ backgroundColor: 'red' })
   ])}
 >
   {children}
 </Element>
)
childrenReact.ReactNode
asReact.ElementType

Optional override of the default element used by the component. Any valid tag or Component. If you provided a Component, this component should forward the ref using React.forwardRefand spread extra props to a root element.

Note: Not all elements make sense and some elements may cause accessibility issues. Change this value with care.

span
refReact.Ref<R = span>

Optional ref. If the component represents an element, this ref will be a reference to the real DOM element of the component. If as is set to an element, it will be that element. If as is a component, the reference will be to that component (or element if the component uses React.forwardRef).

AccessoryFile

AccessoryFile

AccessoryFile renders a file-type tile. type chooses the glyph and sets the fill and icon color. Colored types keep their fill at every size. Generic file and text use surface.alt and a border.default stroke. Always decorative.

Props

Props extend from span. Changing the as prop will change the element interface.

NameTypeDescriptionDefault
type

The file type. Chooses the glyph and sets the tile fill and icon color through a stencil modifier. Colored types keep their accent fill at every size. file and txt use surface.alt with a border.default stroke. video uses surface.alt and an inverse icon. color and background override the type colors.

'file'
size

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
'extraLarge'
colorstring

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.

backgroundstring

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.

cs

The cs prop takes in a single value or an array of values. You can pass the CSS class name returned by , or the result of and . If you're extending a component already using cs, you can merge that prop in as well. Any style that is passed to the cs prop will override style props. If you wish to have styles that are overridden by the css prop, or styles added via the styled API, use wherever elemProps is used. If your component needs to also handle style props, use instead.

import {handleCsProp} from '@workday/canvas-kit-styling';
import {mergeStyles} from '@workday/canvas-kit-react/layout';

// ...

// `handleCsProp` handles compat mode with Emotion's runtime APIs. `mergeStyles` has the same
// function signature, but adds support for style props.

return (
 <Element
   {...handleCsProp(elemProps, [
     myStyles,
     myModifiers({ size: 'medium' }),
     myVars({ backgroundColor: 'red' })
   ])}
 >
   {children}
 </Element>
)
childrenReact.ReactNode
asReact.ElementType

Optional override of the default element used by the component. Any valid tag or Component. If you provided a Component, this component should forward the ref using React.forwardRefand spread extra props to a root element.

Note: Not all elements make sense and some elements may cause accessibility issues. Change this value with care.

span
refReact.Ref<R = span>

Optional ref. If the component represents an element, this ref will be a reference to the real DOM element of the component. If as is set to an element, it will be that element. If as is a component, the reference will be to that component (or element if the component uses React.forwardRef).

AccessoryMedia

AccessoryMedia

AccessoryMedia fills an accessory tile with an image. Pass icon to center a decorative icon on a contrast scrim. The image stays hidden until it loads; a failed load keeps the tile background. Always decorative.

Props

Props extend from span. Changing the as prop will change the element interface.

NameTypeDescriptionDefault
srcstring

The URL of the image.

objectFit 'contain' | 'cover'

How the image is resized to fit the tile.

'cover'
icon | 

The icon to display from @workday/canvas-system-icons-web, centered over the image. When set, a scrim is painted under the icon for contrast. Uses color from Accessory for the glyph (base.legacy.neutral0 by default).

size

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
'extraLarge'
colorstring

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.

backgroundstring

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.

cs

The cs prop takes in a single value or an array of values. You can pass the CSS class name returned by , or the result of and . If you're extending a component already using cs, you can merge that prop in as well. Any style that is passed to the cs prop will override style props. If you wish to have styles that are overridden by the css prop, or styles added via the styled API, use wherever elemProps is used. If your component needs to also handle style props, use instead.

import {handleCsProp} from '@workday/canvas-kit-styling';
import {mergeStyles} from '@workday/canvas-kit-react/layout';

// ...

// `handleCsProp` handles compat mode with Emotion's runtime APIs. `mergeStyles` has the same
// function signature, but adds support for style props.

return (
 <Element
   {...handleCsProp(elemProps, [
     myStyles,
     myModifiers({ size: 'medium' }),
     myVars({ backgroundColor: 'red' })
   ])}
 >
   {children}
 </Element>
)
childrenReact.ReactNode
asReact.ElementType

Optional override of the default element used by the component. Any valid tag or Component. If you provided a Component, this component should forward the ref using React.forwardRefand spread extra props to a root element.

Note: Not all elements make sense and some elements may cause accessibility issues. Change this value with care.

span
refReact.Ref<R = span>

Optional ref. If the component represents an element, this ref will be a reference to the real DOM element of the component. If as is set to an element, it will be that element. If as is a component, the reference will be to that component (or element if the component uses React.forwardRef).

AccessoryFavicon

AccessoryFavicon

AccessoryFavicon renders a site favicon in an accessory tile. Pass a site URL or domain as url. The mark is inset in an outlined frame at large and extraLarge, and fills the tile at smaller sizes. Always decorative.

The image is requested from the user's browser at https://www.google.com/s2/favicons. Google receives the hostname and the user's IP address. referrerPolicy="no-referrer" keeps the app origin off that request. It does not proxy the request.

Props

Props extend from span. Changing the as prop will change the element interface.

NameTypeDescriptionDefault
urlstring

The site URL or bare domain, such as https://design.workday.com or workday.com. The hostname is used to resolve the favicon.

size

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
'extraLarge'
colorstring

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.

backgroundstring

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.

cs

The cs prop takes in a single value or an array of values. You can pass the CSS class name returned by , or the result of and . If you're extending a component already using cs, you can merge that prop in as well. Any style that is passed to the cs prop will override style props. If you wish to have styles that are overridden by the css prop, or styles added via the styled API, use wherever elemProps is used. If your component needs to also handle style props, use instead.

import {handleCsProp} from '@workday/canvas-kit-styling';
import {mergeStyles} from '@workday/canvas-kit-react/layout';

// ...

// `handleCsProp` handles compat mode with Emotion's runtime APIs. `mergeStyles` has the same
// function signature, but adds support for style props.

return (
 <Element
   {...handleCsProp(elemProps, [
     myStyles,
     myModifiers({ size: 'medium' }),
     myVars({ backgroundColor: 'red' })
   ])}
 >
   {children}
 </Element>
)
childrenReact.ReactNode
asReact.ElementType

Optional override of the default element used by the component. Any valid tag or Component. If you provided a Component, this component should forward the ref using React.forwardRefand spread extra props to a root element.

Note: Not all elements make sense and some elements may cause accessibility issues. Change this value with care.

span
refReact.Ref<R = span>

Optional ref. If the component represents an element, this ref will be a reference to the real DOM element of the component. If as is set to an element, it will be that element. If as is a component, the reference will be to that component (or element if the component uses React.forwardRef).

AccessoryCalendar

AccessoryCalendar

AccessoryCalendar renders a month and day in an accessory tile. The month is critical and the day is the default foreground color. Both scale with size. Always decorative.

Props

Props extend from span. Changing the as prop will change the element interface.

NameTypeDescriptionDefault
monthstring

The month label, such as Apr.

date number | string

The day of the month, such as 30.

size

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
'extraLarge'
colorstring

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.

backgroundstring

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.

cs

The cs prop takes in a single value or an array of values. You can pass the CSS class name returned by , or the result of and . If you're extending a component already using cs, you can merge that prop in as well. Any style that is passed to the cs prop will override style props. If you wish to have styles that are overridden by the css prop, or styles added via the styled API, use wherever elemProps is used. If your component needs to also handle style props, use instead.

import {handleCsProp} from '@workday/canvas-kit-styling';
import {mergeStyles} from '@workday/canvas-kit-react/layout';

// ...

// `handleCsProp` handles compat mode with Emotion's runtime APIs. `mergeStyles` has the same
// function signature, but adds support for style props.

return (
 <Element
   {...handleCsProp(elemProps, [
     myStyles,
     myModifiers({ size: 'medium' }),
     myVars({ backgroundColor: 'red' })
   ])}
 >
   {children}
 </Element>
)
childrenReact.ReactNode
asReact.ElementType

Optional override of the default element used by the component. Any valid tag or Component. If you provided a Component, this component should forward the ref using React.forwardRefand spread extra props to a root element.

Note: Not all elements make sense and some elements may cause accessibility issues. Change this value with care.

span
refReact.Ref<R = span>

Optional ref. If the component represents an element, this ref will be a reference to the real DOM element of the component. If as is set to an element, it will be that element. If as is a component, the reference will be to that component (or element if the component uses React.forwardRef).