Interaction tag

API

Generated CoreAI prop summaries, not replacement type declarations. Most native DOM/event and ARIA props are omitted. ? means optional; JSDoc shows defaults, deprecations, and conditional requirements. Defaults assume the standard CoreAI provider.

InteractionTag API

InteractionTag component - a visual representation of an attribute with primary and secondary actions. Can have InteractionTagPrimary and InteractionTagSecondary components as its children.

interface InteractionTagProps {
  /**
   * An InteractionTag can have filled, outlined or brand experience.
   * @default 'filled'
   */
  appearance?: "brand" | "filled" | "outline";

  as?: "div";

  children?: any;

  className?: string;

  /**
   * An InteractionTag can show that it cannot be interacted with.
   * @default false
   */
  disabled?: boolean;

  ref?: Ref<HTMLDivElement>;

  /**
   * An InteractionTag can be selected.
   * Note: This prop only changes the appearance of the tag at the moment. A future PR will add the integration with TagGroup.
   * @default false
   */
  selected?: boolean;

  /**
   * An InteractionTag can have rounded or circular shape.
   * @default 'round'
   */
  shape?: "circular" | "rounded";

  /**
   * An InteractionTag has three sizes.
   * @default 'medium'
   */
  size?: "small" | "medium" | "extra-small";

  style?: CSSProperties;

  /**
   * Unique value identifying the tag within a TagGroup
   */
  value?: string;
}

InteractionTagPrimary API

InteractionTagPrimary component - used as the first child of the InteractionTag component. Provides visual attributes such as media, icon, primary and secondary text, as well as the ability to attach a primary action.

interface InteractionTagPrimaryProps {
  as?: "button";

  children?: any;

  className?: string;

  /**
   * Whether the `InteractionTag` component has a `Secondary` component that provides an secondary action.
   * If `true`, the `InteractionTagPrimary` component will adjust its styles to accommodate the `Secondary` component.
   * @default false
   */
  hasSecondaryAction?: boolean;

  /**
   * Slot for an icon
   */
  icon?: WithSlotShorthandValue<{ as?: "span"; } & Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & { ref?: ((instance: HTMLSpanElement | null) => void) | RefObject<HTMLSpanElement> | null; }, "children"> & { children?: any; }> | null | undefined;

  /**
   * Slot for a visual element, usually an avatar
   */
  media?: WithSlotShorthandValue<{ as?: "span"; } & Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & { ref?: ((instance: HTMLSpanElement | null) => void) | RefObject<HTMLSpanElement> | null; }, "children"> & { children?: any; }> | null | undefined;

  /**
   * Main text for the InteractionTagPrimary button. Children of the root slot are automatically rendered here
   */
  primaryText?: WithSlotShorthandValue<{ as?: "span"; } & Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & { ref?: ((instance: HTMLSpanElement | null) => void) | RefObject<HTMLSpanElement> | null; }, "children"> & { children?: any; }> | null | undefined;

  ref?: Ref<HTMLButtonElement>;

  /**
   * Secondary text that describes or complements the main text
   */
  secondaryText?: WithSlotShorthandValue<{ as?: "span"; } & Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & { ref?: ((instance: HTMLSpanElement | null) => void) | RefObject<HTMLSpanElement> | null; }, "children"> & { children?: any; }> | null | undefined;

  style?: CSSProperties;
}

InteractionTagSecondary API

InteractionTagSecondary component - used as the second child of the InteractionTag component and provides the secondary action, which is dismiss by default.

interface InteractionTagSecondaryProps {
  as?: "button";

  children?: any;

  className?: string;

  ref?: Ref<HTMLButtonElement>;

  style?: CSSProperties;
}