Documentation Index
Fetch the complete documentation index at: https://anvil.servicetitan.com/llms.txt
Use this file to discover all available pages before exploring further.
Implementation
AiMark Props
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.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.
<AiMark
collapsePadding="inline"
type="default"
size="medium"
popoverOrTooltipConfig={{
type: "tooltip",
content: "Powered by AI",
triggerLabel: "AI feature information",
}}
/>
AiMark Props
AiMark accepts all props from Icon except svg, plus the following:collapsePadding
"inline" | "block" | "all"
Collapses layout padding on the chosen axes so the mark’s box matches a plain icon on those axes. Interactive tooltip and popover variants keep the same hit target; non-interactive variants add padding on the non-collapsed axes.
Forces the pulsing morph animation to play.
popoverOrTooltipConfig
AiMarkWithTooltipOrPopoverConfig
Configuration for an optional tooltip or popover overlay. When provided, the icon renders as an interactive button that animates on hover and focus. See AiMarkWithTooltipOrPopoverConfig below.
size
"small" | "medium" | "large" | "xlarge"
default:"medium"
Size of the icon.
type
"default" | "gradient"
default:"default"
Visual style of the AI mark. "default" inherits the current text color. "gradient" applies a blue gradient fill.
type to select either the tooltip or popover variant.Accessible label for the trigger button, announced to screen readers.
Text content displayed inside the tooltip. When omitted, defaults to AI can make mistakes.
Optional props forwarded to the Tooltip component.
Discriminant for the tooltip variant.
Popover variant
Accessible label for the trigger button, announced to screen readers.
Content rendered inside the popover. When omitted, defaults to the standard AI disclaimer message and a Learn more link to the privacy policy.
Optional props forwarded to Popover.Content.
Optional props forwarded to the internal beta Popover root.
Discriminant for the popover variant.
