;
}
};
```tsx lines expandable theme={null}
import { AiMark, Flex, Text } from "@servicetitan/anvil2";
function App() {
return (
Created by Atlas
);
}
export default App;
```
## Common Examples
```tsx theme={null}
import { AiMark } from "@servicetitan/anvil2";
function ExampleComponent() {
return (
);
}
```
`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.
```tsx lines expandable theme={null}
import { AiMark, Flex, Text } from "@servicetitan/anvil2";
function App() {
return (
Call & job notes summary
);
}
export default App;
```
### With Popover
Use the popover variant to show richer content — such as a title and description — when users click the icon.
```tsx lines expandable theme={null}
import { AiMark, Button, Flex, Text, Textarea } from "@servicetitan/anvil2";
function App() {
return (
Recommended estimate lines
),
}}
/>
);
}
export default App;
```
### 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.
```tsx theme={null}
import { useState } from "react";
import { AiMark, Flex, Text } from "@servicetitan/anvil2";
function ParentComponent() {
const [isHovered, setIsHovered] = useState(false);
return (
setIsHovered(true)}
onMouseLeave={() => setIsHovered(false)}
>
AI-powered suggestions
);
}
```
### Plain Icon
Without `popoverOrTooltipConfig`, `AiMark` renders as a non-interactive icon. Use this when you only need the visual indicator without any overlay.
```tsx lines expandable theme={null}
import { AiMark, Flex, Text } from "@servicetitan/anvil2";
function App() {
return (
Created by Atlas
);
}
export default App;
```
## 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.
```tsx theme={null}
```
## `AiMark` Props
`AiMark` accepts all props from `Icon` except `svg`, plus the following:
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.
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 of the icon.
Visual style of the AI mark. `"default"` inherits the current text color. `"gradient"` applies a blue gradient fill.
## `AiMarkWithTooltipOrPopoverConfig`
A discriminated union — use `type` to select either the tooltip or popover variant.
### Tooltip 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.
