InfoText

import {InfoText} from '@sentry/scraps/info'; import {Flex} from '@sentry/scraps/layout';

import * as Storybook from 'sentry/stories';

export const documentation = import('!!type-loader!@sentry/scraps/info/infoText');

InfoText renders text with a dotted underline that reveals a tooltip on hover or focus. It's keyboard accessible out of the box and provides a consistent pattern for inline explanations.

<Storybook.Demo> <InfoText title="Time to First Byte measures the time from the request start until the first byte of the response is received."> TTFB </InfoText> </Storybook.Demo>

<InfoText title="Time to First Byte measures the time...">TTFB</InfoText>

Text Props

InfoText extends Text, so you can use props like size and variant to style the text.

<Storybook.Demo> <Flex gap="lg" align="center"> <InfoText title="Small muted text" size="sm" variant="muted"> Hint text </InfoText> <InfoText title="Bold text" bold> Important term </InfoText> </Flex> </Storybook.Demo>

<InfoText title="Small muted text" size="sm" variant="muted">
  Hint text
</InfoText>
<InfoText title="Bold text" bold>
  Important term
</InfoText>

When to Use

Use InfoText to:

• Define technical terms or acronyms inline
• Provide additional context without adding visual clutter
• Create consistent, accessible inline help patterns

Prefer InfoText over wrapping text with a raw Tooltip component.

Accessibility

• Keyboard accessible: Users can Tab to focus the text and reveal the tooltip
• Focus indicator: A visible focus ring appears when focused
• Hoverable tooltip: Users can move their cursor into the tooltip to interact with its content