Skip to main content

​
Common Examples

import { AiMark } from "@servicetitan/anvil2";

function ExampleComponent() {
  return (
    <AiMark
      type="gradient"
      popoverOrTooltipConfig={{
        type: "tooltip",
        content: "These suggestions were written by Atlas.",
        triggerLabel: "Information about AI-powered suggestions",
      }}
    />
  );
}
AiMark displays the ServiceTitan AI mark. When paired with a tooltip or popover via popoverOrTooltipConfig, the icon becomes interactive and animates on hover and focus. Without a configuration, it renders as a static inline icon.The component automatically respects the user’s prefers-reduced-motion system preference — animations are disabled when reduced motion is preferred.

​
With Tooltip

Use the tooltip variant to show a brief text label when users hover or focus the icon.

​
With Popover

Use the popover variant to show richer content — such as a title and description — when users click the icon.

​
Force Animated

Use forceAnimate to control the pulsing animation from a parent component. This is intended for cases where AiMark is embedded inside an interactive element and the animation should respond to the parent’s hover or focus state rather than its own.
import { useState } from "react";
import { AiMark, Flex, Text } from "@servicetitan/anvil2";

function ParentComponent() {
  const [isHovered, setIsHovered] = useState(false);

  return (
    <Flex
      alignItems="center"
      gap="2"
      onMouseEnter={() => setIsHovered(true)}
      onMouseLeave={() => setIsHovered(false)}
    >
      <AiMark type="gradient" forceAnimate={isHovered} />
      <Text>AI-powered suggestions</Text>
    </Flex>
  );
}

​
Plain Icon

Without popoverOrTooltipConfig, AiMark renders as a non-interactive icon. Use this when you only need the visual indicator without any overlay.

​
React Accessibility

  • When popoverOrTooltipConfig is provided, the icon renders as a ghost Button with an aria-label set from triggerLabel. This ensures screen readers announce a meaningful label rather than just “button”.
  • Pass a descriptive triggerLabel that communicates the purpose of the overlay — for example, "Learn about AI-powered suggestions" rather than "AI icon".
  • Animations are automatically suppressed when the user has prefers-reduced-motion: reduce set in their system preferences.
  • The popover variant uses the internal beta Popover with role="dialog"; focus moves into the popover when it opens.
  • The popover variant calls stopPropagation on click to prevent unintended event bubbling when the icon is nested inside other interactive elements.
Last modified on April 14, 2026